Command Palette

Search for a command to run...

Hectal

Phase 3 · part: Seat tube

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.

Phases 1 and 2 gave you the ideas: how the GPU draws, and the maths of positions and turns. This phase puts them to work in three.js, one piece at a time. You meet the three things every app needs (scene, camera, renderer), the loop that draws about 60 times a second, and the two things that go wrong on real devices: a window that changes size and a phone with a very dense screen.

Then you learn the object that everything in a scene is built from, Object3D, and the tree they form, the scene graph. A parent carries its children: move the bike and its wheels come along, and the wheels still turn on their own. You finish with the everyday debug tools: a live slider panel, axes and grid helpers, and renderer.info.

At the end the showroom's single main.js is split into small modules (renderer, scene, camera, lights, loop), the page follows its container with a ResizeObserver, and the bike gets its third tube, the seat tube.

Phase 3 · the brief from Lumen

Kofi, frontend engineer at Lumen Bikes

“The demo works on my laptop. On Lena's phone it is blurry, then too hot to hold, and when she turns it sideways the bike is squashed.”

Lena, who tests everything on a cheap Android phone, sent three screenshots and one sentence: "It gets warm." The bike was stretched after she rotated the phone. The picture was soft on her tablet. And the phone fan, if it had one, would have been running, because the page drew new frames even when nothing moved.

Kofi opened the code. Everything was in one file: the renderer, the camera, the lights, the loop and a window resize listener that did not know the canvas now lived in a box next to a panel. Nothing was wrong with three.js. Each piece had no clear owner, so nobody had asked what it should do at 120 Hz, in a background tab or in a container that is 0 pixels tall.

At this station

You will learn

  • Set up a scene, camera and renderer, and say what render() really does
  • Write a render loop that moves things at the same speed on 60 Hz and 120 Hz screens
  • Make the canvas follow its container, at a sensible pixel ratio, even when the container has no height
  • Build with Object3D and the scene graph, and look inside it with debug tools

You write code in

In your lumen-3d project (npm run dev) and in the editor on this page

Files you touch

  • index.html
  • src/main.js
  • src/world/renderer.js
  • src/world/scene.js
  • src/world/camera.js
  • src/world/lights.js
  • src/world/loop.js
  • src/objects/showroom.js
  • src/objects/bike.js
Start with 3.1

Work order · 7 steps

  1. 3.1Scene, Camera and RendererEvery three.js app has three parts: a scene that holds things, a camera that decides what is seen, and a renderer that draws it. You learn the renderer's options, what render() sends to the GPU, and the console warnings you will meet. 19 min 2 live scenes
  2. 3.2The Render LoopA loop draws the scene again and again. You learn setAnimationLoop, why motion must use delta time (so 60 Hz and 120 Hz screens agree), what THREE.Timer does instead of the deprecated Clock, how to draw only when something changed, and what a background tab does. 22 min 3 live scenes
  3. 3.3Resize and Pixel RatioA canvas has two sizes (its box on the page and its pixels) and the camera has an aspect ratio. You learn to keep all three in step with a ResizeObserver, to cap the pixel ratio at 2, and to survive a container that is 0 pixels tall. 21 min 3 live scenes
  4. 3.4Object3D and TransformsMeshes, lights, cameras and groups are all Object3Ds with a position, rotation, scale and visibility. You learn add, remove, traverse and getObjectByName, and what happens when an object is hidden, scaled to 0, placed behind the camera or added twice. 18 min 2 live scenes
  5. 3.5The Scene GraphObjects form a tree: a parent carries its children. Move, turn or scale the bike and the wheels follow, while each wheel still spins on its own. You learn how local and world positions relate and how to print the tree. 19 min 2 live scenes
  6. 3.6Debug ToolsSliders, axes, grids and counters let you see a scene instead of guessing. You use lil-gui to tweak values live, axes and grid helpers to read directions, renderer.info to count the GPU's work, and meet the three.js editor, DevTools and Spector.js. 18 min 2 live scenes
  7. 3.7Build: The World ModulesbuildSplit the showroom's single main.js into small modules (renderer, scene, camera, lights, loop), add the stand module and the bike's seat tube, and make the canvas follow its container. 21 min 1 live scene

Quality control · 5 tests

Build it yourself, press Check, and the page tests the scene you made: what is in it, where it sits, what it costs the GPU.

QC-01Spin a cube at half a turn per secondThe cube turns 0.05 radians per frame, so it spins at the speed of your screen. Make it turn at exactly half a turn per second on any screen.BeginnerQC-02Make the canvas follow its boxThe canvas is sized once, to a fixed 200 × 100 pixels. Make it fill the <div id="app">, keep the camera's aspect in step with the box, and cap the pixel ratio at 2.BeginnerQC-03Put the wheels in a bike groupBuild a group named bike placed at x = 1. Inside it add two groups named rear-wheel and front-wheel, positioned (local to the bike) at (−0.55, 0.35, 0) and (0.58, 0.35, 0).BeginnerQC-04Draw only when something changedThis page redraws 60 times a second even though nothing moves. Use a dirty flag so it draws once at the start and again only when you click the canvas.IntermediateQC-05Add the seat tube to the frameA bike group named bike already holds a down tube. Add the seat tube: a CylinderGeometry mesh named seat-tube, radius 0.020, running from the bottom bracket (0, 0.30, 0) to the seat cluster (−0.10, 0.82, 0).Intermediate