threejs-errors-rendering
OfficialDiagnose and fix Three.js rendering issues fast.
System Documentation
What problem does it solve?
This skill guides developers when a Three.js scene renders incorrectly: black screen, invisible objects, wrong colors, z-fighting, or broken shadows. It also helps prevent common mistakes such as incorrect color space configuration, missing material.side, or forgetting updateProjectionMatrix, by outlining diagnosis steps and fix patterns.
Core Features & Use Cases
- Diagnosis workflow: Step-by-step checks to identify rendering issues in a Three.js scene.
- Fix patterns: Practical recipes for common rendering problems (color space, material settings, camera projection, lighting, shadows).
- Real-world scenarios: Debug black screens, invisible meshes, color discrepancies, z-fighting, shadow artifacts in r160+ environments.
Quick Start
Describe the rendering symptom you observe (for example, a black screen or invisible object) and let the skill guide you through a step-by-step diagnosis and fixes.
Dependency Matrix
Required Modules
None requiredComponents
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: threejs-errors-rendering Download link: https://github.com/OpenAEC-Foundation/Three.js-Claude-Skill-Package/archive/main.zip#threejs-errors-rendering Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.