skills.rest
ratnesh-maurya
ratnesh-mauryaCOMMUNITY
Explore all skills by this author →
Website𝕏@_ratneshmauryaGitHub

threejs-lighting

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

1|Updated Aug 17, 2025
Search Tags:#webgl#three.js#3d graphics#lighting#shadows#ibl#environment map
One-click install
npx skills add https://github.com/ratnesh-maurya/mdconverter --skill threejs-lighting-ratnesh-maurya
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-lighting
Source: https://github.com/ratnesh-maurya/mdconverter/tree/main/.claude/skills/threejs-lighting
Command: npx skills add https://github.com/ratnesh-maurya/mdconverter --skill threejs-lighting-ratnesh-maurya

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 involves many interdependent parameters that are easy to get wrong. ## Core Features & Use Cases - Light Type Reference: Covers AmbientLight, HemisphereLight, DirectionalLight, PointLight, SpotLight, and RectAreaLight with constructor parameters and shadow support details. - Shadow Configuration: Explains enabling shadow maps, tuning shadow camera frustums, fixing shadow acne with bias, and optimizing shadow map sizes for performance. - Environment Lighting (IBL): Demonstrates loading HDR environment maps with RGBELoader and PMREMGenerator, plus light probes and common setups like three-point lighting and outdoor daylight. - Use Case: When building a 3D product viewer, use this Skill to add a directional sun light with soft shadows, an HDR environment map for realistic reflections, and hemisphere fill light for an outdoor look. ## 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 THREE.PCFSoftShadowMap. Then set castShadow = true on the light and meshes, and receiveShadow = true on surfaces like the floor.

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. Position it away from the scene and aim its target at the area you want illuminated.

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 the shadow along surface 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 add an HDR environment map 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.

Why is my Three.js scene slow with many lights?▼

Each light adds shader complexity, so limit the total light count and disable shadows on lights that do not need them. Use smaller shadow maps, tight shadow camera frustums, and light layers to exclude unaffected objects.

Related Skills

Explore More Software Engineering Skills→
trungdo9trungdo9
3

threejs

Build 3D web applications with Three.js scenes, cameras, and animations.

Community
Advanced
tc9011tc9011

threejs-postprocessing

Apply post-processing effects to Three.js scenes with EffectComposer passes.

Community
Intermediate
yogaprasetya22yogaprasetya22

threejs-lighting

Configure Three.js lighting and shadows for realistic scenes.

Community
Basic
RosyGameStudioRosyGameStudio

basic-lighting

Implement Blinn-Phong per-pixel lighting with SDL3 GPU API and HLSL shaders.

Official
Intermediate