Real assets and React Three Fiber

Real projects don't build robots out of BoxGeometry — they load models exported from Blender or bought from an asset store. The web's standard format is glTF (usually the binary .glb): it packs geometry, materials, textures, and animations into one file designed to be parsed fast, which is why it's called the JPEG of 3D. Three.js loads it with GLTFLoader from the addons folder:

import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";

const loader = new GLTFLoader();
loader.load("/models/robot.glb", (gltf) => {
  scene.add(gltf.scene); // a ready-made Object3D subtree — lesson 3 applies as-is
});

gltf.scene is just a scene-graph branch: you can traverse it, reposition it, or parent it under a pivot like anything else. For big models, Draco or meshopt compression shrinks geometry several-fold — you attach a DRACOLoader (or the meshopt decoder) to the GLTFLoader and everything else stays the same.

The React Three Fiber mental model

React Three Fiber (R3F) is a React renderer for Three.js — not a wrapper library. The insight: a scene graph is a tree, JSX describes trees, so let React reconcile the scene graph. A lowercase tag like <mesh> maps to new THREE.Mesh(); the args prop maps to constructor arguments; nesting maps to add(). <Canvas> supplies the renderer, camera, and animation loop, and useFrame is your per-frame callback — delta included.

function Spinner() {
  const ref = useRef();
  useFrame((state, delta) => (ref.current.rotation.y += delta)); // lesson 4!
  return (
    <mesh ref={ref}>
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color="hotpink" />
    </mesh>
  );
}

The challenge builds R3F's core move from scratch: a declarative tree of plain elements, and a tiny reconciler that turns tags into constructor calls and nesting into a scene graph.

That's the course: you can stand up the scene/camera/renderer trio, light a mesh, structure a scene graph, animate it honestly with delta time, and feed it real glTF assets — with or without React. Everything else in Three.js builds on these five ideas.