Render on demand: draw only when something changed
Click the canvas: the box turns a quarter turn and the status bar's frame counter moves by one. While nothing changes it stays still.
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
renders after 10 ticks with no changes: 1
renders after one request: 2