Declarative 3D
React Three Fiber
Build declarative Three.js scenes inside React with managed rendering, resize and disposal.
Use React Three Fiber to compose 3D scenes as components, manage the render loop, and avoid the state-update mistakes that kill frame rate.
- Repo skills
- 28
- R3F version
- v9
- React target
- React 19
- Loop rule
- Mutate refs
Live scene
React Three Fiber
npm i three @react-three/fiberMITOverview
What React Three Fiber actually does
React Three Fiber maps Three.js objects to React components and manages the loop, resize and disposal of the objects it creates. The skill covers scene composition, refs, useFrame, pointer events and the boundary between React state and per-frame mutation.
It pairs with @react-three/drei for common helpers and with Framer Motion for UI-level motion. The result is a scene architecture that stays readable as it grows.
Capabilities
What it helps your agent ship
Compose Three.js scenes as React components.
Manage canvas resize, DPR and camera updates.
Animate with useFrame without per-frame setState.
Handle pointer events and object selection.
Load models and textures with Suspense boundaries.
Dispose scene resources safely on unmount.
Workflow
The process the skill follows
A repeatable sequence keeps the agent from jumping straight into edits before it understands the job.
- 01
Define the canvas
Set the camera, DPR range, colour management and fallback before building the scene.
- 02
Compose the scene
Break the environment into components for lights, geometry, materials and effects.
- 03
Animate with refs
Mutate object transforms inside useFrame and keep React state out of the loop.
- 04
Add interaction
Use R3F pointer events for hover, selection and camera transitions.
- 05
Profile and dispose
Watch draw calls and memory, then verify that unmounting frees the scene.
Inside the pack
References and modules
These are the load-on-demand files or command groups that make the skill useful beyond a single prompt.
Canvas & camera
Renderer configuration, DPR, resize and colour management.
Scene graph
Component composition for meshes, groups, lights and materials.
useFrame
Per-frame animation through refs instead of state updates.
Events
Pointer, click and hover interactions with object metadata.
Assets
Suspense-based model and texture loading with progress states.
Disposal
Clean up geometries, materials and render targets on unmount.
Use cases
Where it earns its place
Interactive product scene
Build a component-driven 3D product viewer with selection and camera states.
Animated hero
Compose a lightweight scene that responds to pointer movement without re-rendering React.
R3F performance review
Find state updates inside useFrame and other causes of low frame rate.
Prompt starters
Try one of these first
Copy a prompt into your agent. Replace the example URL with your own project or page.
Build an R3F hero scene with a rotating geometry, particles and pointer parallax.
Review this React Three Fiber component for per-frame setState and disposal mistakes.
Add model loading with Suspense and a graceful WebGL fallback to this scene.
Keep exploring
Related skills
Want a site that uses this skill properly?
We build Next.js websites with technical SEO, structured data, 3D scenes and motion that stays inside a performance budget.