The finished showroom and its launch check
Every project file joined into one (local imports can't run in the preview); boot.js is left out because it only waits and then loads main.js. The badge is on the down tube, below the handlebar. Each check line must say PASS.
The showroom gets its last part, the Lumen badge, then goes through a launch check: a budget, a priced part list, a text alternative, a fallback picture, named buttons. The same checks live on as the project's own tests, and a README records what you measured, for your portfolio.
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.
Add a test that fails if any part's material is transparent but has no alphaTest, which can cause sorting problems (transparent, Topic 5.1).
The launch check shows 48 of 50 geometries. Before a 20th part, how do you make room without raising the limit?
Explain it without notes
Walk an interviewer through your showroom in two minutes: what it does, how it loads, what you measured, and what you would do next.
Which of the launch checks belong in unit tests, which need a real browser, and which need a person?
Why does the badge use a CanvasTexture instead of an image file, and what does that cost?
Console
Nothing logged yet.Expected console output
backend: WebGL 2
PASS budget: 11032 triangles, 46 draw calls, 21 textures, 48 geometries (limits 70, 30000, 24, 50)
PASS parts: 19, every one priced
PASS text alternative names 19 parts
PASS the fallback picture has alt text
PASS all 33 buttons have a name
PASS the canvas takes focus and the pause button is shown