threejs-materials-lighting
Light and shade a three.js scene: choose materials (MeshStandardMaterial PBR vs unlit MeshBasicMaterial), add ambient/hemisphere/directional/point/spot lights, turn on shadow maps, and use an environment map (IBL) for realistic reflections. Use when a three.js model looks black, flat, or wrong — when the user mentions three.js materials, MeshStandardMaterial, lights, shadows, envMap, or PBR. For renderer/loop setup use threejs-scene-setup; for loading models use threejs-gltf-loading.
npx skills add gamedev-skills/awesome-gamedev-agent-skills --skill threejs-materials-lighting --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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 `MeshStandardMaterial`, `DirectionalLight`, etc., or sets `renderer.shadowMap.enabled` or `scene.environment`. **When *not* to use:** the renderer/camera/loop → `threejs-scene-setup`. Loading models (whose PBR materials this complements) → `threejs-gltf-loading`. Custom GLSL/`ShaderMaterial` is its own topic; for the portable concept see `shader-programming`. ## Core workflow 1. **Pick a material by need.** `MeshStandardMaterial` (PBR: `roughness`, `metalness`, reacts to lights/IBL) for realism; `MeshPhysicalMaterial` for clearcoat/transmission; `MeshBasicMaterial` (unlit, ignores lights) for UI/flat; `MeshNormalMaterial`/`MeshDepthMaterial` for debugging. 2. **Add light, or nothing shows.** Lit materials need a light source and/or `sc
- When to use
- Core workflow
- Patterns
- 1. PBR material under a 3-light rig
- 2. Unlit material (no light needed)
- 3. Shadows (the three required switches + camera fit)
- 4. PBR textures on a material
- 5. Image-based lighting from an HDR environment
- Pitfalls
- References
- Related skills
What does the threejs-materials-lighting skill do?
Light and shade a three.js scene: choose materials (MeshStandardMaterial PBR vs unlit MeshBasicMaterial), add ambient/hemisphere/directional/point/spot lights, turn on shadow maps, and use an environment map (IBL) for realistic reflections. Use when a three.js model looks black, flat, or wrong — when the user mentions three.js materials, MeshStandardMaterial, lights, shadows, envMap, or PBR. For renderer/loop setup use threejs-scene-setup; for loading models use threejs-gltf-loading.
How do I install it?
Run `npx skills add gamedev-skills/awesome-gamedev-agent-skills --skill threejs-materials-lighting --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From gamedev-skills/awesome-gamedev-agent-skills, a repository with 406 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.