Which Three.js light types support shadows?

DirectionalLight, PointLight, and SpotLight support shadows natively. AmbientLight, HemisphereLight, and RectAreaLight do not support standard shadow maps and require alternative techniques.

How do I fix shadow artifacts like 'shadow acne'?

You can resolve shadow acne by adjusting the 'bias' and 'normalBias' properties on the light's shadow object to fine-tune the depth offset.

What is the most performance-efficient light in Three.js?

AmbientLight and HemisphereLight are the most efficient because they don't calculate light direction or shadows. For directional lighting, DirectionalLight is more efficient than PointLight or SpotLight.

Can I use HDR images for lighting in Three.js?

Yes, this skill includes implementation patterns for using RGBELoader and PMREMGenerator to set up Image-Based Lighting (IBL) for realistic reflections and ambient light.

Three.js Lighting & Shadows

Name: Three.js Lighting & Shadows
Author: Microck

byMicrock

•

游戏开发

Configures and optimizes realistic 3D lighting, shadows, and environment maps for Three.js applications.

This skill equips Claude with expert-level patterns for implementing sophisticated lighting systems in Three.js. It covers a comprehensive range of light types—from basic ambient and directional lights to advanced RectAreaLights—alongside detailed configurations for shadow mapping, image-based lighting (IBL) using HDR textures, and real-time light animation. Whether you are building a product configurator or a web-based game, this skill provides the implementation details needed to achieve high-fidelity visuals while maintaining optimal rendering performance through best practices like shadow bias tuning and light layers.

主要功能

01Environment lighting (IBL) setup using HDR maps and PMREMGenerator

02Advanced shadow map configuration including PCFSoft and VSM support

032 GitHub stars

04Performance optimization techniques like light layers and contact shadows

05Visual debugging tools using light and shadow camera helpers

06Implementation of all standard Three.js light types (Ambient, Directional, Point, Spot, etc.)

使用场景

01Implementing physically-based rendering (PBR) with HDR environment maps

02Setting up realistic three-point lighting for 3D product showcases

03Optimizing shadow performance and quality for complex web-based games

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add microck/opendots-microck threejs-lighting

For use in Claude.ai and ChatGPT

主要功能

01Environment lighting (IBL) setup using HDR maps and PMREMGenerator

02Advanced shadow map configuration including PCFSoft and VSM support

032 GitHub stars

04Performance optimization techniques like light layers and contact shadows

05Visual debugging tools using light and shadow camera helpers

06Implementation of all standard Three.js light types (Ambient, Directional, Point, Spot, etc.)

使用场景

01Implementing physically-based rendering (PBR) with HDR environment maps

02Setting up realistic three-point lighting for 3D product showcases

03Optimizing shadow performance and quality for complex web-based games

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add microck/opendots-microck threejs-lighting

For use in Claude.ai and ChatGPT