How tall is the Canvas?
The Canvas takes its parent's size. A parent with no height gives the browser's default canvas height of 150 px.
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.
THREE.Clock: This module has been deprecated. Please use THREE.Timer instead.
after 20 animation frames, canvas height: {"parent without height":"150 px","parent 100 px tall":"100 px"}