Three.js 3D

Quick Start

import * as THREE from 'three';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, innerWidth/innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
scene.add(new THREE.Mesh(
  new THREE.BoxGeometry(1,1,1),
  new THREE.MeshStandardMaterial({color: 0x44aa88})
));
scene.add(new THREE.DirectionalLight(0xffffff, 3));
scene.add(new THREE.AmbientLight(0x404040, 0.5));
camera.position.z = 5;
function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); }
animate();

Import

npm install three

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

Key Patterns

Object3D (everything extends this)

obj.position.set(x,y,z); obj.rotation.set(x,y,z); obj.scale.set(x,y,z); // Euler rad
obj.quaternion.set(x,y,z,w);       // No gimbal lock
obj.lookAt(target);                // -Z → target, +Y up
parent.add(child); parent.remove(child); parent.attach(child); // Reparent w/o visual change
obj.getWorldPosition(v); obj.localToWorld(v); obj.worldToLocal(v);

Color

new THREE.Color(0xff0000); new THREE.Color('#ff0000'); new THREE.Color(1,0,0);
color.setHSL(hue, saturation, lightness); // 0–1

Dispose (always!)

geometry.dispose(); material.dispose(); texture.dispose(); renderTarget.dispose();

Reference Files

Read the relevant file based on the task — each is concise and domain-focused: