skills.rest
Bailipa
BailipaCOMMUNITY
Explore all skills by this author →
GitHub

threejs-impl-shadows

Configure shadow maps and per-light settings for Three.js scenes.

4|Updated Apr 14, 2026
Search Tags:#debugging#webgl#threejs#shadow#lighting#shadowmap
One-click install
npx skills add https://github.com/Bailipa/EZTor_FULLBLOOD --skill threejs-impl-shadows-bailipa
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-impl-shadows
Source: https://github.com/Bailipa/EZTor_FULLBLOOD/tree/main/.opencode/skills/threejs/threejs-impl/threejs-impl-shadows
Command: npx skills add https://github.com/Bailipa/EZTor_FULLBLOOD --skill threejs-impl-shadows-bailipa

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Shadows in Three.js scenes are easy to misconfigure or miss, leading to flat lighting and artifacts. This guide helps prevent common shadow pitfalls like acne, peter panning, or missing shadows by outlining proper shadow map usage, per-light configuration, and debugging tips.

Core Features & Use Cases

  • Clear steps to enable shadow maps on the renderer, lights, and meshes for reliable shadows.
  • Per-light shadow configuration guidance for DirectionalLight, SpotLight, and PointLight, including bias and normalBias tuning.
  • Practical debugging tips, CameraHelper usage, and patterns to fix common shadow artifacts in production scenes.

Quick Start

Enable shadows in your Three.js scene by following the described steps and verify the result with a sample scene.

Frequently Asked Questions about threejs-impl-shadows

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix missing or incorrect shadows in a Three.js scene?▼

To fix missing or incorrect Three.js shadows, you must enable shadow maps on the renderer, lights, and meshes. This guide provides steps for proper shadow map configuration to ensure reliable, predictable shadow rendering.

What causes shadow acne and peter panning in Three.js, and how do I resolve them?▼

Shadow acne and peter panning in Three.js are common shadow artifacts caused by incorrect shadow map settings. You can resolve them by tuning per-light bias and normalBias properties for directional, spot, and point lights.

How do I debug shadow map issues using CameraHelper in Three.js?▼

You can debug Three.js shadow map issues by using CameraHelper to visualize the shadow camera's frustum. This guide outlines debugging tips and helper patterns to identify and fix shadow artifacts in production scenes.

Does this shadow setup guide cover per-light configuration for point and spot lights?▼

Yes, this shadow setup guide covers per-light shadow configuration for DirectionalLight, SpotLight, and PointLight. It addresses specific bias, normalBias tuning, and shadow map types required for varied interactive 3D scenes.

Why do my alpha-tested materials have broken shadows in WebGL?▼

Alpha-tested materials can cause broken WebGL shadows due to incomplete transparency handling in the shadow map. This guide addresses alpha-tested materials handling to ensure proper shadow casting and cutting.

Related Skills

Explore More Software Engineering Skills→
Impertio-StudioImpertio-Studio
11

threejs-impl-shadows

Configure and optimize Three.js shadows, troubleshooting acne, peter panning, and light bleeding.

Official
Advanced
ClinscottClinscott

threejs-lighting

Configure and optimize Three.js lighting, shadows, and environment lighting.

Community
Advanced
HsnSaboorHsnSaboor

3d-graphics

Develop interactive 3D web graphics with Three.js, WebGL, and WebGPU.

Community
Advanced
Impertio-StudioImpertio-Studio
11

threejs-core-renderer

Configure Three.js renderers, cameras, shadow maps, and shaders for WebGL and WebGPU.

Official
Advanced