threejs-interaction

name	threejs-interaction
description	Three.js interaction - raycasting, controls, mouse/touch input, object selection. Use when handling user input, implementing click detection, adding camera controls, or creating interactive 3D experiences.
type	skill
created	2026-02-27T00:00:00.000Z
domain	design-creative
category	3d-animation
risk	unknown
source	community
tags	["skill","design-creative","3d-animation","threejs","interaction"]

Three.js Interaction

When to Use

• You need user interaction inside a Three.js scene.
• The task involves raycasting, object picking, pointer handling, touch input, or camera controls.
• You are building an interactive 3D experience rather than a passive render.

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;

  raycaster.setFromCamera(mouse, camera);
  const intersects = raycaster.intersectObjects(scene.);

   (intersects. > ) {
    .(, intersects[].);
  }
}

.(, onClick);