threejs-lighting
Complete Three.js lighting system covering all light types, shadows, and environment-based illumination.
- Supports six light types (ambient, hemisphere, directional, point, spot, rect area) with detailed shadow configuration for each, including map size, camera frustum, bias tuning, and softness controls
- Includes environment lighting via HDR and cube textures with PMREM generation, light probes for ambient capture, and contact shadows as a fast alternative
- Provides three production-ready setups: three-point studio lighting, outdoor daylight with hemisphere gradients, and indoor area lighting with multiple rect lights
- Features performance optimization guidance including light layer masking, shadow frustum tightening, and baked lighting strategies for complex scenes
Three.js Lighting
Quick Start
import * as THREE from "three";
// Basic lighting setup
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(5, 5, 5);
scene.add(directionalLight);
Light Types Overview
| Light | Description | Shadow Support | Cost |
More from cloudai-x/threejs-skills
threejs-animation
Three.js animation - keyframe animation, skeletal animation, morph targets, animation mixing. Use when animating objects, playing GLTF animations, creating procedural motion, or blending animations.
5.4Kthreejs-fundamentals
Three.js scene setup, cameras, renderer, Object3D hierarchy, coordinate systems. Use when setting up 3D scenes, creating cameras, configuring renderers, managing object hierarchies, or working with transforms.
4.3Kthreejs-shaders
Three.js shaders - GLSL, ShaderMaterial, uniforms, custom effects. Use when creating custom visual effects, modifying vertices, writing fragment shaders, or extending built-in materials.
3.6Kthreejs-geometry
Three.js geometry creation - built-in shapes, BufferGeometry, custom geometry, instancing. Use when creating 3D shapes, working with vertices, building custom meshes, or optimizing with instanced rendering.
3.5Kthreejs-interaction
Three.js interaction - raycasting, controls, mouse/touch input, object selection. Use when handling user input, implementing click detection, adding camera controls, or creating interactive 3D experiences.
3.3Kthreejs-materials
Three.js materials - PBR, basic, phong, shader materials, material properties. Use when styling meshes, working with textures, creating custom shaders, or optimizing material performance.
3.2K