threejs-interaction

SKILL.md

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;