threejs-lighting Skill: Lights, Shadows and HDR

Teaches Claude how to light a three.js scene, tune shadows and set up HDR environment lighting without outdated code.

Installs: 15.1K; on skills.sh
Stars: 3.9K; on GitHub
Updated: Oct 2026; last repo commit

threejs-lighting is a reference skill. Claude loads it when you add or tune lights, fix shadow acne, set up image-based lighting or dim an environment map in three.js.

It targets three.js r186. The guide covers light units, shadow settings, HDR environments, light probes, performance and the WebGPU and TSL differences. It bundles no scripts. The folder holds one SKILL.md with code samples.

Good for

Three.js developers adding or tuning lights and shadows
People fixing shadow acne or dim image-based lighting
Developers on WebGPU and TSL who need lighting that matches

Install threejs-lighting

Claude Code

Copy this prompt.

Install the threejs-lighting skill in Claude Code. Run this command:

npx skills add https://github.com/cloudai-x/threejs-skills --skill threejs-lighting

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

Light types and physical units, shadow maps, HDR environment lighting, light probes, and lighting performance, on WebGL or with WebGPU and TSL. Use when adding or tuning lights, fixing shadow acne, setting up image-based lighting, or dimming an environment map.

Sections in SKILL.md

Quick Start
Light Types and Units
Ambient and Hemisphere
DirectionalLight
SunLight: automatic cascaded shadows
PointLight and SpotLight
RectAreaLight
Shadows
Tuning a directional shadow
Point and spot shadow cameras are derived
Contact shadows (fake, cheap)
Light Helpers
Environment Lighting (IBL)
Light Probes
Common Setups
Animating Lights

Key facts

Author: cloudai-x (repo owner)
Repo: cloudai-x/threejs-skills
Installs on skills.sh: 15,057
Repo stars: 3,903
License: MIT
Last repo commit: 2026-10-19
Files in the skill folder: 1 file including SKILL.md

What it includes

A table of every light type, its shadows and its intensity unit
Point and spot light intensity is in candela with inverse-square falloff, so useful values run to the hundreds. Directional, ambient and hemisphere lights are plain multipliers.
Light Types and Units
Flat fill light and sky-and-ground light
Covers the two lights that cast no shadows.
Ambient and Hemisphere
Sun-style light, plus automatic cascaded shadows
SunLight is an addon that fits its shadow frustum to the view automatically.
DirectionalLight and SunLight
Bulbs and cones with distance falloff
Explains distance, decay and power, and how shadow cameras are derived.
PointLight and SpotLight
Soft panel light
Works only with MeshStandardMaterial and MeshPhysicalMaterial, and does not cast shadows.
RectAreaLight
Turn shadow maps on and tune them
Shows the renderer, light and object settings, and notes that VSM shadows are not supported for point lights.
Shadows
A cheap fake shadow under objects
Uses a radial-gradient plane, because three.js has no ContactShadows class.
Contact shadows
Visual helpers for debugging lights
Directional, point, spot and hemisphere helpers. Call update() after recoloring or re-aiming a light.
Light Helpers
Light a scene from an HDR image
Covers loading an HDR with HDRLoader and scene.environmentIntensity.
Environment Lighting (IBL)
Baked ambient light from a spherical-harmonics probe
Notes that generating a probe from a cube target is async.
Light Probes
Three-point lighting and an outdoor daylight rig
Copy-ready setups for a studio look and for sun plus sky.
Common Setups
Move or pulse a light each frame
Uses THREE.Timer rather than the deprecated Clock.
Animating Lights
Keep light and shadow cost down
Explains that adding a light or toggling castShadow recompiles materials, and how to render shadows on demand for static scenes.
Performance
Lighting under WebGPURenderer
Covers DynamicLighting, ClusteredLighting and per-material light selection.
WebGPU and TSL
Outdated or wrong code paired with the fix and the reason
Includes legacy light units, PCFSoftShadowMap, RGBELoader renamed to HDRLoader, and envMapIntensity versus scene.environmentIntensity.
Common Mistakes

From the official docs

Questions

What does the threejs-lighting skill do?

It gives Claude a written guide to three.js lighting. Claude uses it to pick lights, set intensities in the right units, configure shadows and set up HDR environment lighting.

Why do my point lights look dark?

The skill explains that point and spot intensity is in candela with inverse-square falloff. A value of 1 contributes almost nothing at range, and useful values typically run to the hundreds.

Which three.js version does it target?

Three.js r186, stated at the top of the SKILL.md. Check your installed version first, since some APIs it describes were renamed in recent releases.

How do I install it?

Use the install box above. The skill is a single SKILL.md file.

Does it cover WebGPU?

Yes. A WebGPU and TSL section covers lighting under WebGPURenderer, including DynamicLighting and ClusteredLighting.

Is it safe to install?

It bundles no scripts. The folder holds one SKILL.md of written guidance and code samples, which Claude adapts and writes into your project when you ask.

Information

updated Nov 2, 2026

Repository: cloudai-x/threejs-skills
Folder: skills/threejs-lighting

cloudai-x/threejs-skills skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 2

threejs-lighting SKILL.md · github.com
threejs-skills README · github.com