skills.rest
zamansepeti43
zamansepeti43COMMUNITY
Explore all skills by this author →
GitHub

threejs-lighting

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

Updated Sep 1, 2026
Search Tags:#javascript#webgl#three.js#3d graphics#lighting#shadows#ibl
One-click install
npx skills add https://github.com/zamansepeti43/c-rak-agent --skill threejs-lighting-zamansepeti43
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-lighting
Source: https://github.com/zamansepeti43/c-rak-agent/tree/main/video-engine/.agents/skills/threejs-lighting
Command: npx skills add https://github.com/zamansepeti43/c-rak-agent --skill threejs-lighting-zamansepeti43

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires three.

What problem does it solve? Setting up realistic lighting in Three.js requires choosing the right light types, tuning shadow cameras, and configuring 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 settings, and optimize shadow map sizes. - Environment Lighting (IBL): Load HDR environment maps with RGBELoader and PMREMGenerator, plus light probes and common setups like three-point lighting. - Use Case: When building an outdoor 3D scene, use this Skill to add a directional sun light with shadows, hemisphere sky lighting, and an HDR environment map. ## Quick Start Set up a Three.js scene with a directional light casting soft shadows and an HDR environment map for realistic 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 castShadow on the light, and set castShadow or receiveShadow on meshes. Tune shadow.mapSize and shadow.bias to balance quality and avoid shadow acne.

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 HemisphereLight for sky and ground ambient color in outdoor scenes.

Does RectAreaLight support shadows in Three.js?▼

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

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

Shadow acne is fixed by adjusting shadow.bias (for example -0.0001) and shadow.normalBias (for example 0.02). Also tighten the shadow camera frustum so the depth map resolution is used efficiently.

How do I use an HDR environment map for lighting in Three.js?▼

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

Related Skills

Explore More Software Engineering Skills→
soeiroosoeiroo

threejs-materials

Select and tune Three.js materials for real-time 3D scenes.

Community
Intermediate
hanzoaihanzoai

threejs-postprocessing

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

Official
Intermediate
capella-hotel-groupcapella-hotel-group

threejs-textures

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

Official
Intermediate
mandexonlamandexonla

unity-light

Create, update, and query Unity Directional, Point, Spot, and Area lights.

Community
Intermediate