threejs-lights

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.

261 stars

Best use case

threejs-lights is best used when you need a repeatable AI agent workflow instead of a one-off prompt. It is especially useful for teams working in multi. 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.

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.

Users should expect a more consistent workflow output, faster repeated execution, and less time spent rewriting prompts from scratch.

Practical example

Example input

Use the "threejs-lights" skill to help with this workflow task. Context: 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.

Example output

A structured workflow result with clearer steps, more consistent formatting, and an output that is easier to reuse in the next run.

When to use this skill

  • Use this skill when you want a reusable workflow rather than writing the same prompt again and again.

When not to use this skill

  • Do not use this when you only need a one-off answer and do not need a reusable workflow.
  • Do not use it if you cannot install or maintain the related files, repository context, or supporting tools.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/threejs-lights/SKILL.md --create-dirs "https://raw.githubusercontent.com/partme-ai/full-stack-skills/main/skills/threejs-skills/threejs-lights/SKILL.md"

Manual Installation

  1. Download SKILL.md from GitHub
  2. Place it in .claude/skills/threejs-lights/SKILL.md inside your project
  3. Restart your AI agent — it will auto-discover the skill

How threejs-lights Compares

Feature / Agentthreejs-lightsStandard Approach
Platform SupportNot specifiedLimited / Varies
Context Awareness High Baseline
Installation ComplexityUnknownN/A

Frequently Asked Questions

What does this skill do?

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.

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

## 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

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

### Example: Shadow setup with validation

```javascript
// 1. Enable shadows on renderer
renderer.shadowMap.enabled = true;

// 2. Configure light as shadow caster
const light = new THREE.DirectionalLight(0xffffff, 1);
light.castShadow = true;
light.shadow.mapSize.set(2048, 2048);
light.shadow.bias = -0.0001; // Adjust to remove shadow acne

// 3. Validate: verify shadow appears before tuning bias
// Set castShadow on meshes, receiveShadow on ground
mesh.castShadow = true;
ground.receiveShadow = true;
```

