What problem does it solve? Three.js scenes often fail silently: black screens, invisible meshes, washed-out colors, flickering surfaces, or broken shadows. This Skill provides a systematic diagnostic workflow that maps each visual symptom to its root causes and verified fix patterns, preventing common mistakes like wrong color space settings, missing updateProjectionMatrix calls, or forgotten needsUpdate flags. ## Core Features & Use Cases - Symptom-Based Diagnosis: Covers nine symptom categories including black screens, invisible objects, wrong colors, z-fighting, shadow artifacts, WebGL context loss, stale buffers, projection matrix errors, and transparency sorting issues. - Fix Patterns with Code: Each cause includes concrete JavaScript fixes, such as setting SRGBColorSpace on color textures, using polygonOffset for z-fighting, and alphaTest instead of transparent for hard-edge alpha. - Anti-Pattern Reference: Documents nine common mistakes like setting near to 0, applying SRGBColorSpace to normal maps, or calling material.needsUpdate every frame. - Use Case: Your Three.js model loads but the screen stays black. Follow the debugging checklist to verify renderer size, camera position, lighting, and the render loop, then apply the matching fix. ## Quick Start Ask the assistant to diagnose why your Three.js scene shows a black screen or why a loaded model is not appearing.
