The keyboard twin
Arrow keys or A and D turn the box (click the canvas area first if the page does not have focus). The log is printed when left changes.
Meshes take onClick and onPointerOver props. R3F raycasts for you and calls the handler of every object under the pointer, nearest first, until one calls stopPropagation(). Keyboard input comes from drei's KeyboardControls.
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 a mesh that turns pink on hover and back to orange when the pointer leaves, using a ref and no state.
Map Space to pause with KeyboardControls and read it inside useFrame to stop a rotation.
Explain it without notes
A customer clicks the saddle and the frame behind it also reacts. Why, and how do you stop it?
A customer orbits the bike by dragging, and the part under the pointer gets selected when they let go. Why, and what is the fix?
Console
Nothing logged yet.Expected console output
THREE.Clock: This module has been deprecated. Please use THREE.Timer instead.
left is now true | turned anticlockwise so far: false
left is now false | turned anticlockwise so far: true