skills.rest
josippapez
josippapezCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

threejs-lighting

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

Updated May 5, 2026
Search Tags:#webgl#three.js#3d graphics#lighting#shadows#hdr#ibl
One-click install
npx skills add https://github.com/josippapez/ai-setup --skill threejs-lighting-josippapez
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-lighting
Source: https://github.com/josippapez/ai-setup/tree/main/claude/plugins/better-design/skills/threejs-lighting
Command: npx skills add https://github.com/josippapez/ai-setup --skill threejs-lighting-josippapez

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, properties, and cost comparisons. - Shadow Configuration: Provides shadow map setup, camera frustum tuning, bias fixes for shadow acne, and performance optimization guidance. - Environment Lighting (IBL): Shows HDR loading with RGBELoader, PMREMGenerator usage, cube textures, and light probes for realistic PBR lighting. - 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 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 and set a shadow map type like PCFSoftShadowMap. Then set castShadow on the light and meshes, and receiveShadow on surfaces like the floor.

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

Use DirectionalLight for sunlight since it emits parallel rays simulating a distant source. Pair it with a HemisphereLight for sky and ground ambient color to complete an outdoor daylight setup.

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, use PMREMGenerator to prefilter the texture before assigning it.

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

Shadow acne comes from depth precision conflicts between the shadow map and surface. Fix it by setting a small negative shadow.bias (e.g., -0.0001) and a shadow.normalBias around 0.02 on the light.

Does RectAreaLight support shadows in Three.js?▼

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

How can I improve Three.js lighting performance?▼

Limit the number of lights, use smaller shadow maps (512-1024), tighten shadow camera frustums, and disable shadows on lights and meshes that do not need them. Light layers can exclude objects from specific lights.

Related Skills

Explore More Design & Creative Skills→
soeiroosoeiroo

threejs-materials

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

Community
Intermediate
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
MonichreMonichre

threejs-lighting

Configure ambient, hemisphere, directional, point, spot, and rect area lights in Three.js scenes.

Community
Advanced