threejs-lights

Q: How do I install threejs-lights?

Run npx skills add https://github.com/full-stack-skills/threejs-skills --skill threejs-lights in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/threejs-lights/ (personal) or .claude/skills/threejs-lights/ (project).

by full-stack-skillsCode Quality & Workflow

three.js lighting: AmbientLight, HemisphereLight, DirectionalLight, PointLight, SpotLight, RectAreaLight, LightProbe, IESSpotLight, ProjectorLight, shadow subtypes, and addon helpers such as RectAreaLightUniformsLib, RectAreaLightTexturesLib, LightProbeGenerator, TiledLighting. Use when configuring direct/indirect light, shadows, probes, or area lights; for IES file loading use threejs-loaders; for node-based light graphs use threejs-node-tsl; for debug helpers use threejs-helpers.

Installs: 411
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/full-stack-skills/threejs-skills --skill threejs-lights

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads threejs-lights automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

When to use this skill

ALWAYS use this skill when the user mentions:

Enabling castShadow / receiveShadow, shadow map size, bias, normal bias, camera frusta for shadow casters
Physical lights: intensity, distance/decay, angle/penumbra for spots, rect area setup
LightProbe for irradiance-style probes; IESSpotLight with IES data

IMPORTANT: lights vs loaders vs node-tsl

Topic	Skill
Light classes and shadows	threejs-lights
Loading IES/HDR files	threejs-loaders
LightNode / TSL lighting	threejs-node-tsl

Trigger phrases include:

"DirectionalLight", "SpotLight", "RectAreaLight", "castShadow", "shadow map"
"阴影", "点光源", "面光源", "LightProbe"

How to use this skill

Base recipe: ambient/hemisphere fill + directional sun + local points/spots.
Shadows: enable on renderer, mark casters/receivers, tune map size vs performance, adjust bias to remove acne/peter-panning.
RectArea: initialize addon libs per docs page before using light type.
Probes: place probes; generate data via addon generator when applicable; relate to materials env reflections (threejs-materials, threejs-textures).
IES: load profile via loader skill, attach to IESSpotLight per docs.
Performance: limit shadow-casting lights; use layers (threejs-objects) to exclude objects.

See examples/workflow-directional-shadow.md.

Doc map (official)

Docs section	Representative links
Lights	https://threejs.org/docs/Light.html
Directional	https://threejs.org/docs/DirectionalLight.html
Spot	https://threejs.org/docs/SpotLight.html
Rect area	https://threejs.org/docs/RectAreaLight.html

Scope

In scope: Core lights, shadow maps, probes, listed addons for rect area and probe generation.
Out of scope: CSM deep theory (see addon Csm docs if user names it); baked lightmaps in DCC.

Common pitfalls and best practices

Shadow map resolution must match scene scale—tiny shadows on huge worlds look blocky.
Point light shadows are six-face expensive—use wisely.
RectAreaLight without required libs yields black or wrong shading—verify init.
Mismatched physical units (intensity vs exposure) with threejs-renderers tone mapping causes blown or dim scenes.
Shadow bias / normalBias trade-offs: acne vs peter-paning—tune with helper frusta (threejs-helpers).

Documentation and version

Light and shadow classes live under Lights in three.js docs. RectAreaLight and probe addons depend on extra init from Addons → Lights; IES profiles require threejs-loaders for file fetch before the light API is usable.

Agent response checklist

When answering under this skill, prefer responses that:

Link the concrete light type (DirectionalLight, SpotLight, …) and shadow pages when shadows are on.
Separate IES loading to threejs-loaders and LightNode topics to threejs-node-tsl.
Give practical shadow map size / bias guidance with threejs-helpers for frustum visualization.
Mention renderer.shadowMap.enabled alongside light castShadow (see threejs-renderers).
Note performance cost of multiple shadow-casting lights.

References

Keywords

English: lights, shadows, directional, spotlight, rectarea, lightprobe, three.js

中文： 灯光、阴影、平行光、聚光灯、面光源、LightProbe、three.js

FAQ

What does the threejs-lights skill do?

How do I install threejs-lights?

Run npx skills add https://github.com/full-stack-skills/threejs-skills --skill threejs-lights in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/threejs-lights/ (personal) or .claude/skills/threejs-lights/ (project).

Which AI agents can use threejs-lights?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is threejs-lights safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains threejs-lights?

It is published by full-stack-skills in full-stack-skills/threejs-skills. It has 411 recorded installs.