Command Palette

Search for a command to run...

Hectal
Back to the lesson: Topic 6.7 — Build: The Front Wheel
3D Web · Example 1 of 1

Build: the showroom after Phase 6 (changed files in one example)

Local imports cannot run in the preview, so the changed files (scene.js, bike.js and a shortened main.js) are inline, each under a comment with its path; the renderer, camera, lights and stand are the Phase 3 versions shortened. Your project's lights.js has Phase 5's shadows, so your draw-call count is higher.

Add the front wheel to the bike: a tyre with a real tread (a colour map and a normal map, tiled 30 times round), a rim, a hub and spokes. Then give the showroom a studio environment so the metal shines.

Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.

Ready for more? This phase has 4 hands-on exercises with automatic checks.

Practice questions

Write the code in the editor, run it, then open the model answer to compare.

01

Add the rear wheel to createBike() using the existing helpers. Which line changes, and what name does it get?

02

How would you share one tyre material between two wheels, and what is the saving?

Explain it without notes

01

Why does createBike() not await the textures?

02

Why does the build use a try / catch with RoomEnvironment instead of letting a failed HDR stop the app?

Build: the showroom after Phase 6 (changed files in one example)
Press Run to see the page.
idle

Console

Nothing logged yet.

Expected console output

front wheel at: 0.58, 0.35, 0 | tyre map repeat: 30, 2
colour map: srgb | normal map: ""
environment set: true | textures in GPU memory: 4
draw calls: 18 | triangles: 5104