Build declarative 3D scenes with React Three Fiber (R3F) - a React renderer for Three.js. Use when building interactive 3D experiences in React applications with component-based architecture, state management, and reusable abstractions. Ideal for product configurators, portfolios, games, data visual

React Three Fiber Overview React Three Fiber (R3F) is a React renderer for Three.js that brings declarative, component based 3D development to React applications. Instead of imperatively creating and managing Three.js objects, you build 3D scenes using JSX components that map directly to Three.js objects. When to Use This Skill : Building 3D experiences within React applications Creating interactive product configurators or showcases Developing 3D portfolios, galleries, or storytelling experiences Building games or simulations in React Adding 3D elements to existing React projects When you need state management and React hooks with 3D graphics When working with React frameworks (Next.js, Gatsby, Remix) Key Benefits : Declarative : Write 3D scenes like React components React Integration : Full access to hooks, context, state management Reusability : Create and share 3D component libraries Performance : Automatic render optimization and reconciliation Ecosystem : Works with Drei helpers, Zustand, Framer Motion, etc. TypeScript Support : Full type safety for Three.js objects Core Concepts 1. Canvas Component The <Canvas component sets up a Three.js scene, camera, renderer, and render loop. Canvas Props : camera Camera configuration (position, fov, near, far) gl WebGL renderer settings dpr Device pixel ratio (default: [1, 2]) shadows Enable shadow mapping (default: false) frameloop "always" (default), "demand", or "never" flat Disable color management for simpler colors linear Use linear color space instead of sRGB 2. Declarative 3D Objects Three.js objects are created using JSX with kebab case props: Prop Mapping : position → object.position.set(x, y, z) rotation → object.rotation.set(x, y, z) scale → object.scale.set(x, y, z) args → Constructor arguments for geometry/material attach → Attach to parent property (e.g., attach="material" ) Shorthand Notation : 3. useFrame Hook Execute code on every frame (animation loop): useFrame Parameters : state Scene state (camera, scene, gl, clock, etc.) delta Time since last frame (for frame rate independence) xrFrame XR frame data (for VR/AR) Important : Never use setState inside useFrame it causes unnecessary re renders! 4. useThree Hook Access scene state and methods: Available State : camera Default camera scene Three.js scene gl WebGL renderer size Canvas dimensions viewport Viewport dimensions in 3D units clock Three.js clock pointer Normalized mouse coordinates invalidate() Manually trigger render setSize() Manually resize canvas 5. useLoader Hook Load assets with automatic caching and Suspense integration: Loading Multiple Assets : Loader Extensions : Pre loading : Common Patterns Pattern 1: Basic Scene Setup Pattern 2: Interactive Objects (Click, Hover) Pattern 3: Animated Component with useFrame Pattern 4: Loading GLTF Models Pattern 5: Multiple Lights Pattern 6: Instancing (Many Objects) Pattern 7: Groups and Nesting Integration with Drei Helpers [Drei](https://github.com/pmndrs/drei) is the essential helper library for R3F, providing ready to use components: OrbitControls Environment & Lighting Text useGLTF Hook (Drei) Center & Bounds HTML Overlay Scroll Controls Integration with Other Libraries With GSAP With Framer Motion With Zustand (State Management) Performance Optimization 1. On Demand Rendering 2. Instancing Use <instancedMesh for rendering many identical objects: 3. Frustum Culling Objects outside the camera view are automatically culled. 4. LOD (Level of Detail) 5. Adaptive Performance 6. Selective Re renders Use useThree selectors to avoid unnecessary re renders: Common Pitfalls & Solutions ❌ Pitfall 1: setState in useFrame ✅ Solution : Mutate refs directly ❌ Pitfall 2: Creating Objects in Render ✅ Solution : Use arrays or useMemo ❌ Pitfall 3: Not Using useLoader Cache ✅ Solution : Use useLoader (automatic caching) ❌ Pitfall 4: Conditional Mounting (Expensive) ✅ Solution : Use visibility prop ❌ Pitfall 5: useThree Outside Canvas ✅ Solution : Use hooks inside Canvas children ❌ Pitfall 6: Not Disposing Resources ✅ Solution : R3F handles disposal automatically, but be careful with manual Three.js objects Best Practices 1. Component Composition Break scenes into reusable components: 2. Suspend Heavy Assets Always wrap async operations in Suspense: 3. Use TypeScript 4. Organize by Feature 5. Test with React DevTools Profiler Monitor re renders and optimize components causing performance issues. Resources References references/api reference.md Complete R3F & Drei API documentation references/hooks guide.md Detailed hooks usage and patterns references/drei helpers.md Comprehensive Drei library guide Scripts scripts/component generator.py Generate R3F component boilerplate scripts/scene setup.py Initialize R3F scene with common patterns Assets assets/starter r3f/ Complete R3F + Vite starter template assets/examples/ Real world R3F component examples External Resources [Official Docs](https://docs.pmnd.rs/react three fiber) [Drei Docs](https://github.com/pmndrs/drei) [Three.js Docs](https://threejs.org/docs/) [R3F Discord](https://discord.gg/ZZjjNvJ) [Poimandres (pmnd.rs)](https://pmnd.rs/) Ecosystem overview

react-three-fiber