See [examples/workflow-directional-shadow.md](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](https://threejs.org/docs/#Lights) in [three.js docs](https://threejs.org/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:

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

## References

- https://threejs.org/docs/#Lights
- https://threejs.org/docs/DirectionalLight.html
- https://threejs.org/docs/SpotLight.html
- https://threejs.org/docs/LightShadow.html

## Keywords

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

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

Related Skills

threejs-webxr

261
from partme-ai/full-stack-skills

WebXR integration for three.js: WebXRManager and XRManager on the renderer, session initialization patterns, VRButton and ARButton helpers, XRControllerModelFactory and hand model families, XREstimatedLight, XRPlanes, and related addon Webxr utilities. Use for immersive sessions and controller/hand tracking—not for standard desktop camera projection (threejs-camera) or composer post effects (threejs-postprocessing).

threejs-textures

261
from partme-ai/full-stack-skills

three.js textures: Texture, DataTexture, CubeTexture, CompressedTexture variants, DepthTexture, VideoTexture, CanvasTexture, 3D/array textures, Source; sampling parameters, mipmaps, anisotropy, wrap/mag/min filters; PMREMGenerator in Extras for environment map prefiltering. Use when configuring GPU texture objects and PMREM; for Draco/KTX2 transcoder file paths use threejs-loaders; for material map slots use threejs-materials; for output color pipeline use threejs-renderers.

threejs-scenes

261
from partme-ai/full-stack-skills

three.js Scene graph root object, linear Fog and exponential FogExp2, Scene.background for solid colors or textures, and high-level environment background concepts that tie to PMREM and loaders in other skills. Use when configuring world container, atmospheric fog, or background; for HDR env map file loading use threejs-loaders; for GPU texture settings after load use threejs-textures; for tone mapping use threejs-renderers.

threejs-renderers

261
from partme-ai/full-stack-skills

Core rendering pipeline for three.js using WebGLRenderer and WebGPURenderer, canvas sizing, device pixel ratio, color space and tone mapping, output encoding, WebGL/WebGPU render targets, Info statistics, and addon overlay renderers (CSS2D/CSS3D/SVG). Use when tuning the draw loop, performance, or switching WebGPU vs WebGL; for EffectComposer passes use threejs-postprocessing; for XR session lifecycle use threejs-webxr; for shader graphs use threejs-node-tsl.

threejs-postprocessing

261
from partme-ai/full-stack-skills

Addon screen-space post-processing for three.js using EffectComposer, Pass base class, RenderPass, and stock passes such as UnrealBloomPass, SSAOPass, SSRPass, BokehPass, OutlinePass, FXAAPass/SMAAPass, TAARenderPass, and ShaderPass; references the Shaders addon group for underlying shader modules. Use when building composer chains for bloom, SSAO, or other screen-space effects; not for basic renderer tone mapping alone (threejs-renderers).

threejs-objects

261
from partme-ai/full-stack-skills

three.js scene graph objects: Object3D transforms and hierarchy, Group, Mesh, InstancedMesh, SkinnedMesh, BatchedMesh, LOD, Line/LineLoop/LineSegments, Points, Sprite, Bone, Skeleton, ClippingGroup; interaction via Raycaster, Layers masks, and EventDispatcher patterns. Use when building scene hierarchies, picking objects with Raycaster, or configuring instanced/skinned meshes; for pure vector math use threejs-math; for skeletal clips use threejs-animation.

threejs-node-tsl

261
from partme-ai/full-stack-skills

three.js node-based shading: Nodes API surface, NodeMaterial and MeshStandardNodeMaterial-style families, TSL (Three.js Shading Language) entry at TSL.html, WebGPURenderer pairing, and core PostProcessing (class) versus addon EffectComposer at a high level. Use when authoring shaders as graphs, using TSL builtins, compute-oriented nodes, or modern WebGPU pipelines; for classic ShaderMaterial GLSL use threejs-materials; for stock EffectComposer passes use threejs-postprocessing; for WebGLRenderer-only tuning use threejs-renderers.

threejs-math

261
from partme-ai/full-stack-skills

three.js math library: Vector2/3/4, Matrix3/4, Quaternion, Euler, Color, Box2/Box3, Sphere, Plane, Ray, Line3, Triangle, Frustum, Cylindrical/Spherical coords, MathUtils, and Interpolant base classes; addon math utilities such as OBB, Octree, Capsule, ConvexHull, MeshSurfaceSampler. Use for transforms, intersection tests, and spatial queries; for keyframe interpolation tied to AnimationMixer use threejs-animation; for picking implementation use threejs-objects with Raycaster.

threejs-materials

261
from partme-ai/full-stack-skills

Classic three.js materials (non-Node): MeshStandardMaterial, MeshPhysicalMaterial, Phong/Lambert/Toon/Basic, Line/Points/Sprite materials, MeshMatcapMaterial, MeshNormalMaterial, depth/distance materials, ShaderMaterial and RawShaderMaterial. Use when tuning PBR maps, transparency, depth write, skinning flags, or writing GLSL in ShaderMaterial; for TSL/NodeMaterial/WebGPU shader graphs use threejs-node-tsl instead.

threejs-loaders

261
from partme-ai/full-stack-skills

three.js asset I/O using LoadingManager, Cache, FileLoader, image and texture loaders, GLTFLoader with DRACOLoader and KTX2Loader, and common format loaders under Addons; symmetric exporters such as GLTFExporter and texture/buffer exporters. Use when loading or exporting models, HDR, LUT, fonts, or compressed textures; for runtime Texture object parameters after load use threejs-textures; for scene graph placement use threejs-objects.

threejs-helpers

261
from partme-ai/full-stack-skills

Debug and visualization helpers in three.js Core Helpers (AxesHelper, GridHelper, CameraHelper, light helpers, SkeletonHelper, bounding box helpers, PlaneHelper, PolarGridHelper, ArrowHelper) and Addons Helpers (VertexNormalsHelper, VertexTangentsHelper, RectAreaLightHelper, LightProbeHelper, ViewHelper, OctreeHelper, TextureHelper, PositionalAudioHelper, AnimationPathHelper, RapierHelper). Use only for development and editor overlays—not for shipping art; for gizmo-style manipulation use threejs-controls.

threejs-geometries

261
from partme-ai/full-stack-skills

three.js geometry authoring: BufferGeometry, typed BufferAttribute and interleaved layouts, InstancedBufferGeometry, primitive Geometries (box/sphere/torus/etc.), ExtrudeGeometry and Shape/Path/Curve from Extras, WireframeGeometry, and addon geometries such as TextGeometry, DecalGeometry, RoundedBoxGeometry. Use when building custom buffer geometries, extruding shapes, or using primitive geometry constructors; for animation morph targets see threejs-animation; for merging buffers see BufferGeometryUtils addon.