Command Palette

Search for a command to run...

Hectal
Back to the lesson: Topic 0.3 — Your First Scene on This Page
3D Web · Example 2 of 3

Three knobs: colour, size, speed

Change the three constants at the top. MeshStandardMaterial reacts to light, so this scene has two lights.

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.

01

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.

02

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

01

Name the five things every three.js scene needs, and what each one does, using the puppet-show picture.

02

A friend's scene shows a black screen and no error. Walk them through the five checks.

Three knobs: colour, size, speed
Press Run to see the page.
idle

Console

Nothing logged yet.

Expected console output

cube colour: #ff6b2c
cube size: 1 × 1 × 1