Re-render 60 times, or once
Same picture, very different work. The counts are printed on frame 60: SlowSpinner renders on every frame.
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.
after 60 frames: SlowSpinner rendered 60 times, FastSpinner rendered 1