A helper with a second render loop
Three Canvases, so three Clock warnings. Counts are over 30 animation frames.
drei is a shelf of ready-made R3F parts: controls, environments, shadows, HTML labels, loaders. Each one is plain three.js underneath. Know what each adds to the scene, because some quietly add work to every frame.
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.
Write the JSX to orbit around a crate with a floor shadow that is drawn once, using your own HDR file.
Predict the gl.render count after 30 frames for a scene with <ContactShadows frames={2} />, then check.
Explain it without notes
A scene runs at 60 fps; after adding <ContactShadows> it drops to 40. What do you check and what do you change?
Why might <Environment preset="sunset"> be a bad idea for production?
Console
Nothing logged yet.Expected console output
THREE.Clock: This module has been deprecated. Please use THREE.Timer instead.
THREE.Clock: This module has been deprecated. Please use THREE.Timer instead.
THREE.Clock: This module has been deprecated. Please use THREE.Timer instead.
plain scene: gl.render was called 30 times in 30 animation frames
with <ContactShadows>: gl.render was called 180 times in 30 animation frames
with <ContactShadows frames={1}>: gl.render was called 35 times in 30 animation frames