Overview
Three.js-Powered 3D Model Importer for Framer| 👈 Click for Demo
Bring the full power of Three.js rendering directly into Framer. Load, configure, and animate complex 3D scenes from the property panel—zero code required.
Scroll Animation: native integration with Framer Scroll Variants.
Supported Formats: GLB, GLTF, FBX, and ZIP archives. Native Draco compression support.
Three.js Materials: 4 built-in shaders (Original, Wireframe, Toon, Anime Line) + manual PBR overrides for 15+ properties (transmission, clearcoat, iridescence).
Environments: 6 procedural presets, Poly Haven HDRI integration, custom HDR URLs, and real-time shadows.
Post-Processing Pipeline: GPU-accelerated Bloom, FXAA, 6 tone mapping modes (ACES Filmic, AgX, etc.), color grading, and chromatic aberration.
Controls: Orbit controls, SkinnedMesh animation clip selection, custom dissolve/particle shaders:
Multi-Scene Composition: Render up to 8 independent sub-scenes within a single viewport.
Performance: Eager preloading, parsed Three.js model caching, auto-centering, and smart GPU resource management.
Tools used in this project
Antigravity
AI-assisted development environment for exploring, editing, and shipping software with agentic workflows.
Gemini
Google AI assistant used for research, ideation, writing support, technical exploration, and workflow acceleration.
Codex
AI coding agent used to inspect codebases, edit files, automate tasks, and ship product changes faster.
Claude Code
AI coding assistant for planning, refactoring, debugging, documentation, and complex implementation work.
Framer
Visual web design and publishing tool for building responsive sites, CMS pages, animations, and prototypes.
Three.js
JavaScript 3D library for building interactive WebGL scenes, product visuals, and immersive browser experiences.
Blender
3D creation suite for modeling, materials, lighting, rendering, animation, and production-ready visual assets.
Comment