threejs-core-raycaster

Mouse picking in Three.js uses Raycaster to test intersections against a target object set. Configure the Raycaster with origin, direction, near, and far values, then use setFromCamera to cast rays and intersectObjects to detect clickable items.

Three.js raycasting handles InstancedMesh by returning an instanceId in the intersection result. This allows you to identify and select specific instances within the InstancedMesh, enabling accurate per-instance picking without testing individual meshes.

To improve raycaster performance, reuse optionalTarget arrays for intersection results, throttle raycasting calls, restrict tests using layer filtering, and selectively test only interactive objects instead of traversing the entire scene graph.

Yes, you can use raycaster.layers to restrict intersection tests to specific layers. By configuring layers on your Raycaster and objects, you limit tests to interactive objects, avoiding unnecessary traversal and ensuring deterministic hover and click results.

Three.js raycaster returns no intersections when mouse coordinates are not converted to normalized device coordinates, or when the target object set is incorrectly configured. Ensure setFromCamera is called with correct coordinates and intersectObjects receives valid targets.

Recursive traversal in intersectObjects is optional. When enabled, it tests all descendants of the target objects; when disabled, it only tests the objects themselves. Choose based on whether your interactive objects are nested within parent groups.