Comprehensive skill for Three.js 3D web development. Use this skill when building interactive 3D scenes, WebGL/WebGPU applications, product configurators, 3D visualizations, or immersive web experiences. Triggers on tasks involving Three.js, 3D rendering, scenes, cameras, meshes, materials, lights,

Three.js WebGL/WebGPU Development Overview Three.js is the industry standard JavaScript library for creating 3D graphics in web browsers using WebGL and WebGPU. This skill provides comprehensive guidance for building performant, interactive 3D experiences including scenes, cameras, renderers, geometries, materials, lights, textures, and animations. Core Concepts Scene Graph Architecture Three.js uses a hierarchical scene graph where all 3D objects are organized in a tree structure: Essential Components Every Three.js application requires these core elements: 1. Scene : Container for all 3D objects 2. Camera : Defines the viewing perspective 3. Renderer : Draws the scene to canvas (WebGL or WebGPU) 4. Geometry : Defines the shape of objects 5. Material : Defines the surface appearance 6. Mesh : Combines geometry and material Quick Start Pattern Basic Scene Setup WebGPU Setup (Modern Alternative) Common Patterns 1. Creating Meshes with Materials 2. Lighting Strategies 3. Instanced Geometry (Performance) 4. Loading 3D Models (glTF) 5. Shadow Configuration 6. Raycasting (Interaction) Integration Patterns With GSAP for Animation With React (see react three fiber skill) With Post Processing Performance Optimization 1. Geometry Reuse 2. Use InstancedMesh for Repeated Objects For hundreds/thousands of identical objects, use InstancedMesh (see pattern above). 3. Texture Optimization 4. Level of Detail (LOD) 5. Frustum Culling Three.js automatically culls objects outside the camera's view. Ensure objects have correct bounding spheres: 6. Dispose Resources Best Practices 1. Use Animation Clocks for Consistent Timing 2. Camera Setup Guidelines FOV : 45 75° for most applications Near plane : As far as possible (avoid z fighting) Far plane : As close as possible (precision) Aspect ratio : Always match canvas dimensions 3. Material Selection MeshBasicMaterial : Unlit, flat colors (debugging, UI) MeshLambertMaterial : Cheap diffuse lighting (mobile) MeshPhongMaterial : Specular highlights (older standard) MeshStandardMaterial : PBR, realistic (recommended) MeshPhysicalMaterial : Advanced PBR (clearcoat, transmission) 4. Coordinate System Three.js uses right handed coordinate system +Y is up, +Z is toward camera, +X is right Rotations use radians (Math.PI = 180°) 5. Scene Organization Common Pitfalls 1. Not Updating Aspect Ratio on Resize Always update camera aspect ratio and projection matrix when window resizes. 2. Creating New Objects in Animation Loop 3. Forgetting to Enable Shadows Remember to enable shadows on renderer, lights, and objects. 4. Z Fighting (Flickering) Increase near plane distance Decrease far plane distance Avoid overlapping coplanar surfaces Use material.polygonOffset = true with material.polygonOffsetFactor 5. Color Space Issues 6. Not Disposing Resources Always call .dispose() on geometries, materials, textures, and renderers when no longer needed. Resources This skill includes bundled resources to accelerate Three.js development: references/ api reference.md : Quick API reference for core classes (Scene, Camera, Renderer, etc.) materials guide.md : Comprehensive material types and properties optimization checklist.md : Performance optimization strategies scripts/ setup scene.py : Generate boilerplate Three.js scene setup code texture optimizer.py : Batch optimize textures for web (resize, compress) gltf validator.py : Validate glTF models before use assets/ starter scene/ : Complete HTML/JS boilerplate project shaders/ : Custom GLSL shader examples (vertex, fragment) hdri/ : Environment maps for PBR lighting draco/ : DRACO decoder for compressed models Advanced Topics Custom Shaders (GLSL) Render Targets (Render to Texture) GPU Computation (GPGPU) Use GPUComputationRenderer for particle simulations, cloth physics, etc. When to Use This Skill Use this skill when: Building interactive 3D web experiences Creating product configurators or visualizers Implementing WebGL/WebGPU rendering Working with 3D models, scenes, or animations Optimizing Three.js performance Integrating Three.js with other libraries (GSAP, React, etc.) Debugging Three.js rendering issues For React integration, use the react three fiber skill. For animation, combine with the gsap scrolltrigger skill. For UI animations, use the motion framer skill.

threejs-webgl