skills.rest
mooch10
mooch10COMMUNITY
Explore all skills by this author →
GitHub

threejs-lighting

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

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

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, which is error-prone without a reference. ## 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 each shadow-casting light. - Environment Lighting (IBL): Shows HDR loading with RGBELoader, PMREMGenerator usage, cube textures, and light probes for PBR materials. - Use Case: When building a product configurator scene, use this Skill to set up three-point lighting with soft shadows and an HDR environment map for realistic material reflections. ## 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 by setting renderer.shadowMap.enabled to true, setting castShadow on the light and meshes, and receiveShadow on surfaces like floors. Use THREE.PCFSoftShadowMap for softer shadow edges and tune shadow.mapSize for quality.

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 and shadow.normalBias on the light, typically values like -0.0001 and 0.02. Also tighten the shadow camera frustum so the depth map resolution covers only the needed area.

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, and shadows need custom solutions.

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 so it lights all PBR materials. For better reflections, prefilter it with PMREMGenerator before assigning.

Related Skills

Explore More Software Engineering Skills→
yogaprasetya22yogaprasetya22

threejs-lighting

Configure Three.js lighting and shadows for realistic scenes.

Community
Basic
tc9011tc9011

threejs-postprocessing

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

Community
Intermediate
hanzoaihanzoai

threejs-materials

Guides selection and configuration of Three.js materials for web-based 3D scenes.

Official
Intermediate
RosyGameStudioRosyGameStudio

basic-lighting

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

Official
Intermediate