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/00-fundamentals.md - Fundamentals
• 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
• Geometry: references/18-geometry.md - Built-in shapes, BufferGeometry, custom geometry, instancing
• Materials: references/11-materials.md - PBR, basic, phong, lambert, physical, toon, normal, depth, raw, shader materials, material properties

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