A wheel that turns half a turn per second
The status bar stays at 2 draw calls (tyre and spoke). The speed does not change with the frame rate.
A loop draws the scene again and again. You learn setAnimationLoop, why motion must use delta time (so 60 Hz and 120 Hz screens agree), what THREE.Timer does instead of the deprecated Clock, how to draw only when something changed, and what a background tab does.
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 render-on-demand example also redraw when the window is resized. Which lines do you add?
Make a loop that never lets one frame advance the animation by more than 50 ms.
Explain it without notes
Why must movement be multiplied by delta time? Give a number for 60 Hz and 120 Hz.
What does timer.connect(document) fix, and what would go wrong without it?
Console
Nothing logged yet.Expected console output
speed: 0.5 turns per second = 3.1416 radians per second
first frame drawn, delta is a number: true