Implement Interactive Three.js 3D Experiences

This skill covers building interactive Three.js experiences - raycasting, object picking, pointer/touch handling, and camera controls - as opposed to passive rendering. Raycaster coverage includes setting up rays from the camera (mouse picking) or an arbitrary origin/direction, reading the full intersection result object (distance, world-space point, face, UV coordinates, interpolated normal, and instanceId for InstancedMesh hits), converting mouse coordinates to normalized device coordinates for both full-window and specific-canvas contexts, touch-event picking via touchstart, raycaster options (near/far clipping, Line/Points intersection threshold, layer-based filtering), and efficiency techniques (checking only specific clickable objects, using layers to filter, throttling raycasts during mousemove to ~20fps for hover effects). Camera controls cover seven distinct control schemes from the examples/addons: OrbitControls (damping, polar/azimuth rotation limits, zoom distance limits, auto-rotate, target point, and r183's new programmatic dolly/pan/rotate methods and configurable cursor styles), FlyControls (movement/roll speed, drag-to-look), FirstPersonControls (movement/look speed with vertical constraints), PointerLockControls (pointer lock on click with WASD-style movement and velocity/friction), TrackballControls (free rotation without pole constraints), MapControls (screen-space panning disabled, restricted polar angle for map-like navigation), TransformControls (a gizmo for translate/rotate/scale with mode-switching keyboard shortcuts and a dragging-changed event to disable orbit controls mid-drag), and DragControls (direct object dragging with dragstart/drag/dragend events, e.g. constraining Y position to a ground plane). Selection systems cover click-to-select with emissive highlight toggling, box/marquee selection via SelectionBox/SelectionHelper for multi-object rectangular selection, and hover effects that swap color and cursor style while restoring the original color on hover-out (cached via userData). It covers raw keyboard input handling via a keys-pressed state object polled in the update loop, world-to-screen coordinate conversion (projecting a 3D position to overlay an HTML element on top of a 3D object) and screen-to-world conversion (unprojecting a screen point at a target depth), and ray-plane intersection for placing objects on a ground plane from a mouse position. A complete InteractionManager class example demonstrates production event-handling structure: binding click/mousemove/touchstart listeners, converting mouse coordinates relative to the canvas bounding rect, running raycasts against a managed clickables list, and dispatching to per-object userData.onClick callbacks. Performance tips: throttle raycasts on mousemove, use layers to filter raycast targets, substitute simple invisible collision meshes for complex loaded models during raycasting, disable controls when not needed, and batch interaction checks.

Use it when you need user interaction inside a Three.js scene - raycasting, object picking, pointer/touch handling, or camera controls - for an interactive 3D experience rather than a passive render. It cross-references companion skills for camera/scene fundamentals, animating the results of interactions, and shader-based visual feedback effects, which are out of its own scope.

Inputs: the target Three.js scene/objects and the interaction type needed (click picking, hover, drag, camera navigation, or keyboard/touch input).
Outputs: working Three.js JavaScript code for the requested interaction pattern - raycasting and picking logic, a configured camera control scheme, a selection/hover system, or coordinate-conversion helpers.

const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();

function onClick(event) {
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  raycaster.setFromCamera(mouse, camera);
  const intersects = raycaster.intersectObjects(scene.children);
  if (intersects.length > 0) console.log("Clicked:", intersects[0].object);
}

Three.js developers building interactive 3D scenes - object picking, drag/transform gizmos, camera navigation, or selection systems - who need correct raycasting and control-scheme setup.