skills.rest
kodingvibes
kodingvibesOFFICIAL
Explore all skills by this author →
WebsiteGitHub

threejs-lighting

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

2|10|Updated Jul 28, 2026
Search Tags:#webgl#three.js#3d graphics#IBL#lighting#shadows#HDR
One-click install
npx skills add https://github.com/kodingvibes/gamejam-2026 --skill threejs-lighting-kodingvibes
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-lighting
Source: https://github.com/kodingvibes/gamejam-2026/tree/main/participantes/madkoding/.agents/skills/threejs-lighting
Command: npx skills add https://github.com/kodingvibes/gamejam-2026 --skill threejs-lighting-kodingvibes

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires three.

What problem does it solve? Setting up realistic lighting in Three.js requires choosing between six light types, tuning shadow cameras, and configuring HDR 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: Shadow map types, camera frustum tuning, bias settings to fix shadow acne, and performance trade-offs. - Environment Lighting (IBL): HDR loading with RGBELoader, PMREMGenerator, cube textures, and light probes for PBR materials. - Use Case: When building a 3D game scene, use this Skill to add a sun with shadows, hemisphere sky lighting, and an HDR environment map without memorizing the Three.js API. ## Quick Start Add a directional light with soft shadows and a hemisphere light 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 in Three.js by setting renderer.shadowMap.enabled to true, setting castShadow on the light, and setting castShadow or receiveShadow on meshes. Tune shadow.mapSize and shadow.camera bounds for quality, and use shadow.bias to fix shadow acne.

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

DirectionalLight simulates sunlight because it emits parallel rays from a distant source and supports shadows. 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, and shadows need custom solutions.

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

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

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

Blocky shadows come from low shadow.mapSize values or a loose shadow camera frustum. Acne artifacts are fixed by adjusting shadow.bias and shadow.normalBias, typically -0.0001 and 0.02 respectively.

Related Skills

Explore More Software Engineering Skills→
soeiroosoeiroo

threejs-materials

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

Community
Intermediate
xingBaGanxingBaGan

threejs-postprocessing

Apply bloom, depth of field, and custom shaders to Three.js scenes.

Community
Advanced
capella-hotel-groupcapella-hotel-group

threejs-textures

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

Official
Intermediate
CarlosQ96CarlosQ96

threejs-materials

Generate Three.js material configurations for PBR, basic, toon, shader, and physical materials.

Community
Intermediate