Three.js Raycast Interaction

What this builds

A production interaction system that translates 2D pointer events (mouse, touch, pen) into 3D object picking, hover/active state management, and cursor feedback. The finished system handles pointer normalization, efficient raycasting against a managed set of interactive objects, hover enter/leave lifecycle, click/drag, InstancedMesh instance picking, and DOM cursor synchronization.

• Pointer event normalization (mouse, touch, pen) to NDC coordinates
• Raycaster with configurable layers and distance thresholds
• Hover state machine: idle -> hovered -> active, with enter/leave callbacks
• Click and drag with deadzone detection
• InstancedMesh instance-level picking via intersection.instanceId
• Hit-area design: invisible enlarged collider meshes for small/thin objects
• Cursor state sync (pointer, grab, grabbing) to DOM
• Full cleanup of event listeners and state on teardown