A click that hits two meshes
Two clicks at the same point. In the second, the crate stops the event.
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.
click 1, nothing stops it:
crate clicked, distance 2.50 | hits under the pointer: 2
wall clicked, distance 5.00
click 2, the crate calls stopPropagation():
crate clicked, distance 2.50 | hits under the pointer: 2