skills.rest
divinaarmuela
divinaarmuelaCOMMUNITY
Explore all skills by this author →
GitHub

threejs-lighting

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

Updated Apr 19, 2026
Search Tags:#javascript#webgl#three.js#3d graphics#lighting#shadows#ibl
One-click install
npx skills add https://github.com/divinaarmuela/Content --skill threejs-lighting-divinaarmuela
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-lighting
Source: https://github.com/divinaarmuela/Content/tree/main/.claude/skills/threejs-lighting
Command: npx skills add https://github.com/divinaarmuela/Content --skill threejs-lighting-divinaarmuela

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 Setup: Code patterns for AmbientLight, HemisphereLight, DirectionalLight, PointLight, SpotLight, and RectAreaLight with their key properties. - Shadow Configuration: Enable shadow maps, tune shadow camera frustums, fix shadow acne with bias values, and optimize shadow map resolution. - Environment Lighting (IBL): Load HDR environment maps with RGBELoader and PMREMGenerator, plus light probes and cube textures. - Use Case: When building an outdoor 3D scene, use this Skill to set up a directional sun light with shadows, hemisphere sky lighting, and an HDR environment map for realistic PBR reflections. ## Quick Start Set up a Three.js scene with a directional light casting soft shadows and an HDR environment map for image-based lighting.

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, set light.castShadow = true on the light, and set castShadow or receiveShadow on meshes. Use THREE.PCFSoftShadowMap for softer shadow edges.

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

DirectionalLight simulates sunlight because it emits parallel rays from a distant source and supports shadows. Pair it with a HemisphereLight for sky and ground ambient color in outdoor scenes.

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 to around 0.02 to offset surfaces along their normals.

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 do I use an HDR environment map for lighting in Three.js?▼

Load the 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.

Related Skills

Explore More Software Engineering Skills→
TenBeltzTenBeltz

threejs-webgl

Create interactive 3D scenes with Three.js using WebGL rendering.

Official
Advanced
RosyGameStudioRosyGameStudio

bloom

Implement Jimenez dual-filter bloom post-processing for SDL GPU projects.

Official
Advanced
capella-hotel-groupcapella-hotel-group

threejs-textures

Implements Three.js texture loading, UV mapping, environment maps, and render targets.

Official
Intermediate
jonathanbelolojonathanbelolo
3

composable-svelte-graphics

Create declarative 3D scenes in Svelte with WebGPU/WebGL rendering.

Community
Advanced