Styling / UI & Animation
React Three Fiber
React renderer for Three.js — build 3D scenes as React components.
Monthly cost
Free
Popularity
4/5
LLM knowledge
3/5
Difficulty
Medium
bundle: ~15kb (+ three)
#open-source#typescript
What React Three Fiber is good at
Strengths
- +JSX for 3D
- +Plays nicely with react-spring and Leva
- +Huge helper library (drei)
Tradeoffs
- −Three.js bundle on top
- −React-only
Coding-agent prompt
Drop into Claude / Cursor to get idiomatic React Three Fiber code.
You're using React Three Fiber. Follow these rules: - Wrap 3D work in `<Canvas>` and compose scenes as JSX components. - Reach for `@react-three/drei` for common helpers (OrbitControls, Html, useGLTF, Environment). - Use `useFrame` for per-frame logic; never `useEffect` with requestAnimationFrame. - `<Suspense>` your async assets — loaders are promises. - Use `<primitive>` sparingly. Most of the time you want dedicated components that own their state. - Hide the canvas on mobile when you can't deliver 60fps — perf matters more than perfection.
Popular pairings with React Three Fiber
Browse all categories