threejs-lighting

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

1|Updated Aug 20, 2023

Search Tags:#webgl #three.js #3d graphics #lighting #shadows #hdr #ibl

Ready to run

npx skills add https://github.com/imanlangaran/mini-projects --skill threejs-lighting-imanlangaran

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: threejs-lighting
Source: https://github.com/imanlangaran/mini-projects/tree/main/building-sell/.claude/skills/threejs-lighting
Command: npx skills add https://github.com/imanlangaran/mini-projects --skill threejs-lighting-imanlangaran

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 error-prone parameters and common pitfalls like shadow acne. ## Core Features & Use Cases - Light Type Reference: Covers AmbientLight, HemisphereLight, DirectionalLight, PointLight, SpotLight, and RectAreaLight with constructor parameters and runtime properties. - Shadow Configuration: Explains enabling shadow maps, sizing shadow cameras, fixing shadow acne with bias settings, and optimizing shadow performance. - Environment Lighting (IBL): Shows HDR loading with RGBELoader, PMREM generation, cube textures, and light probes for realistic PBR lighting. - Use Case: When building an outdoor 3D product viewer, use this Skill to set up a directional sun light with tuned shadows, hemisphere sky lighting, and an HDR environment map. ## Quick Start Ask the AI to add a directional light with soft shadows and an HDR environment map to your 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 setting castShadow or receiveShadow on meshes. Tune shadow.mapSize and the shadow camera frustum for quality, and use shadow.bias to fix acne artifacts.

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 at low cost. Pair it with a HemisphereLight for sky and ground ambient color in outdoor scenes.

How do I set up HDR environment lighting in Three.js?▼

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

Does RectAreaLight cast 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.

Why do my Three.js shadows look blocky or have stripes?▼

Blocky shadows come from low shadow map resolution, so increase shadow.mapSize to 1024 or 2048. Striped shadow acne is fixed by adjusting shadow.bias and shadow.normalBias, and by tightening the shadow camera frustum.