skills.rest
ayofemiade
ayofemiadeCOMMUNITY
Explore all skills by this author →
GitHub

threejs-lighting

Configures Three.js light types, shadows, and image-based environment lighting.

Updated Jun 30, 2026
Search Tags:#webgl#three.js#3d graphics#IBL#lighting#shadows#HDR
One-click install
npx skills add https://github.com/ayofemiade/cleva --skill threejs-lighting-ayofemiade
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-lighting
Source: https://github.com/ayofemiade/cleva/tree/main/.claude/skills/threejs-lighting
Command: npx skills add https://github.com/ayofemiade/cleva --skill threejs-lighting-ayofemiade

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires three.

What problem does it solve? Setting up realistic lighting in Three.js requires choosing among six light types, tuning shadow cameras and bias values, and configuring HDR environment maps, which is error-prone without a reference. ## Core Features & Use Cases - Light Type Configuration: Covers AmbientLight, HemisphereLight, DirectionalLight, PointLight, SpotLight, and RectAreaLight with constructor parameters and runtime properties. - Shadow Setup and Optimization: Explains shadow map types, camera frustums, bias tuning to fix shadow acne, and performance trade-offs of map sizes. - Environment Lighting (IBL): Demonstrates loading HDR environment maps with RGBELoader and PMREMGenerator, plus light probes and common setups like three-point lighting. - Use Case: When building an outdoor daylight scene, use this Skill to configure a shadow-casting DirectionalLight as the sun, add a HemisphereLight for sky ambient, and tune the shadow camera frustum. ## Quick Start Use the threejs-lighting skill to add a directional light with soft shadows and an HDR environment map to my Three.js scene.

Frequently Asked Questions about threejs-lighting

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add shadows to a Three.js scene?▼

Enable shadows on the renderer with renderer.shadowMap.enabled = true and set a shadow map type like THREE.PCFSoftShadowMap. Then set castShadow = true on the light and meshes, and receiveShadow = true on surfaces like floors.

Which Three.js light type should I use for sunlight?▼

DirectionalLight simulates sunlight because it emits parallel rays from a distant source. Position it away from the scene, point its target at the origin, and enable castShadow with an orthographic shadow camera covering the scene area.

How do I fix shadow acne in Three.js?▼

Shadow acne is fixed by adjusting shadow bias values on the light. Set light.shadow.bias to a small negative value like -0.0001 and light.shadow.normalBias around 0.02 to offset the shadow depth along surface normals.

Does RectAreaLight support shadows in Three.js?▼

RectAreaLight does not cast shadows natively in Three.js and only works with MeshStandardMaterial and MeshPhysicalMaterial. It also requires calling RectAreaLightUniformsLib.init() before use, and shadows need custom solutions.

How do I set up HDR environment lighting in Three.js?▼

Load an HDR file with RGBELoader, set its mapping to THREE.EquirectangularReflectionMapping, and assign it to scene.environment. For better reflections, use PMREMGenerator to prefilter the texture before assigning it.

Why is my Three.js scene slow with many lights?▼

Each light adds shader complexity, so limit the total light count and disable shadows on lights that do not need them. Use smaller shadow maps (512-1024), tight shadow frustums, and light layers to exclude unaffected objects.

Related Skills

Explore More Software Engineering Skills→
TumeloRamaphosaTumeloRamaphosa

threejs-webgl

Create interactive Three.js 3D scenes with WebGL or WebGPU.

Community
Advanced
imanlangaranimanlangaran
1

threejs-impl-post-processing

Implements Three.js post-processing pipelines with EffectComposer, passes, and pmndrs/postprocessing.

Community
Advanced
ClinscottClinscott

threejs-materials

Configure Three.js materials to optimize visual results across meshes and textures.

Community
Intermediate
Jatinkrmahato993203Jatinkrmahato993203

threejs-r3f

Implements 3D scenes, shaders, and postprocessing effects with Three.js and React Three Fiber.

Community
Advanced