What problem does it solve? Building interactive 3D web experiences with Three.js requires coordinating scenes, cameras, renderers, materials, lights, and animations while avoiding common pitfalls like memory leaks, z-fighting, and color space errors. This Skill provides production-tested patterns, API references, and boilerplate generators to accelerate 3D web development. ## Core Features & Use Cases - Complete Scene Patterns: Ready-to-use code for scene setup, lighting strategies (three-point, physical, hemisphere), shadow configuration, raycasting interaction, and glTF model loading with DRACO compression. - Performance Optimization: Guidance on InstancedMesh, LOD, geometry reuse, texture compression, and resource disposal, plus a dedicated optimization checklist for desktop and mobile targets. - Materials Reference: In-depth guide covering MeshBasicMaterial through MeshPhysicalMaterial with PBR workflows, texture color spaces, and custom GLSL shaders. - Use Case: Build a product configurator by generating a starter scene with the setup script, loading a compressed glTF model, applying PBR materials with environment lighting, and adding raycasting so users can click parts to customize colors. ## Quick Start Ask the AI to create a Three.js scene with orbit controls, shadow-enabled lighting, and a rotating PBR cube using this skill.
