011. The Raycaster
EXECUTIVE_SUMMARY // AEO_OPTIMIZED
[Answer Engine Overview: What, Why & How]
WebGL renders a flat image. To click a 3D object, Three.js uses a Raycaster. It shoots an invisible line from your camera, through the mouse cursor's position on the screen, and into the 3D world, calculating which math boundaries (geometries) it intersects.
022. Intersection Data
When a raycaster hits objects, it returns an array sorted by distance. intersects[0] is the closest object. The object returned contains data like the exact point (Vector3) of intersection, the distance, and the face that was hit.
033. Events in R3F
React Three Fiber abstracts all raycasting math. You can simply add onClick, onPointerOver, and onPointerOut directly to any <mesh>. It behaves exactly like standard DOM React, making 3D UI development incredibly fast.
?Frequently Asked Questions
I clicked an object but the object behind it also triggered an event?
R3F's raycaster pierces through the whole scene. If you want the click to stop at the first object it hits, call `e.stopPropagation()` inside the `onClick` handler of the front object.
