Build: the showroom with its down tube (the same src/main.js)
This is the exact src/main.js below with the page's #app and #fallback elements. Open the scene tree: the stand (with its orange mark inside), the down-tube and the two lights.
The showroom now asks the browser whether it can draw 3D before it builds anything, and shows a message and a still picture when it can't. It also gets its first bike part: the orange down tube, placed with exact numbers.
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 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Make the poster text different for a device that has WebGL 2 turned off in settings (you can't tell this from "no GPU"). Why is one message for both the right call?
Add a second tube to the scene: the top tube, from (−0.10, 0.82, 0) to (0.44, 0.84, 0), radius 0.018. What are its centre and length?
Explain it without notes
Why does main.js ask supportsWebGL2() before it creates a renderer?
Where do the down tube's position (0.235, 0.5, 0) and angle −0.8657 come from?
Console
Nothing logged yet.