Threejs Interaction

Handles the interactive parts of Three.js that make scenes feel alive: raycasting for click detection, camera controls like OrbitControls and PointerLockControls, and proper mouse/touch coordinate conversion. You'll reach for this when adding object selection, implementing camera movement, or setting up any kind of user input in 3D. The raycaster examples are solid, covering everything from basic picking to efficient filtering with layers. The controls section is comprehensive, showing setup for orbit, fly, first-person, and transform gizmos. One thing to note: the PointerLockControls example has incomplete movement code, but the patterns are clear enough to build on.

skills.sh installs: 18K
GitHub stars: 4.1K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add cloudai-x/threejs-skills --skill threejs-interaction --agent claude-code

Installs into .claude/skills of the current project.

Files

Three.js Interaction

Targets three.js r186. Examples use WebGLRenderer; the WebGPU and TSL section uses WebGPURenderer.

Quick Start

import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x111318);

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100);
camera.position.set(0, 1.5, 5);

const mesh = new THREE.Mesh(
  new THREE.BoxGeometry(1, 1, 1),
  new THREE.MeshStandardMaterial({ color: 0x3a86ff }),
);
scene.add(mesh);
const light = new THREE.DirectionalLight(0xffffff, 2);
light.position.set(3, 5, 4);
scene.add(light, new THREE.AmbientLight(0xffffff, 0.4));

const controls = new OrbitControls(camera, renderer.domElement); // connects itself
controls.enableDamping = true; // requires controls.update() every frame

SKILL.md on GitHub