Add pointer, touch, and selection to Three.js scenes - raycasting for click detection, OrbitControls for camera, and interaction state for hover and drag in 3D experiences.
---
name: threejs-interaction
description: Reference for input and selection in Three.js - raycasting, camera controls, mouse/touch handling, object picking. Use when wiring up click detection, hover/drag state, or interactive 3D scenes.
---
A practical recipe set for making Three.js scenes respond to user input.
## How to use
1. Add camera controls with `OrbitControls` from `three/addons`; set `enableDamping = true` and call `controls.update()` each frame.
2. For picking, create a `THREE.Raycaster` and a `THREE.Vector2`; on a pointer event, convert screen coords to NDC (`x = clientX/innerWidth*2-1`, `y = -(clientY/innerHeight*2-1)`), using `getBoundingClientRect()` for canvases that aren't full-window.
3. Call `raycaster.setFromCamera(mouse, camera)` then `intersectObjects(scene.children, true)`; the first hit gives `point`, `face`, `object`, `uv`, and `instanceId`.
4. Reuse the same flow for touch via `touchstart`/`touchmove`, and track hover/selection state to drive highlights, drag, or transforms.
Full skill & source: https://github.com/CloudAI-X/threejs-skills/tree/b1c623076c661fc9b03dac19292e825a5d106823/skills/threejs-interaction