skills.rest
Impertio-Studio
Impertio-StudioOFFICIAL
Explore all skills by this author →
WebsiteGitHub

threejs-impl-shadows

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

11|Updated Mar 20, 2026
Search Tags:#performance optimization#Three.js#lighting#shadows#shadow maps#scene configuration#camera helper
One-click install
npx skills add https://github.com/Impertio-Studio/Three.js-Claude-Skill-Package --skill threejs-impl-shadows-impertio-studio
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-impl-shadows
Source: https://github.com/Impertio-Studio/Three.js-Claude-Skill-Package/tree/main/skills/source/threejs-impl/threejs-impl-shadows
Command: npx skills add https://github.com/Impertio-Studio/Three.js-Claude-Skill-Package --skill threejs-impl-shadows-impertio-studio

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill helps developers configure and optimize shadows in Three.js scenes, ensuring proper shadow casting and receiving, and addressing common issues like acne, peter panning, and light bleeding.

Core Features & Use Cases

  • Shadow Configuration: Offers comprehensive guidance on setting up shadows with correct casting and receiving flags.
  • Shadow Map Types: Details comparison and best practices for various shadow map types, including Basic, PCF, PCF Soft, and VSM.
  • Lighting Optimization: Provides advice on selecting the right light types and configuring their shadows for performance and quality.
  • Debugging: Includes a guide to using CameraHelper for debugging shadow frustum issues and a flowchart for diagnosing common shadow artifacts.
  • Use Case: If you are developing a Three.js application that requires high-quality shadows, this Skill can help you implement and optimize shadow casting for lights and geometry in your scenes.

Quick Start

Enable shadows for a directional light and a mesh in your Three.js scene with the following commands:

renderer.shadowMap.enabled = true;
light.castShadow = true;
mesh.castShadow = true;

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 shadow acne and peter panning in Three.js scenes?▼

Shadow acne in Three.js is fixed by adjusting the bias and normal bias properties of the shadow map. Peter panning occurs when bias is too high, causing objects to appear detached from their shadows. This Skill provides a diagnostic flowchart to balance these parameters and eliminate both artifacts.

What are the differences between PCF, PCF Soft, and VSM shadow maps in Three.js?▼

PCF, PCF Soft, and VSM are Three.js shadow map types that differ in rendering quality and performance cost. This Skill details a comparison of these types, offering best practices for selecting the optimal shadow map based on your scene's specific quality and performance requirements.

Why are my Three.js directional lights not casting shadows on meshes?▼

Three.js directional lights fail to cast shadows when renderer.shadowMap.enabled, light.castShadow, and mesh.castShadow are not explicitly set to true. This Skill guides you through properly configuring these flags for both shadow casting and receiving.

How do I use CameraHelper to debug shadow frustum issues in Three.js?▼

CameraHelper is used to debug shadow frustum issues in Three.js by visually rendering the light's shadow camera bounds. This Skill includes guidance on using CameraHelper to inspect and adjust the frustum size for accurate shadow coverage.

Does this shadow optimization guidance apply to older Three.js versions?▼

This shadow optimization guidance is designed for Three.js developers familiar with version r160 and later. It focuses on modern scene lighting optimization techniques and shadow configurations specific to recent Three.js updates.

Related Skills

Explore More Software Engineering Skills→
MonichreMonichre

threejs-lighting

Configure ambient, hemisphere, directional, point, spot, and rect area lights in Three.js scenes.

Community
Advanced
nlelouchenlelouche
71

gpu-instancing-expert

Expert in creating efficient 3D tree models for games and visualizations.

Community
Advanced
tc9011tc9011

threejs-postprocessing

Apply post-processing effects to Three.js scenes with EffectComposer passes.

Community
Intermediate
CesarG503CesarG503

threejs-lighting

Implement and optimize lighting and shadow techniques in Three.js scenes.

Community
Intermediate