Your first scene: a turning cube
Every line is explained in the steps above. The output comes from the last line.
Fifteen lines make a turning cube: a scene, a camera, a renderer, one mesh and a loop. You change its colour, size and speed, learn what every line does, and learn the five-step checklist for a black screen.
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.
Change the first scene so the cube turns only around its y axis, at one full turn every 4 seconds. One full turn is 2π radians.
Change the first scene to show a sphere instead of a cube, without changing its material. Predict the triangle count, then check the status bar.
Explain it without notes
Name the five things every three.js scene needs, and what each one does, using the puppet-show picture.
A friend's scene shows a black screen and no error. Walk them through the five checks.
Console
Nothing logged yet.Expected console output
objects in the scene: 1