Props, refs and args
The ref logs undefined while rendering, then the real mesh. On frame 3 the width changes, and R3F replaces the geometry.
Inside <Canvas>, each lowercase tag makes a three.js object. Constructor arguments go in args, nested properties use dashes (position-x), a ref gives you the real object, and R3F hooks only work inside the Canvas.
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 JSX for a group named wheelset holding two meshes at x = -0.55 and x = 0.58 (both y = 0.35), using one geometry each.
Make a small error boundary that logs an R3F hook error, and put a hook-using component inside and outside a Canvas to test it.
Explain it without notes
Why can't you read ref.current.geometry in the body of a component?
A scene animates a box's width by changing args every frame. What goes wrong and what should it do instead?
Console
Nothing logged yet.Expected console output
THREE.Clock: This module has been deprecated. Please use THREE.Timer instead.
while rendering, the ref is undefined
Mesh "ball" | position.x -1.5 | material MeshNormalMaterial
geometry: SphereGeometry radius 0.5
same geometry object after the change: false | width now 2