The black-screen checklist, as code
This scene shows nothing on purpose. The checklist finds all three planted mistakes.
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
1. canvas on the page with a size: ok
2. render() has been called: PROBLEM: nothing was ever drawn
3. camera outside the object: PROBLEM: the camera is inside the cube
4. light for this material: PROBLEM: MeshStandardMaterial needs a light
5. errors in the console: look above this list