{"enrichment":{"faq":[{"a":"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.","q":"Why does my three.js mesh look black and how do I fix it?"},{"a":"threejs-materials-lighting teaches PBR setup by configuring MeshStandardMaterial with roughness and metalness properties. These parameters control how surfaces reflect light realistically\u2014metalness 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.","q":"How do I set up physically based rendering with MeshStandardMaterial?"},{"a":"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.","q":"How do I enable and configure shadows in three.js?"},{"a":"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.","q":"What is image-based lighting and how do I add environment maps?"},{"a":"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.","q":"How do I troubleshoot washed-out colors and shadow artifacts?"},{"a":"threejs-materials-lighting explains that MeshBasicMaterial ignores all lighting\u2014it 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.","q":"What's the difference between MeshBasicMaterial and MeshStandardMaterial?"}],"shadow_tags":["pbr-rendering","shadow-mapping","ibl-lighting","material-properties","light-types","texture-mapping","tone-mapping","realistic-shading","scene-illumination","surface-appearance"],"summary_rewrite":"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."},"files":[{"bytes":7433,"path":"skills/web-engines/threejs-materials-lighting/SKILL.md","sha256":"af60eeaee0de87f14d88ab9868fe8a30b94fd7622f09b7a1d3f9afcc5942bff9","url":"https://skillfed.io/files/gamedev-skills/awesome-gamedev-agent-skills/threejs-materials-lighting/038d203a/SKILL.md"}],"id":"gamedev-skills/awesome-gamedev-agent-skills/threejs-materials-lighting","links":{"html":"https://skillfed.io/gamedev-skills/awesome-gamedev-agent-skills/threejs-materials-lighting","md":"https://skillfed.io/gamedev-skills/awesome-gamedev-agent-skills/threejs-materials-lighting.md","repo":"https://github.com/gamedev-skills/awesome-gamedev-agent-skills"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":24,"language":"Python","last_updated":"2026-07-25","license":"Apache-2.0","name":"threejs-materials-lighting","publisher":"gamedev-skills","stars":356},"relations":{"similar":[{"id":"CloudAI-X/threejs-skills/threejs-lighting"},{"id":"calesthio/OpenMontage/threejs-lighting"},{"id":"freshtechbro/claudedesignskills/threejs-webgl"},{"id":"CloudAI-X/threejs-skills/threejs-materials"},{"id":"calesthio/OpenMontage/threejs-materials"},{"id":"secondsky/claude-skills/threejs"},{"id":"EnzeD/r3f-skills/r3f-materials"},{"id":"EnzeD/r3f-skills/r3f-textures"},{"id":"EnzeD/r3f-skills/r3f-fundamentals"},{"id":"gamedev-skills/awesome-gamedev-agent-skills/threejs-scene-setup"}]},"slug":{"owner":"gamedev-skills","repo":"awesome-gamedev-agent-skills","skill":"threejs-materials-lighting"},"version":"038d203a"}