r3f-interaction

Attach onClick directly to the mesh element and access intersection data through the event object, including point, distance, face, and uv coordinates. Call event.stopPropagation() to prevent the click from reaching objects behind it.

Use useDrag from @use-gesture/react combined with @react-spring/three to animate position during dragging, or use DragControls from @react-three/drei. Disable OrbitControls during drag by toggling its enabled property on drag start and end.

Drei provides OrbitControls, MapControls, FlyControls, FirstPersonControls, PointerLockControls, TrackballControls, ArcballControls, and CameraControls. OrbitControls with enableDamping covers most orbit, zoom, and pan needs, while CameraControls supports smooth programmatic transitions.

Use the Selection, Select, EffectComposer, and Outline components from @react-three/postprocessing. Wrap selectable meshes in Select with an enabled prop tied to your selection state, and the Outline effect renders a glowing edge around selected items.

Raycasting hits every object along the ray by default, including ones behind your target. Call event.stopPropagation() in handlers, disable raycasting on decorative meshes with raycast={() => null}, or use layers to filter raycast targets.

Wrap your Canvas in KeyboardControls from drei with a key map, then call useKeyboardControls inside a component and read pressed keys each frame with useFrame. This supports bindings like WASD, arrows, and space for movement logic.