threejs-materials-lighting
This skill teaches you how to transform dull or featureless 3D geometry into visually compelling scenes using Three.js. You'll learn to select appropriate material types, configure their properties, and strategically place light sources to achieve realistic shading and depth. Perfect for game developers and 3D graphics enthusiasts who want to move beyond basic mesh rendering.
threejs-materials-lighting addresses this common issue by teaching you to add proper lighting and choose the right materials. A black mesh typically means your scene lacks light sources or uses MeshBasicMaterial, which doesn't respond to lighting. Switch to MeshStandardMaterial, add lights like DirectionalLight or HemisphereLight, and ensure your camera can see the lit geometry. The skill covers material selection and light placement strategies to bring your 3D models to life.
AI-generated summary based on this skill's SKILL.md
Install
gamedev-skills/awesome-gamedev-agent-skills/threejs-materials-lighting · repository language: Python
git clone https://github.com/gamedev-skills/awesome-gamedev-agent-skills
cp -r awesome-gamedev-agent-skills/skills/web-engines/threejs-materials-lighting ~/.claude/skills/threejs-materials-lightingFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
Why does my three.js mesh look black and how do I fix it?
threejs-materials-lighting addresses this common issue by teaching you to add proper lighting and choose the right materials. A black mesh typically means your scene lacks light sources or uses MeshBasicMaterial, which doesn't respond to lighting. Switch to MeshStandardMaterial, add lights like DirectionalLight or HemisphereLight, and ensure your camera can see the lit geometry. The skill covers material selection and light placement strategies to bring your 3D models to life.
How do I set up physically based rendering with MeshStandardMaterial?
threejs-materials-lighting teaches PBR setup by configuring MeshStandardMaterial with roughness and metalness properties. These parameters control how surfaces reflect light realistically—metalness ranges from 0 (non-metal) to 1 (pure metal), while roughness from 0 (mirror-like) to 1 (diffuse). Combine this with proper lighting (DirectionalLight, PointLight) and environment maps for authentic results. The skill guides you through the complete workflow for physically accurate rendering.
How do I enable and configure shadows in three.js?
threejs-materials-lighting covers shadow setup through shadow maps and light frustum fitting. Enable shadows by setting castShadow and receiveShadow on your meshes and lights, then configure the light's shadow camera to frame your scene properly. DirectionalLight shadows require careful frustum adjustment to avoid artifacts. The skill teaches you to balance shadow quality, performance, and visual fidelity while troubleshooting common issues like shadow acne.
What is image-based lighting and how do I add environment maps?
threejs-materials-lighting explains IBL as a technique using environment maps (HDR images) to light your scene realistically. Environment maps provide both ambient lighting and reflections on metallic/reflective surfaces. The skill covers loading HDR maps, processing them with PMREM for efficient rendering, and applying them to your scene. This approach creates professional-looking lighting without placing individual lights, ideal for outdoor scenes and product visualization.
How do I troubleshoot washed-out colors and shadow artifacts?
threejs-materials-lighting helps diagnose lighting problems by examining material properties, light intensity, and shadow map configuration. Washed-out colors often result from excessive ambient light or incorrect texture color space (sRGB vs linear). Shadow artifacts like acne or banding come from shadow map resolution and bias settings. The skill teaches you to adjust light frustums, shadow camera near/far planes, and material properties to achieve clean, vibrant results.
What's the difference between MeshBasicMaterial and MeshStandardMaterial?
threejs-materials-lighting explains that MeshBasicMaterial ignores all lighting—it renders at full color regardless of lights, making it unsuitable for realistic scenes. MeshStandardMaterial responds to lights and supports PBR properties like roughness and metalness, enabling dynamic shading and reflections. Choose MeshBasicMaterial only for UI overlays or unlit effects; use MeshStandardMaterial for any scene requiring depth, realism, and professional appearance.
SKILL.md
rendered from the published skill — quoted content, verbatim
three.js Materials & Lighting
Make three.js surfaces look right: pick the correct material, light the scene, enable shadows, and add image-based lighting. Patterns target r165+, verified against r184 (lighting is physically based by default since r155).
When to use
- Use when a mesh renders black or flat, when choosing a material, adding lights, enabling shadows, or setting up environment-map reflections (IBL).
- Use when code constructs
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 2 files
skills/web-engines/threejs-materials-lighting/SKILL.md
skills/web-engines/threejs-materials-lighting/references/materials-lights-table.md