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
Decision gist · record as of 2026-07-25
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.
Use it when
- threejs-materials-lighting teaches PBR setup by configuring MeshStandardMaterial with roughness and metalness properties.
- threejs-materials-lighting covers shadow setup through shadow maps and light frustum fitting.
Verify before relying
Read SKILL.md below before installing (2 files). Open directory: indexed for reading, not audited.
Install
gamedev-skills/awesome-gamedev-agent-skills/threejs-materials-lighting · repository language: Python
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
File tree — 2 files
skills/web-engines/threejs-materials-lighting/SKILL.md
skills/web-engines/threejs-materials-lighting/references/materials-lights-table.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Fix black or flat-looking 3D meshes by choosing materials and adding lights”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Master Three.js lighting by learning how to implement and fine-tune various light sources in your 3D environments. This skill covers ambient, directional, and point light setup, helping you achieve realistic illumination and visual depth in your scenes. Work with Claude Code to experiment with light properties and see real-time rendering results.
threejs-webgl equips Claude Code with a comprehensive toolkit for creating immersive 3D graphics and WebGL-powered experiences. This skillstack integrates Three.js alongside complementary libraries like GSAP and Babylon.js, enabling developers to craft sophisticated animations and interactive visualizations for modern web applications.
Get your three.js project off the ground with a complete scene initialization that handles camera placement, renderer configuration, and a continuous render loop. This skill provides the foundational boilerplate every three.js game needs, letting you focus on gameplay and visuals instead of setup details.
This skill teaches you how to construct and assign materials to 3D geometries within the Three.js framework. You'll explore material types, texture mapping, and shader techniques to achieve realistic visual effects in browser-based 3D scenes.
This skill equips Claude Code with the ability to load and parse 3D models in diverse file formats through Three.js's comprehensive loader ecosystem. Whether you're working with glTF, OBJ, FBX, or other standard 3D formats, this integration simplifies asset management and model initialization for your projects.
Phaser is a JavaScript framework designed for building 2D games across web and mobile platforms. Learn to leverage its robust rendering engine, physics systems, and asset management tools to bring your game concepts to life. Whether you're prototyping or shipping production titles, Phaser provides the foundation and flexibility developers need.
More skills R3f Lighting (unlicensed) · r3f-materials (MIT)