Command Palette

Search for a command to run...

Hectal

3D Web · the workshop · three.js r186, React Three Fiber, WebGL 2 and WebGPU

Build 3D for the web, one part at a time.

Start from a single pixel and end with a 3D bike showroom people can turn, paint and ride in their browser. You need some HTML, CSS and JavaScript; every other word is explained where it first appears, and the first scenes run right on this page with nothing to install. Each phase adds one part to the Lumen bike below: how a screen draws 3D and just enough maths, then three.js piece by piece (shapes, light, textures, cameras, clicking, animation, real models), React Three Fiber, your own shaders in GLSL and TSL, WebGPU and the raw APIs under the hood, effects, physics, and the production work most courses skip: performance on a cheap phone, fallbacks, a lost GPU, accessibility. Every live scene shows what it costs the GPU, and every exercise is checked on the scene you built.

Start with part 00 The assembly line
parts
20
topics
129
hours
54
live scenes
263
QC tests
86
0001020304050607080910111213141516171819

Lumen bike · LB-01

0/20 parts assembled · 0 in progress

technical drawing · scale 1:10

Every phase adds one part. Finish a phase and its part snaps into place; finish Phase 12 and the frame gets its paint. Drag to turn the bike, or pick a part from the list.

Bill of materials · 20 parts · 20 phases

  1. 00Start Here: Your First Scene and the PlanDisplay stand6 topics~2 hBeginner
  2. 01How a Screen Draws 3DDown tube6 topics~2 hBeginner
  3. 02Just Enough 3D MathTop tube7 topics~2 hBeginner
  4. 03three.js FoundationsSeat tube7 topics~2 hBeginner
  5. 04GeometryChain and seat stays7 topics~2 hBeginner
  6. 05Materials, Light and ShadowFork and head tube7 topics~2 hIntermediate
  7. 06Textures and EnvironmentsFront wheel7 topics~2 hIntermediate
  8. 07Cameras and ControlsRear wheel6 topics~2 hIntermediate
  9. 08InteractionHandlebar and stem6 topics~2 hIntermediate
  10. 09AnimationCrankset and chainring6 topics~2 hIntermediate
  11. 10Models and the Asset PipelineChain7 topics~3 hIntermediate
  12. 11React Three FiberSaddle and seat post7 topics~2 hIntermediate
  13. 12Shaders with GLSLFrame paint7 topics~3 hAdvanced
  14. 13WebGPU, TSL and Node MaterialsHeadlight6 topics~3 hAdvanced
  15. 14Under the Hood: Raw WebGL 2 and WebGPURear light6 topics~3 hAdvanced
  16. 15Post-Processing and EffectsPedals6 topics~2 hAdvanced
  17. 16Physics and Small GamesBrakes6 topics~3 hAdvanced
  18. 17PerformanceMudguards7 topics~4 hAdvanced
  19. 18Production-ready 3DBell and bottle cage7 topics~4 hAdvanced
  20. 19Interviews and CapstoneLumen badge5 topics~3 hAdvanced
See every topic on the assembly line

Spec sheet · what you can do at the end

  1. SPEC-01Explain how a browser draws 3D, from triangles through the GPU pipeline to pixels, and place things in space with vectors, matrices and quaternions
  2. SPEC-02Build product viewers, configurators and 3D hero sections with three.js r186, with light, textures, cameras, picking and animation
  3. SPEC-03Load, compress and license real glTF models, and rebuild a scene in React with React Three Fiber and drei
  4. SPEC-04Write shaders in GLSL and in TSL, use WebGPU with an automatic WebGL 2 fallback, and draw with the raw WebGL 2 and WebGPU APIs
  5. SPEC-05Keep a scene within a draw-call and memory budget on a phone, and ship it with fallbacks, context-loss recovery, accessibility and fast loading
  6. SPEC-06Answer 3D frontend interview questions and show a finished, measured 3D showroom

Build orders · pick the one for your goal

Work order WO-01

Complete beginner

You know some HTML, CSS and JavaScript and have never drawn in 3D. Start at part 00: the first scenes run on this page.

  1. 00 Start Here: Your First Scene and the Plan
  2. 01 How a Screen Draws 3D
  3. 02 Just Enough 3D Math
  4. 03 three.js Foundations
  5. 04 Geometry
  6. 05 Materials, Light and Shadow

Work order WO-02

Job-ready three.js developer

You build web apps and need to ship a product viewer or configurator with three.js or React Three Fiber.

  1. 03 three.js Foundations
  2. 05 Materials, Light and Shadow
  3. 07 Cameras and Controls
  4. 08 Interaction
  5. 10 Models and the Asset Pipeline
  6. 11 React Three Fiber
  7. 17 Performance
  8. 18 Production-ready 3D

Work order WO-03

Senior and graphics depth

You use three.js already and want shaders, WebGPU, the raw APIs, performance budgets and interview depth.

  1. 12 Shaders with GLSL
  2. 13 WebGPU, TSL and Node Materials
  3. 14 Under the Hood: Raw WebGL 2 and WebGPU
  4. 15 Post-Processing and Effects
  5. 17 Performance
  6. 18 Production-ready 3D
  7. 19 Interviews and Capstone

On every bench

A live viewport

Every 3D example runs real three.js on the page. Edit the code and the scene changes. The status bar shows what the GPU is doing: draw calls, triangles, memory, frame rate.

The scene tree

Open the inspector to see every object your code created, like the outliner of a 3D editor. Nothing is hidden from you.

Passes, not walls of text

Each topic goes in passes: the picture in your head, the words, the steps, the code, then breaking it on purpose, the pro notes and practice.

QC tests

Exercises are checked on the scene you built: the object is there, in the right place, within the draw-call budget, and it survives losing the GPU.