Build: the frame tubes (the same bike.js and main.js)
This is src/objects/bike.js and src/main.js from the files below, joined into one example (local imports cannot run in the preview). The two console lines are the tubes' real centres and lengths. Open the scene tree: the bike group holds down-tube and top-tube.
Write tubeBetween(from, to, radius, name), a function that puts a cylinder exactly between two points, and use it to place the Lumen bike's down tube and top tube. The showroom gets a real frame, and the numbers come from vectors, not from guessing.
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.
Use tubeBetween to add the seat tube from the bottom bracket (0, 0.3, 0) to the seat cluster (−0.1, 0.82, 0), radius 0.02, named "seat-tube". Predict its length.
Add a guard to tubeBetween that throws a clear error when the two points are closer than a micrometre.
Explain it without notes
Walk through how tubeBetween turns two points into a positioned, aimed cylinder. Which Phase 2 idea does each step use?
What does createBike() add to the scene, and why is it a Group?
Console
Nothing logged yet.Expected console output
down-tube at 0.235, 0.500, 0.000, length 0.6172
top-tube at 0.170, 0.830, 0.000, length 0.5404