Per frame or per second: three screens, a slow frame and a hidden tab
No canvas here: the example feeds made-up times to the same Timer maths. The hidden tab is faked with the document's hidden property.
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
30 Hz 30 frames | per frame: 1.50 m | per second: 3.00 m
60 Hz 60 frames | per frame: 3.00 m | per second: 3.00 m
120 Hz 120 frames | per frame: 6.00 m | per second: 3.00 m
a normal 60 Hz frame: 0.0167
a frame that took 100 ms: 0.1000
plain Timer, back after 5 s: 5.0000 seconds in one step
connected Timer, tab hidden: 0.0000 seconds in one step
connected Timer, tab visible again, small step: true