React Three Fiber

React renderer for Three.js

FreeAnimation & motionr3f.docs.pmnd.rs

What it is

Express a 3D scene as JSX instead of imperative Three.js calls, with React state, hooks and Suspense for asset loading. The real draw is the ecosystem: drei (helpers, controls, text), postprocessing, rapier physics, gltfjsx.

Why it earns a slot

Realistic total for a 3D hero: 250–350 kB gz of JS plus model assets. Always lazy-load behind React.lazy so it never touches the initial chunk.

Know before you commit

Version-lock trap: @react-three/fiber@9 requires React >=19 <19.3. Lovable scaffolds commonly sit on React 18.3.x — you need @react-three/fiber@8 on React 18, or upgrade React first.

Getting started

npm install three @react-three/fiber @react-three/drei

Field notes

0 from the community

Loading notes…

Field check

Unverified

Pricing snapshot

Free · MIT

Snapshots move fast — verify at checkout, and post a field note if it changed.

Drop into your Lovable chat

Evaluate React Three Fiber (https://r3f.docs.pmnd.rs/) for this project, then use it only if it fits what we are already building.
Context: React renderer for Three.js. Express a 3D scene as JSX instead of imperative Three.js calls, with React state, hooks and Suspense for asset loading. The real draw is the ecosystem: drei (helpers, controls, text), postprocessing, rapier physics, gltfjsx.
Reviewer notes (general, not written for this codebase): Realistic total for a 3D hero: 250–350 kB gz of JS plus model assets. Always lazy-load behind React.lazy so it never touches the initial chunk.
Watch out for: Version-lock trap: @react-three/fiber@9 requires React >=19 <19.3. Lovable scaffolds commonly sit on React 18.3.x — you need @react-three/fiber@8 on React 18, or upgrade React first.
Pricing: Free · MIT
Setup: npm install three @react-three/fiber @react-three/drei
Rules: treat the notes above as background only. Do not assume a theme, style, layout or feature that is not already in this project — inspect the existing code first and ask me before changing visual direction.

/api/public/tools/react-three-fiber

Neighbourhood

How React Three Fiber sits against the rest of the atlas — swaps, companions and the tools builders actually save alongside it.