r3f-learning-01

LESSON 06

Pointer Events

R3F wires the renderer's raycaster into JSX-shaped events: onPointerOver, onPointerOut, onClick. Hover swaps emissive and scales up; click toggles a selected state. Use e.stopPropagation() so events fire on the front-most mesh only.

Cursor swaps are a side-effect of the hover handler — set document.body.style.cursor in the handler and reset it in onPointerOut (and on unmount). Keep state local to each interactive mesh; lifting it to a parent forces the whole subtree to re-render on every hover.