[ 3D · REACT · R3F ]

React Three Fiber: Three.js the React way

React Three Fiber lets you build 3D scenes as declarative React components. Same Three.js underneath — but composable, reactive, and far less boilerplate.

Watch the lecture, then read Max's deep-dive below.

▸ In this video you'll see

Installing Vite + Three.js + React Three Fiber
The three core ideas of an R3F app (Canvas, elements, hooks)
Declaring 3D objects as JSX instead of imperative Three.js code
Adding meshes, materials, lights, and camera controls
How R3F maps React state to the underlying Three.js scene graph

React Three Fiber (R3F) is a React renderer for Three.js. Instead of imperatively creating meshes and pushing them into a scene, you describe your 3D scene as a tree of components — and R3F reconciles that tree into real Three.js objects, exactly the way React DOM reconciles JSX into HTML elements. Crucially, it is not a wrapper that hides Three.js: it is Three.js, expressed declaratively, with zero added overhead at runtime.

Imperative vs. declarative

In vanilla Three.js you write the "how": new Mesh(geometry, material), then scene.add(mesh). In R3F you write the "what":

function Box() {
  return (
    <mesh rotation={[0, 0.4, 0]}>
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color="hotpink" />
    </mesh>
  );
}

Every Three.js class becomes a lowercase JSX element (mesh, boxGeometry, pointLight). Constructor parameters go in the args prop; every other property is set directly as a prop. When state changes, R3F updates only what changed — no manual scene-graph surgery.

The hooks that make it powerful

useFrame — runs a callback on every rendered frame. This is your render loop, now scoped to a component: useFrame((state, delta) => { ref.current.rotation.y += delta }).
useThree — reach into the renderer, camera, scene, and canvas size from anywhere in the tree.
useLoader — declaratively load textures and .glb models, with React Suspense handling the loading state.

The real superpower is the ecosystem. @react-three/drei ships dozens of ready helpers — OrbitControls, Environment, Text, loaders — as one-line components. What is a page of setup in vanilla Three.js is often a single import in R3F.

Why teams reach for it

If your app is already React, R3F means your 3D scene shares the same state, context, and component model as the rest of your UI. A slider that controls a 3D object is just props flowing down. It composes, it is testable, and it scales from a hero animation to a full configurator. And because it is Three.js underneath, everything you learn about geometries, materials, and lights transfers directly — you are simply expressing it in the language your app already speaks.

Keep going

R3F documentation — official guide, API, and pitfalls
@react-three/drei — the essential helper library for R3F

React Three Fiber React Three.js 3D