Course outline

Topic 0.2Beginner ~20 min · step 2 of 6

Your Path and What You Get

In one line

Twenty phases take you from a turning cube to a fast, accessible 3D showroom you can ship: the route in one story, what you will be able to do at the end, the jobs and interviews it prepares you for, and what you need first.

0/6 · 0%

Think of it like this

Before a long walk across a city you look at the whole route on the map. Each street is easy; what makes the walk easy is knowing where each street leads. This topic is the map of the course.

Words you'll meet

New words in this topic, in plain English. Come back here whenever one feels fuzzy.

phase: One chapter of the course, with 5–7 topics and hands-on exercises. Each phase adds one part to the bike on the course home.
build topic: The last topic of each phase, where you add that phase's step to your own lumen-3d project and see every changed file in full.
shader: A small program that runs on the GPU for every corner of every triangle, or for every pixel. Phases 12 and 13 teach you to write them.
React Three Fiber: A library that lets you write three.js scenes as React components (<mesh>, <boxGeometry>). Taught in Phase 11.
configurator: A page where a customer changes a product (colour, parts, size) and sees the result straight away, usually with a price.

Step by step

01Foundations: how 3D works (Phases 1–2)

You start without any library: what a pixel is, why everything is made of triangles, what the GPU does with them and in what order. Then the maths you really need: coordinates, vectors, and matrices explained as "a recipe for moving between spaces", with figures you can drag.

This is the part most tutorials skip. It is also why their readers get stuck later.

02three.js, piece by piece (Phases 3–10)

Then three.js, one idea per phase: the scene and the loop, shapes, materials and light, textures, cameras, interaction, animation, and real models. Each idea arrives because the showroom needs it: the wheels need textures, the parts need clicking.

03React, shaders and WebGPU (Phases 11–14)

Next you rebuild the showroom in React with React Three Fiber, the way many teams write 3D today. Then you write your own shaders for the bike's metal-flake paint, port them to WebGPU's TSL, and finally draw a triangle with raw WebGL 2 and raw WebGPU, so nothing three.js does is a mystery.

04Production (Phases 15–19)

The last part is what separates a demo from a product: effects, physics for the test ride, performance on a cheap phone, fallbacks, recovering when the GPU is taken away, accessibility, loading and deploying. Then interviews and your capstone.

The example below is a preview of the end: a bike made only of simple shapes, turning on its stand. In Phase 4 you build a better one yourself.

Try it yourself

1
Count the parts
Run the preview and press Scene tree in the status bar. You see the stand, the bike group with 8 meshes inside, and the two lights. Every object your code makes is in that tree, so you can always check what you really built.
2
Change the paint
Change "#ff6b2c" in the steel material to "#2a9df4". Every tube changes colour at once, because they all share one material. That idea (shared materials) comes back in Phase 17, where it makes scenes faster.

Code & diagrams

A preview: a bike from simple shapes New tab

Six tubes and two rings. Drag nothing yet: controls arrive in Phase 7. Open the scene tree under the canvas to see the parts.

idle

Console

Run the scene to see its console.

Expected console output

bike parts so far: 8

Break it on purpose

Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.

Break #1

Forget to add the bike

In the preview, change scene.add(stand, bike); to scene.add(stand); and press Run.

terminal

$ Run without adding the bike group

── what you'll see ──

bike parts so far: 8

No error, and the console still counts 8 parts. On the canvas you see only the empty stand.

Myth vs fact

Myth

You must be good at maths to learn 3D.

Fact

You need school arithmetic and a willingness to drag a few figures. Phase 2 explains vectors and matrices in plain words, and three.js does the heavy maths for you.

Myth

A course that teaches React Three Fiber can skip plain three.js.

Fact

React Three Fiber creates real three.js objects. When something goes wrong (and it will), you debug it as three.js. That is why plain three.js comes first here.

Pro corner

Extra depth for experienced readers. New to this? Skip it for now and come back later.

