skills.rest
imanlangaran
imanlangaranCOMMUNITY
Explore all skills by this author →
GitHub

threejs-impl-lighting

Configures Three.js scene lighting including all seven light types, HDR environment maps, and PMREMGenerator.

1|Updated Aug 20, 2023
Search Tags:#webgl#three.js#lighting#3d rendering#ibl#pmremgenerator#environment map
One-click install
npx skills add https://github.com/imanlangaran/mini-projects --skill threejs-impl-lighting-imanlangaran
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-impl-lighting
Source: https://github.com/imanlangaran/mini-projects/tree/main/react/three-gsap/.claude/skills/threejs-impl-lighting
Command: npx skills add https://github.com/imanlangaran/mini-projects --skill threejs-impl-lighting-imanlangaran

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires three, and includes references (resource) components.

What problem does it solve? Setting up realistic lighting in Three.js r160+ scenes is error-prone: physically correct intensity units (lux, candela, nits) blow out scenes without tone mapping, shadow-casting PointLights destroy frame rates, RectAreaLights silently fail without initialization, and environment maps leak GPU memory when PMREMGenerator is not disposed. This Skill provides correct patterns and anti-patterns for every lighting scenario. ## Core Features & Use Cases - All 7 Light Types: Complete API coverage for AmbientLight, HemisphereLight, DirectionalLight, PointLight, SpotLight, RectAreaLight, and LightProbe with correct intensity units and shadow cost budgets. - Image-Based Lighting: Standard RGBELoader/EXRLoader + PMREMGenerator workflow for scene.environment, background, blurriness, intensity, and rotation control. - Anti-Pattern Library: 11 documented mistakes (missing light.target, uninitialized RectAreaLightUniformsLib, missing tone mapping, undisposed PMREMGenerator) with fixes. - Use Case: Building a product showcase scene — apply the three-point lighting recipe (key, fill, rim directional lights) plus a studio HDR environment at reduced intensity for PBR reflections. ## Quick Start Set up lighting for my Three.js scene with a directional sun light, ambient fill, and an HDR environment map using physically correct intensities and tone mapping.

Frequently Asked Questions about threejs-impl-lighting

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

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

Combine a low-intensity AmbientLight or HemisphereLight with at least one DirectionalLight or SpotLight, then add an HDR environment map via PMREMGenerator for PBR reflections. Always set renderer.toneMapping to ACESFilmicToneMapping when using physical intensity values.

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

Load the HDR file with RGBELoader, convert it using PMREMGenerator.fromEquirectangular, then assign the result to scene.environment for IBL lighting and optionally scene.background for a visible backdrop. Dispose both the source texture and the PMREMGenerator afterward.

Why is my Three.js scene completely white or blown out?▼

In Three.js r160+, light intensities use physical units like lux and candela, so values like 50000 exceed the displayable range. Without tone mapping these clamp to white; set renderer.toneMapping to ACESFilmicToneMapping and adjust toneMappingExposure.

Why is my RectAreaLight not working in Three.js?▼

RectAreaLight requires calling RectAreaLightUniformsLib.init() before creation and only affects MeshStandardMaterial and MeshPhysicalMaterial. It also cannot cast shadows, and should be oriented with lookAt() rather than rotation.

Why does my DirectionalLight target position have no effect?▼

The light.target Object3D must be added to the scene graph with scene.add(light.target) for its world matrix to update. Without this, the light direction stays fixed regardless of target position changes. This applies to both DirectionalLight and SpotLight.

How many lights can a Three.js scene have before performance drops?▼

Mobile WebGL budgets around 4-5 real-time lights and desktop 8-16. Shadow-casting PointLights are the most expensive at 6 shadow passes each, so limit them to 1-2 and prefer SpotLights or baked lighting for static scenes.

Related Skills

Explore More Software Engineering Skills→
capella-hotel-groupcapella-hotel-group

threejs-fundamentals

Configure Three.js scenes, cameras, renderers, and Object3D hierarchies for 3D web applications.

Official
Intermediate
ayofemiadeayofemiade

threejs-webgl

Build interactive 3D web scenes with Three.js WebGL and WebGPU renderers.

Community
Advanced
Totes-MickGOATsTotes-MickGOATs
3

godot-3d-materials

Create realistic 3D PBR materials in Godot using StandardMaterial3D.

Community
Advanced
DecioLuvierDecioLuvier

godot-3d-lighting

Implements Godot 3D lighting with shadow cascades, global illumination, and light probes.

Community
Advanced