What problem does it solve? Implementing mouse picking and object selection in Three.js often leads to performance problems and subtle bugs, such as raycasting on every mousemove event, traversing the entire scene graph, or miscomputing NDC coordinates on non-fullscreen canvases. This Skill provides correct patterns and API references for the Three.js Raycaster so these mistakes are avoided from the start. ## Core Features & Use Cases - Mouse Picking & Hover Detection: Correct NDC conversion, setFromCamera usage, and throttled raycasting inside the render loop. - InstancedMesh Picking: Retrieve instanceId from intersections and update per-instance colors with proper needsUpdate handling. - Layer-Based Filtering & Performance: Use raycaster.layers, flat selectable arrays, and reusable optionalTarget arrays to keep raycasting fast. - Use Case: You are building a 3D product configurator where users click meshes to select parts. This Skill guides you to maintain a flat array of selectable objects, convert mouse coordinates with getBoundingClientRect, and reuse the intersections array each frame. ## Quick Start Ask the AI to implement click-to-select object picking in your Three.js scene using the Raycaster with proper throttling and layer filtering.
