A loop that draws only when something changed
The camera is moved by hand at frame 30 of the third case. The count is the number of real render() calls.
Motion can make people ill and distract those who read. Honour the reduced-motion setting, give a pause button to anything that moves for more than five seconds, and stop drawing when nothing changes.
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 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write mayMove for the rule in this topic.
Write the code that reacts when the visitor changes the system setting while the page is open.
Explain it without notes
What does prefers-reduced-motion: reduce tell you, and what should a 3D page change because of it?
Which WCAG rule requires a pause button on a turntable, and what exactly must the button do?
Console
Nothing logged yet.Expected console output
turning frames: 120 draws: 120
paused for 2 s frames: 120 draws: 1
paused, camera moved at frame 30 frames: 120 draws: 1
playing again frames: 120 draws: 120