Three.js Interaction

Iron Law

Always call raycaster.setFromCamera() with normalized device coordinates in range [-1, 1] — raw pixel coordinates produce silent miss-hits on all objects.

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();