skills.rest
yogaprasetya22
yogaprasetya22COMMUNITY
Explore all skills by this author →
WebsiteGitHub

threejs-lighting

Configure Three.js lighting and shadows for realistic scenes.

Updated May 18, 2026
Search Tags:#webgl#three.js#lighting#pbr#shadows#ibl#environment lighting
One-click install
npx skills add https://github.com/yogaprasetya22/mmorpg --skill threejs-lighting-yogaprasetya22
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-lighting
Source: https://github.com/yogaprasetya22/mmorpg/tree/main/frontend/.agents/skills/threejs-lighting
Command: npx skills add https://github.com/yogaprasetya22/mmorpg --skill threejs-lighting-yogaprasetya22

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves inconsistent, unrealistic, or expensive lighting setups by giving practical guidance for selecting light types, configuring shadows, and using environment lighting in Three.js.

Core Features & Use Cases

  • Light types and shadow support: Choose the right light (Ambient, Hemisphere, Directional, Point, Spot, RectArea) with an understanding of shadow capabilities and performance cost.
  • Shadow configuration and optimization: Enable renderer and per-light shadows, tune shadow map sizes, camera frustums, bias values, and use helpers to debug artifacts.
  • Environment lighting (IBL) and reflections: Use HDR environment maps via RGBELoader and PMREM for consistent PBR material response across a scene.

Quick Start

Configure your scene by adding an AmbientLight for base illumination and a shadow-casting DirectionalLight with tuned shadow map size, frustum bounds, and bias.

Frequently Asked Questions about threejs-lighting

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up realistic Three.js lighting for an indoor or outdoor scene?▼

To configure Three.js shadows, enable renderer shadow maps, set castShadow and receiveShadow on objects and lights, then tune shadow map sizes, light camera frustum bounds, and bias values to eliminate artifacts like shadow acne.

What's the best way to use HDR environment maps for PBR materials in Three.js?▼

Using HDR environment maps for PBR materials in Three.js involves loading HDR files via RGBELoader and processing them through PMREM to generate consistent environment lighting and reflections across scene objects.

Which Three.js light types support shadows and how do they differ in performance cost?▼

Three.js light types that support shadows include Directional, Point, and Spot lights, while Ambient, Hemisphere, and RectArea lights do not cast shadows; each shadow-casting light carries distinct performance costs based on shadow map resolution and frustum coverage.

Why do my Three.js shadows look pixelated or show shadow acne artifacts?▼

Pixelated Three.js shadows and shadow acne artifacts occur when shadow map sizes are too low or bias values are untuned; increase shadow map resolution, adjust the light camera frustum bounds, and modify bias settings using shadow helpers to debug.

Do I need PMREM to use image-based lighting with PBR materials in Three.js?▼

PMREM is needed for image-based lighting in Three.js when using HDR environment maps, as it pre-filters and processes cube textures to ensure accurate PBR material responses and consistent reflections across the scene.

Related Skills

Explore More Design & Creative Skills→
NammDevNammDev
2

threejs

Build and render interactive 3D web scenes with Three.js.

Community
Advanced
NITRR-OfficialNITRR-Official
4

threejs-postprocessing

Apply bloom, depth of field, and color correction to Three.js scenes.

Official
Advanced
mitgar14mitgar14

threejs-lighting

Configure Three.js scene lighting with light selection, shadows, and environment illumination.

Community
Intermediate
mmdonohuemmdonohue
1

threejs-shaders

Implement custom GLSL shaders in Three.js with ShaderMaterial or RawShaderMaterial.

Community
Intermediate