skills.rest
brunoolf
brunoolfCOMMUNITY
Explore all skills by this author →
GitHub

threejs-lighting

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

Updated Aug 12, 2026
Search Tags:#webgl#three.js#3d#lighting#shadows#hdr#ibl
One-click install
npx skills add https://github.com/brunoolf/frontend-craft --skill threejs-lighting-brunoolf
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-lighting
Source: https://github.com/brunoolf/frontend-craft/tree/main/skills/threejs-lighting
Command: npx skills add https://github.com/brunoolf/frontend-craft --skill threejs-lighting-brunoolf

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, all of which involve error-prone boilerplate. ## Core Features & Use Cases - Light Type Reference: Covers AmbientLight, HemisphereLight, DirectionalLight, PointLight, SpotLight, and RectAreaLight with constructor parameters and runtime properties. - Shadow Configuration: Provides shadow map setup, camera frustum tuning, bias fixes for shadow acne, and performance trade-offs for map sizes. - Environment Lighting (IBL): Loads HDR environment maps via RGBELoader and PMREMGenerator, plus light probes and cube textures. - Use Case: When building a product showcase scene, apply the three-point lighting recipe with a shadow-casting key light and an HDR environment for realistic PBR reflections. ## Quick Start Add three-point lighting 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 type like THREE.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. It supports shadows with an orthographic shadow camera whose frustum you tune with left, right, top, bottom, near, and far values.

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 depth comparison along surface normals.

Does RectAreaLight cast shadows in Three.js?▼

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

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, process it through PMREMGenerator before assigning.

Why does my Three.js scene run slowly with many lights?▼

Each light adds shader complexity and shadow-casting lights are especially expensive. Reduce light count, use smaller shadow maps like 512 or 1024, tighten shadow camera frustums, and use light layers to exclude unaffected objects.

Related Skills

Explore More Design & Creative Skills→
TumeloRamaphosaTumeloRamaphosa

threejs-webgl

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

Community
Advanced
hanzoaihanzoai

threejs-postprocessing

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

Official
Intermediate
ClinscottClinscott

threejs-materials

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

Community
Intermediate
lrbjklrbjk

unity-light

Configure and batch-update Unity scene lights and probes.

Community
Intermediate