Three.js Fundamentals
The five ideas every Three.js app is built from: the scene/camera/renderer trio, meshes made of geometry and materials under real lights, the scene graph and its transforms, the animation loop with delta time, and loading real glTF assets — capped with the React Three Fiber mental model. Each lesson pairs current Three.js idioms with a runnable model of the concept built from first principles.
5 lessons · ~2 hours
1. Scene to Screen
Scene, camera, renderer
Every Three.js app starts with the same three objects — a Scene that holds things, a PerspectiveCamera that looks at them, and a WebGLRenderer that draws one frame at a time.
Geometry, materials, lights
A mesh is geometry (shape) plus material (surface). Basic materials ignore lights; standard materials need them — and shade each face by its angle to the light.
The scene graph and transforms
Everything in Three.js is an Object3D in a tree. Position, rotation, and scale are local to the parent — world transforms come from multiplying matrices down the tree.
The animation loop
Animation is re-rendering on a loop. setAnimationLoop schedules the frames, Clock's delta time keeps motion frame-rate independent, and a Raycaster turns clicks into picks.
Real assets and React Three Fiber
glTF is the format real models arrive in — GLTFLoader hands you a ready-made subtree. React Three Fiber then reframes the whole scene graph as JSX with a per-frame hook.