React Three Fiber: thinking 3D declaratively
How React Three Fiber turns Three.js scenes into components — and why declarative 3D finally made my creative work maintainable.
For a long time I wrote Three.js the way the library asks you to: imperatively. Create the scene, position the camera, add a mesh, update everything by hand inside the render loop. It works — but every larger project turned into a tangle of state nobody wanted to unwind. React Three Fiber changed that for me.
From commands to description
React Three Fiber, or R3F, lets me express a 3D scene the same way I build an interface: as a tree of components. Instead of instantiating a mesh and manually attaching it to the scene, I simply describe what should be there.
<mesh position={[0, 1, 0]}>
<boxGeometry args={[1, 1, 1]} />
<meshStandardMaterial color="hotpink" />
</mesh>
This isn't a toy layer on top of Three.js — it is Three.js, just declarative. Every Three class becomes a component, every property a prop. The crucial difference: I describe the state I want, and R3F reconciles the scene to match it. The very principle that made React so strong in the DOM now applies to the canvas.
Why this changes creative work
Maintainability isn't the opposite of creativity — it's what lets you stay bold.
The real win isn't less code, it's less fear of change. When a scene is made of clearly named
components, I can swap an idea without dreading the rest. The ecosystem helps enormously: with
@react-three/drei I have cameras, controls and loaders within reach, and hooks like useFrame
bind animation cleanly into the render cycle — no global loop that has to know everything.
For me that means I can sketch a 3D idea quickly, share it with a team, and pick it back up weeks later without first doing archaeology on what past-me was thinking. Three.js gives me the depth, R3F gives me the structure. Declarative 3D isn't a trend to me — it's how creative web work finally carries beyond the first demo.