Three.js Interaction

Work Pattern

• Convert pointer coordinates relative to the renderer canvas, not always the full window, unless the canvas truly fills the viewport.
• Keep controls updated in the animation loop when damping or time-based movement is enabled.
• Separate hover, selection, drag, transform, and keyboard state so tool modes do not fight each other.
• Pair with threejs-fundamentals for camera/canvas setup, threejs-animation for state feedback, and threejs-postprocessing for outlines or selection highlights.

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;