From the makersREADME, read 16 Oct
React Three Fiber is a React renderer for Three.js, letting you build a 3D scene declaratively with reusable components that react to state and participate in React's ecosystem. Threejs elements are written as JSX, so <mesh /> becomes new THREE.Mesh(), and anything Three.js supports is available. It is a renderer for React, so it must pair with a matching major version of React (v8 with react@18, v9 with react@19).
Install
npm install three @types/three @react-three/fiberCommands
npm install three @types/three @react-three/fiberInstall Three.js and the renderer
<Canvas>Create the 3D scene container
useFrame((state, delta) => ...)Run code every render-loop frame
<mesh onClick={...} onPointerOver={...} />Add interactive Three.js objects in JSX
- Needs
- React 18 for @react-three/fiber@8, React 19 for @react-three/fiber@9; Three.js.
- Limits
How creators use it1 take
- @cindie.zhuInstagram, 18 Oct
Drops a full three.js 3D library into a site as a design asset.
Point Claude Code at the repo and describe the 3D effect you want.