Agent skill · software engineering · cloudai-x
threejs-interaction
Three.js interaction - raycasting, controls, mouse/touch input, object selection. Use when handling user input, implementing click detection, adding camera controls, or creating interactive 3D experiences.
Why this skill is useful
Provides specific implementation patterns for raycasting and user interaction in Three.js that the AI wouldn't reliably generate on its own.
What it needs
Requires three installed locally. About 7k tokens when loaded. Last updated 2026-07-09. 2,926 stars on the source repository.
What this skill does
Three.js Interaction Quick Start Raycaster Basic Raycasting Mouse Position Conversion Touch Support Raycaster Options Efficient Raycasting Camera Controls OrbitControls FlyControls FirstPersonControls PointerLockControls TrackballControls MapControls TransformControls Gizmo for moving/rotating/scaling objects. DragControls Drag objects directly. Selection System Click to Select Box Selection Hover Effects Keyboard Input World-Screen Coordinate Conversion World to Screen Screen to World Ray-Plane Intersection Event Handling Best Practices Performance Tips 1. Limit raycasts: Throttle mousemove handlers 2. Use layers: Filter raycast targets 3. Simple collision meshes: Use invisible simpler geometry for raycasting 4. Disable controls when not needed: controls.enabled = false 5. Batch updates: Group interaction checks See Also threejs-fundamentals - Camera and scene setup threejs-animation - Animating interactions threejs-shaders - Visual feedback effects
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills cloudai-x/threejs-interaction