Three.js Development

Build high-performance 3D web applications using Three.js — cross-browser WebGL/WebGPU library.

Scope: vanilla Three.js only. If you're using React Three Fiber, use the sibling skill r3f (covers R3F v9 + drei v10, Canvas, hooks, JSX system).

References

Fundamentals

• references/01-getting-started.md — Scene setup, basic geometries, materials, lights, render loop
• references/04-cameras.md — Perspective, orthographic, controls
• references/05-lights.md — Types, shadows, helpers
• references/07-math.md — Vectors, matrices, quaternions, curves

Assets & Content

• references/02-loaders.md — GLTF, FBX, OBJ, texture loaders
• references/03-textures.md — Types, mapping, wrapping, filtering
• references/06-animations.md — Clips, mixer, keyframes
• references/15-specialized-loaders.md — SVG, VRML, domain-specific

Interaction & Effects

• references/08-interaction.md — Raycasting, picking, transforms
• references/09-postprocessing.md — Passes, bloom, SSAO, SSR
• references/10-controls.md — Orbit, transform, first-person

Advanced Rendering

• references/11-materials-advanced.md — PBR, custom shaders
• references/12-performance.md — Instancing, LOD, batching, culling
• references/13-node-materials.md — Shader graphs, compute (TSL)

Specialized

• references/14-physics-vr.md — Ammo, Rapier, Jolt, VR/XR
• references/16-webgpu.md — Modern backend, compute shaders

Quick Start Pattern

// 1. Scene, Camera, Renderer
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 2. Add Objects
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 3. Add Lights
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 5, 5);
scene.add(light);
scene.add(new THREE.AmbientLight(0x404040));

// 4. Animation Loop
function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

External Resources

• Official Docs: https://threejs.org/docs/
• Examples: https://threejs.org/examples/
• Editor: https://threejs.org/editor/
• Discord: https://discord.gg/56GBJwAnUS