frameloop demand and invalidate()
The Canvas draws when asked. Delta is the time since the last drawn frame, so it can be large after a pause.
Animate through refs inside useFrame, not through setState: a state change re-renders the component every frame. Use delta for speed, invalidate with frameloop="demand" to draw only when needed, and zustand for shared state.
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.
Turn a mesh at 90 degrees per second using delta, with no state. How far has it turned after 2 seconds?
A store holds { color: "#ff6b2c" }. Write a component that reads it as state for a button, and a useFrame that reads it without re-rendering.
Explain it without notes
What is wrong with useFrame(() => setAngle((a) => a + 0.01)), and what replaces it?
When would you choose frameloop="demand", and what do you need to remember to do?
Console
Nothing logged yet.Expected console output
THREE.Clock: This module has been deprecated. Please use THREE.Timer instead.
30 animation frames passed, frames drawn: 1
after 3 invalidate() calls, frames drawn: 4