SKILL.md

threejs-interaction

Agent skill fromCloudAI-X/threejs-skills

Picking with raycasting, camera controls, transform gizmos, drag, hover and box selection for three.js, identical under WebGL and WebGPU. Use when handling mouse, touch or keyboard input, detecting clicks on 3D objects, adding camera controls, or making scene objects interactive.

install threejs-interaction

# install the threejs-skills pack with the skills CLI

npx skills add CloudAI-X/threejs-skills

# or add only this skill to Claude Code: copy the folder

skills/threejs-interaction/

# into

~/.claude/skills/threejs-interaction/ (all projects)

.claude/skills/threejs-interaction/ (one project)

skills/threejs-interaction/SKILL.md

MITFull file

1# Three.js Interaction
2 
3Targets three.js r186. Examples use WebGLRenderer; the WebGPU and TSL section uses WebGPURenderer.
4 
5## Quick Start
6 
7```javascript
8import * as THREE from "three";
9import { OrbitControls } from "three/addons/controls/OrbitControls.js";
10 
11const renderer = new THREE.WebGLRenderer({ antialias: true });
12renderer.setPixelRatio(window.devicePixelRatio);
13renderer.setSize(window.innerWidth, window.innerHeight);
14document.body.appendChild(renderer.domElement);
15 
16const scene = new THREE.Scene();
17scene.background = new THREE.Color(0x111318);
18 
19const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100);
20camera.position.set(0, 1.5, 5);
21 
22const mesh = new THREE.Mesh(
23  new THREE.BoxGeometry(1, 1, 1),
24  new THREE.MeshStandardMaterial({ color: 0x3a86ff }),
25);
26scene.add(mesh);
27const light = new THREE.DirectionalLight(0xffffff, 2);
28light.position.set(3, 5, 4);
29scene.add(light, new THREE.AmbientLight(0xffffff, 0.4));
30 
31const controls = new OrbitControls(camera, renderer.domElement); // connects itself
32controls.enableDamping = true; // requires controls.update() every frame
33 
34const timer = new THREE.Timer();
35timer.connect(document); // freezes the delta while the tab is hidden
36 
37const raycaster = new THREE.Raycaster();
38const pointer = new THREE.Vector2();
39 
40function setPointer(event) {
41  // NDC coordinates relative to the canvas, so the page can scroll or embed it
42  const rect = renderer.domElement.getBoundingClientRect();
43  pointer.set(
44…

Excerpt shown under the repository's MIT license.

How to install threejs-interaction

skills/threejs-interaction/SKILL.md

More skills in threejs-skills

Newsletter

Join the Community