▸
The order follows how graphics is taught at universities (math, then the pipeline, then shading, then textures and cameras, as in Berkeley's CS184 or Cornell's CS4620, which teaches with TypeScript on three.js) blended with the order practical three.js courses use (scene, transforms, geometry, materials, models, shaders). Production topics that most courses skip get two full phases.
▸
Each phase states the three.js release it was checked against (r186). three.js is a 0.x library that releases every 6–10 weeks and sometimes removes old APIs; Phase 18 shows how to upgrade safely, and the course is re-checked when its pinned version changes.

Remember this

1
The problem this solves: 3D looks like magic until you know the steps, so people copy code they don't understand and get stuck the first time it shows a black screen. With the route in front of you, every phase is one clear step towards a showroom you can already picture.
2
The route, as one story. First you learn how a screen draws 3D at all: pixels, triangles, the GPU and its pipeline (Phase 1), and just enough maths to place things in space (Phase 2). Then three.js: the scene, the camera, the render loop (Phase 3), shapes (Phase 4), materials, light and shadow (Phase 5), textures (Phase 6), cameras and controls (Phase 7), clicking things (Phase 8) and animation (Phase 9). You load real 3D models and shrink them (Phase 10), then rebuild the showroom in React with React Three Fiber (Phase 11). The advanced half writes shaders, the small programs that run on the GPU (Phase 12), moves to WebGPU and its shader language TSL (Phase 13), looks under the hood at raw WebGL 2 and WebGPU (Phase 14), adds glow and effects (Phase 15) and physics for a test ride (Phase 16), makes it fast on phones (Phase 17) and production-ready: fallbacks, losing the GPU, accessibility, loading (Phase 18). Phase 19 is interviews and your capstone.
3
One product the whole way. Every phase ends with a build topic that adds one part to the Lumen showroom, and the course home shows your bike being assembled: finish a phase and its part snaps into place. By the end the showroom shows the LB-01 on a turning stand, lets a customer drag, click a part, repaint it, take a short test ride, and works on a phone, with a keyboard and with a screen reader.
4
What you can do when you finish. Build product viewers, configurators and 3D hero sections with three.js or React Three Fiber; load and optimise glTF models; write shaders in GLSL and TSL; use WebGPU with a WebGL 2 fallback; keep a scene within a draw-call and memory budget on a phone; handle loading, errors, lost GPUs and accessibility. That covers the 3D parts of frontend jobs that list three.js or React Three Fiber, and the questions of creative-developer and graphics-heavy frontend interviews (Phase 19 practises them). You keep a finished showroom to show.
5
What you don't get. No certificate and no promise of a job: nobody can honestly promise those. What you get is the skill and a project that proves it.
6
What you need first. Basic HTML, CSS and JavaScript: elements, selectors, variables, functions, arrays, objects, loops, import. If any of these feel shaky, Hectal's /html, /css and /javascript courses cover them. Maths beyond school arithmetic is taught when it appears (Phase 2 explains vectors and matrices with pictures you can drag). React is needed only from Phase 11; the /react course covers it.
7
How long it takes. A topic takes about 20–40 minutes of reading and trying. One or two topics a day finishes the course in about three months. Beginners go in order; if you already use three.js, the course home's "build orders" suggest where to jump in.

Explain it without notes

Tell the story of the course in four sentences: where you start, the three.js part, the advanced part, and how it ends.

Why does this course teach plain three.js before React Three Fiber?

Practice

Pick two phases from the route that you think you will find hardest and write one sentence on why. Come back to this answer after you finish them.

Write the one sentence you would put in your portfolio about the finished showroom, using only things this topic says you will be able to do.

Done when you can

Say what each of the four parts of the course teaches
Describe the Lumen showroom you will have at the end
Say what you need to know before starting, and where to learn it if you don't
Find your bike on the course home and see which part each phase adds

Command Palette