/threejs

name: threejs
description: Three.js 3D graphics library - scene setup, geometry, materials, lighting, textures, animation, loaders, shaders, postprocessing, interaction. Use when building 3D web experiences, creating WebGL visualizations, working with GLTF models, implementing custom shaders, or adding interactive 3D elements to web applications.
metadata:
  version: "1.0.0"
license: MIT

Three.js Skills

Overview

Comprehensive knowledge base for building 3D web experiences with Three.js. This skill provides accurate API references, best practices, and working code examples across all major Three.js domains.

**Three.js version**: r160+ (January 2024)

Quick Reference

Core Topics

This skill covers 10 essential Three.js domains:

1. **Fundamentals** - Scene setup, cameras, renderer, Object3D hierarchy 2. **Geometry** - Built-in shapes, BufferGeometry, custom geometry, instancing 3. **Materials** - PBR materials, shader materials, material properties 4. **Lighting** - Light types, shadows, environment lighting 5. **Textures** - UV mapping, environment maps, render targets 6. **Animation** - Keyframe animation, skeletal animation, animation mixing 7. **Loaders** - GLTF/GLB loading, async patterns, caching 8. **Shaders** - GLSL basics, ShaderMaterial, custom effects 9. **Postprocessing** - EffectComposer, bloom, DOF, custom passes 10. **Interaction** - Raycasting, camera controls, mouse/touch input

When to Load References

Load detailed reference files based on your current task:

• **Basic scene setup, cameras, renderer** → Load `references/threejs-fundamentals.md`
• **Creating shapes, custom geometry, instancing** → Load `references/threejs-geometry.md`
• **Material properties, PBR, shader materials** → Load `references/threejs-materials.md`
• **Adding lights, configuring shadows** → Load `references/threejs-lighting.md`
• **Texture loading, UV mapping, environment maps** → Load `references/threejs-textures.md`
• **Animating objects, GLTF animations, mixing** → Load `references/threejs-animation.md`
• **Loading GLTF/GLB models, Draco compression** → Load `references/threejs-loaders.md`
• **Writing GLSL shaders, custom visual effects** → Load `references/threejs-shaders.md`
• **Adding bloom, depth of field, screen effects** → Load `references/threejs-postprocessing.md`
• **Raycasting, mouse picking, camera controls** → Load `references/threejs-interaction.md`

Quick Start Examples

1. Fundamentals: Basic Scene

import * as THREE from 'three';

// 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({ antialias: true });

renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
document.body.appendChild(renderer.domElement);

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

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

camera.position.z = 5;

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

// Responsive
window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});

2. Geometry: Creating Shapes

// Built-in geometries
const box = new THREE.BoxGeometry(1, 1, 1);
const sphere = new THREE.SphereGeometry(0.5, 32, 32);
const plane = new THREE.PlaneGeometry(10, 10);

// Custom BufferGeometry
const geometry = new THREE.BufferGeometry();
const vertices = new Float32Array([
  -1, -1,  0,  // vertex 0
   1, -1,  0,  // vertex 1
   1,  1,  0,  // vertex 2
  -1,  1,  0   // vertex 3
]);
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));

// Indices for triangles
const indices = new Uint16Array([0, 1, 2, 0, 2, 3]);
geometry.setIndex(new THREE.BufferAttribute(indices, 1));

// Instancing for many copies
const count = 1000;
const instancedMesh = new THREE.InstancedMesh(geometry, material, count);
const dummy = new THREE.Object3D();

for (let i = 0; i < count; i++) {
  dummy.position.set(
    (Math.random() - 0.5) * 20,
    (Math.random() - 0.5) * 20,
    (Math.random() - 0.5) * 20
  );
  dummy.updateMatrix();
  instancedMesh.setMatrixAt(i, dummy.matrix);
}
scene.add(instancedMesh);

3. Materials: PBR Materials

// Standard PBR material
const material = new THREE.MeshStandardMaterial({
  color: 0xffffff,
  metalness: 0.5,
  roughness: 0.5,
  map: colorTexture,
  normalMap: normalTexture,
  roughnessMap: roughnessTexture,
  metalnessMap: metalnessTexture,
  envMap: environmentMap,
  envMapIntensity: 1
});

// Physical material (advanced PBR)
const glassMaterial = new THREE.MeshPhysicalMaterial({
  color: 0xffffff,
  metalness: 0,
  roughness: 0,
  transmission: 1,     // Glass transparency
  thickness: 0.5,
  ior: 1.5,           // Index of refraction
  envMapIntensity: 1
});

// Shader material (custom)
const shaderMaterial = new THREE.ShaderMaterial({
  uniforms: {
    time: { value: 0 },
    color: { value: new THREE.Color(0xff0000) }
  },
  vertexShader: `
    varying vec2 vUv;
    void main() {
      vUv = uv;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  `,
  fragmentShader: `
    uniform float time;
    uniform vec3 color;
    varying vec2 vUv;

    void main() {
      gl_FragColor = vec4(color * sin(vUv.x * 10.0 + time), 1.0);
    }
  `
});

4. Lighting: Basic Lighting

// Ambient light (uniform ev