Three.js Development

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

When to Use This Skill

Use when working with:

• 3D scenes, models, animations, or visualizations

• WebGL/WebGPU rendering and graphics programming

• Interactive 3D experiences (games, configurators, data viz)

• Camera controls, lighting, materials, or shaders

• Loading 3D assets (GLTF, FBX, OBJ) or textures

• Post-processing effects (bloom, depth of field, SSAO)

• Physics simulations, VR/XR experiences, or spatial audio

• Performance optimization (instancing, LOD, frustum culling)

Progressive Learning Path

Level 1: Getting Started

Load references/01-getting-started.md

• Scene setup, basic geometries, materials, lights, rendering loop

Level 2: Common Tasks

• Asset Loading: references/02-loaders.md

• GLTF, FBX, OBJ, texture loaders

• Textures: references/03-textures.md

• Types, mapping, wrapping, filtering

• Cameras: references/04-cameras.md

• Perspective, orthographic, controls

• Lights: references/05-lights.md

• Types, shadows, helpers

• Animations: references/06-animations.md

• Clips, mixer, keyframes

• Math: references/07-math.md

• Vectors, matrices, quaternions, curves

Level 3: Interactive & Effects

• Interaction: references/08-interaction.md

• Raycasting, picking, transforms

• Post-Processing: references/09-postprocessing.md

• Passes, bloom, SSAO, SSR

• Controls (Addons): references/10-controls.md

• Orbit, transform, first-person

Level 4: Advanced Rendering

• Materials Advanced: references/11-materials-advanced.md

• PBR, custom shaders

• Performance: references/12-performance.md

• Instancing, LOD, batching, culling

• Node Materials (TSL): references/13-node-materials.md

• Shader graphs, compute

Level 5: Specialized

• Physics: references/14-physics-vr.md

• Ammo, Rapier, Jolt, VR/XR

• Advanced Loaders: references/15-specialized-loaders.md

• SVG, VRML, domain-specific

• WebGPU: 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