skills.rest
X-manist
X-manistCOMMUNITY
Explore all skills by this author →
GitHub

threejs-lighting

Configure Three.js lights, shadows, and image-based environment lighting for 3D scenes.

Updated Jul 16, 2026
Search Tags:#webgl#three.js#3d graphics#lighting#shadows#hdr#ibl
One-click install
npx skills add https://github.com/X-manist/Cohmira --skill threejs-lighting-x-manist
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-lighting
Source: https://github.com/X-manist/Cohmira/tree/main/src/builtin-plugins/openmontage/.agents/skills/threejs-lighting
Command: npx skills add https://github.com/X-manist/Cohmira --skill threejs-lighting-x-manist

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 wiring up HDR environment maps, which is error-prone without a reference. ## Core Features & Use Cases - Light Type Setup: Ready-to-use code for AmbientLight, HemisphereLight, DirectionalLight, PointLight, SpotLight, and RectAreaLight with correct parameters. - Shadow Configuration: Enable shadow maps, tune shadow camera frustums, fix shadow acne with bias values, and optimize shadow map sizes. - Environment Lighting (IBL): Load HDR environment maps with RGBELoader and PMREMGenerator, plus light probes and cube textures. - Use Case: When building a product showcase scene, apply the three-point lighting setup with a shadow-casting key light and an HDR environment for realistic PBR reflections. ## Quick Start 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 PCFSoftShadowMap. Then set castShadow on the light and meshes, and receiveShadow on surfaces like the floor.

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

Use DirectionalLight for sunlight because it emits parallel rays simulating a distant source. Pair it with a HemisphereLight for sky and ground ambient color to complete an outdoor daylight setup.

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

Load an HDR file with RGBELoader, set its mapping to EquirectangularReflectionMapping, and assign it to scene.environment. For better reflections, process it through PMREMGenerator before assigning.

Why does my Three.js shadow have acne artifacts?▼

Shadow acne comes from depth precision conflicts between the shadow map and surface. Fix it by setting a small negative shadow.bias like -0.0001 and a shadow.normalBias around 0.02.

Does RectAreaLight support shadows in Three.js?▼

RectAreaLight does not cast shadows natively and only works with MeshStandardMaterial and MeshPhysicalMaterial. It also requires calling RectAreaLightUniformsLib.init() before use.

How can I improve Three.js lighting performance?▼

Limit the number of lights, use smaller shadow maps of 512 to 1024 pixels, tighten shadow camera frustums, disable shadows on lights that do not need them, and use light layers to exclude objects.

Related Skills

Explore More Software Engineering Skills→
yogaprasetya22yogaprasetya22

threejs-lighting

Configure Three.js lighting and shadows for realistic scenes.

Community
Basic
hanzoaihanzoai

threejs-postprocessing

Implement post-processing effects for Three.js scenes using EffectComposer passes.

Official
Intermediate
mmdonohuemmdonohue
1

threejs-textures

Load, configure, and optimize Three.js textures for PBR materials.

Community
Intermediate
lrbjklrbjk

unity-light

Configure and batch-update Unity scene lights and probes.

Community
Intermediate