About threejs-interaction
threejs-interaction is a skill for implementing picking and controls in Three.js projects. It focuses on reliable pointer and touch interactions, coordinate handling, selection state, and verification across complex scenes.
Key features
- 01Pointer and touch interaction guidance
- 02Viewport-aware coordinate conversion
- 03Raycasting and selection handling
- 04Drag and control coordination
- 05Interaction verification checklist
Use cases
- 01Add object picking to a Three.js scene
- 02Implement dragging with transform controls
- 03Support selection in scissored views
- 04Check touch and keyboard interaction behavior
Install
Copy the command and run it in a terminal.
npx skills add https:/After installing, type/threejs-interactionin Claude Code to confirm it loaded.
Details
From the project READMEPicking and Controls
Use the project's installed versions and existing architecture. These instructions supplement the user's task; they do not authorize unrelated changes or external actions.
Choose controls based on the task and preserve ordinary page scrolling outside the interactive area. Define pointer, touch, keyboard, and HTML equivalents for important actions. Keep selection in application state keyed by stable IDs rather than temporary mesh indices alone.
Convert client coordinates using the actual event viewport rectangle: x = 2 * (clientX - left) / width - 1; y = 1 - 2 * (clientY - top) / height. For scissored views use that view's rectangle. Ignore zero-sized views. Raycast only relevant roots/layers and account for descendants, instance IDs, and front/back-face behavior.
Distinguish a click from a drag using travel thresholds. Use pointer capture when dragging beyond the canvas; handle pointercancel and lost capture. Temporarily suspend orbit controls while object manipulation owns the gesture, then restore them on every exit path.
For drag planes and transform gizmos, convert world results into the object's parent space. Scale constraints and hit tolerances to the use case. Visible shader deformation may not match CPU raycasting; use proxy geometry or another picking method when needed.
Throttle expensive hover work to rendered frames, reuse allocations, and dispose controls/listeners. Verify an offset canvas, touch cancellation, nested transforms, occlusion, keyboard selection, and selecting an instance after list updates.
API reference
Consult the official documentation for exact signatures and revision-specific behavior. If documentation access is unavailable, inspect installed types/source and state any remaining uncertainty.