Three.js interaction - raycasting, controls, mouse/touch input, object selection. Use when handling user input, implementing click detection, adding camera…
Mouse and touch input handling, raycasting, camera controls, and object selection for Three.js scenes.
Supports five camera control types: OrbitControls (orbit around target), FlyControls (free flight), FirstPersonControls (WASD movement), PointerLockControls (locked pointer FPS), and MapControls (2D map-style panning)
Raycasting enables click detection, hover effects, and object selection with detailed intersection data including distance, UV coordinates, and face information
Includes TransformControls for interactive gizmos (translate/rotate/scale), DragControls for direct object dragging, and SelectionBox for multi-object selection
Provides coordinate conversion utilities between world and screen space, ray-plane intersection, and keyboard input handling with throttling and layer-based filtering for performance
Three.js Interaction
Quick Start
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
// Camera controls
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
// Raycasting for click detection
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;don't have the plugin yet? install it then click "run inline in claude" again.