react-three-fiber - Build declarative 3D scenes with React Three Fiber
Build interactive, component-based 3D scenes in React using React Three Fiber, Three.js objects, hooks, state management, and reusable abstractions.
Tags
Updated: 2026-10-16Capabilities
Typical Inputs
Typical Outputs
What this skill does
- Create declarative 3D scenes
- Configure Canvas rendering
- Animate objects with useFrame
- Access scene state with useThree
- Load assets with useLoader
- Handle pointer interactions
- Create reusable 3D components
- Optimize many-object rendering
Inputs
- React application
- Three.js assets
- Scene configuration
- Camera configuration
- Renderer settings
- Interaction requirements
Outputs
- Rendered 3D scenes
- Interactive 3D objects
- Animated scene elements
- Loaded models and textures
- Reusable React components
Requirements
- React environment
- React Three Fiber
- Three.js
- WebGL-capable renderer