3D Web · 20 stations · 129 topics · ~54 h
The assembly line
Twenty stations, in the order people really learn 3D for the web. Each station adds one part to the Lumen bike and one step to your showroom project. Start at station 00 if you are new; jump to a zone if you are not.
Beginner · stations 00–04
- 00Beginnerpart · Display stand6 topics · ~2 h · 4 QC tests
Start Here: Your First Scene and the Plan
What 3D on the web is, what you will build and get, where you write code (this page, then your computer), and your first scene: a turning display stand.
- 01Beginnerpart · Down tube6 topics · ~2 h · 5 QC tests
How a Screen Draws 3D
Pixels, triangles, the GPU and the rendering pipeline: what really happens between your code and the picture, and how to check whether a browser can draw 3D at all.
- 02Beginnerpart · Top tube7 topics · ~2 h · 5 QC tests
Just Enough 3D Math
Points, arrows, dot and cross products, coordinate spaces, matrices and rotations: only the maths three.js needs, shown first, counted second, written as a formula last.
- 03Beginnerpart · Seat tube7 topics · ~2 h · 5 QC tests
three.js Foundations
Scene, camera and renderer; the render loop and delta time; resizing and pixel ratio; Object3D and the scene graph; debug tools. Then split the showroom into modules.
- 04Beginnerpart · Chain and seat stays7 topics · ~2 h · 4 QC tests
Geometry
Shapes are lists of numbers. Use the built-in shapes, build your own from raw vertices, light them with normals, wrap pictures with UVs and edit them live.
Intermediate · stations 05–11
- 05Intermediatepart · Fork and head tube7 topics · ~2 h · 5 QC tests
Materials, Light and Shadow
Why a surface looks the way it does: materials, how light is computed, metal and rough, six light types, shadow maps, colour and tone mapping. Then you light the showroom.
- 06Intermediatepart · Front wheel7 topics · ~2 h · 4 QC tests
Textures and Environments
Load pictures onto surfaces without surprises: colour space, repeat, filtering, PBR maps, HDR environments and texture memory. Then build the front wheel.
- 07Intermediatepart · Rear wheel6 topics · ~2 h · 3 QC tests
Cameras and Controls
Perspective and orthographic cameras, near, far and the depth buffer, OrbitControls with limits, framing any object, smooth camera moves. Then the showroom gets its rear wheel and three views.
- 08Intermediatepart · Handlebar and stem6 topics · ~2 h · 4 QC tests
Interaction
Click, tap and press keys in 3D: raycasting, pointer events, hover, labels, keyboard twins and picking at scale. The showroom shows each bike part's name and price.
- 09Intermediatepart · Crankset and chainring6 topics · ~2 h · 6 QC tests
Animation
Time-based motion with delta time, easing and tweens by hand, the AnimationMixer, morph targets and skinning, reduced motion and a pause button. Then the crank turns with the wheels.
- 10Intermediatepart · Chain7 topics · ~3 h · 4 QC tests
Models and the Asset Pipeline
Inside glTF, exporting the bike, loading models with progress and errors, Draco and Meshopt compression, and licences: the showroom loads a 34 KB file.
- 11Intermediatepart · Saddle and seat post7 topics · ~2 h · 5 QC tests
React Three Fiber
Write three.js scenes as React components: JSX objects, useFrame without re-renders, events, drei helpers, Suspense loading, and the showroom rebuilt in React.
Advanced · stations 12–19
- 12Advancedpart · Frame paint7 topics · ~3 h · 5 QC tests
Shaders with GLSL
Write the small programs the GPU runs for every vertex and pixel: GLSL, uniforms, patterns, noise, displacement and debugging, then the showroom's metal-flake paint.
- 13Advancedpart · Headlight6 topics · ~3 h · 3 QC tests
WebGPU, TSL and Node Materials
WebGPURenderer with its WebGL 2 fallback, node materials and TSL, what does not carry over from WebGL, compute shaders for particles, and the headlight in TSL.
- 14Advancedpart · Rear light6 topics · ~3 h · 4 QC tests
Under the Hood: Raw WebGL 2 and WebGPU
A triangle in raw WebGL 2 and raw WebGPU, every line explained: state, buffers, bind groups, real errors, what three.js does each frame. The rear light glows.
- 15Advancedpart · Pedals6 topics · ~2 h · 4 QC tests
Post-Processing and Effects
Render targets, the effect chain, selective bloom, anti-aliasing and particles: the headlight glows, the hovered part is outlined, and the bike gets its pedals.
- 16Advancedpart · Brakes6 topics · ~3 h · 4 QC tests
Physics and Small Games
Rapier in the browser: bodies, colliders, the fixed timestep, joints, keeping meshes in step, and a test ride with keys, buttons and brakes.
- 17Advancedpart · Mudguards7 topics · ~4 h · 4 QC tests
Performance
Measure first: frame budget, draw calls and instancing, LOD and culling, disposal and leaks, pixels and fill rate, workers, and a budget the showroom checks itself.
- 18Advancedpart · Bell and bottle cage7 topics · ~4 h · 4 QC tests
Production-ready 3D
What to do when 3D cannot run: fallbacks, a lost GPU, screen readers, slow first loads, WebXR, and a deploy where the models 404.
- 19Advancedpart · Lumen badge5 topics · ~3 h · 4 QC tests
Interviews and Capstone
3D frontend interview questions with measured answers, debugging rounds for black, slow, leaking and flickering scenes, two system designs, and the finished showroom.