Can I use HDR environment maps with this skill?

Absolutely. The skill includes patterns for using RGBELoader and PMREMGenerator to implement high-quality Image-Based Lighting (IBL) from HDR textures.

Which Three.js light supports the most realistic shadows?

DirectionalLight and SpotLight are most commonly used for shadows. While RectAreaLight provides high realism, it does not support native shadows and requires custom solutions or baked lighting.

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

Shadow acne is fixed by adjusting the light's shadow bias and normalBias properties. This skill provides the specific values and ranges needed to eliminate these artifacts.

Does this skill help with mobile performance?

Yes, it includes optimization tips such as limiting light counts, using smaller shadow map resolutions (512px-1024px), and utilizing light layers to reduce the computational load per frame.

Three.js Lighting & Shadows

Name: Three.js Lighting & Shadows
Author: sickn33

bysickn33

•

31,721

•

ゲーム開発

Implements, configures, and optimizes professional lighting and shadow systems within Three.js 3D scenes.

This skill provides a comprehensive toolkit for managing lighting and shadows in Three.js applications. It guides developers through selecting the right light types—from basic AmbientLight to advanced RectAreaLight—while offering precise configurations for shadows, Environment Lighting (IBL), and performance optimizations. Whether you are setting up a realistic outdoor environment with DirectionalLight or a cinematic indoor studio, this skill ensures scene readability, mood, and visual fidelity through proven implementation patterns and boilerplate code.

主な機能

0131,721 GitHub stars

02Advanced shadow configuration including map types, depth bias, and camera frustums.

03Ready-to-use boilerplate for common setups like three-point and outdoor daylight lighting.

04Implementation of Image-Based Lighting (IBL) using HDR environment maps and PMREM.

05Performance optimization techniques to balance visual quality with frame rates.

06Comprehensive support for all core Three.js light types and their specific properties.

ユースケース

01Optimizing performance in complex 3D scenes by tuning shadow maps and utilizing light layers.

02Creating realistic 3D product configurators with soft shadows and studio-grade lighting.

03Adding environmental atmosphere to web-based games using Hemisphere and Directional light gradients.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add sickn33/antigravity-awesome-skills threejs-lighting

For use in Claude.ai and ChatGPT

主な機能

0131,721 GitHub stars

02Advanced shadow configuration including map types, depth bias, and camera frustums.

03Ready-to-use boilerplate for common setups like three-point and outdoor daylight lighting.

04Implementation of Image-Based Lighting (IBL) using HDR environment maps and PMREM.

05Performance optimization techniques to balance visual quality with frame rates.

06Comprehensive support for all core Three.js light types and their specific properties.

ユースケース

01Optimizing performance in complex 3D scenes by tuning shadow maps and utilizing light layers.

02Creating realistic 3D product configurators with soft shadows and studio-grade lighting.

03Adding environmental atmosphere to web-based games using Hemisphere and Directional light gradients.