Skip to main content Home Creators beko2210 firstbrain threejs-lighting
threejs-lighting Three.js lighting - light types, shadows, environment lighting. Use when adding lights, configuring shadows, setting up IBL, or optimizing lighting performance.
Jump to install Skills Marketplace Discover and explore AI skills built by the community.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Show prompt details A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/BEKO2210/Firstbrain --skill threejs-lightingThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Download Zip Downloading... More from this repository
Related occupations SOC
Based on SOC occupation classification
name threejs-lighting description Three.js lighting - light types, shadows, environment lighting. Use when adding lights, configuring shadows, setting up IBL, or optimizing lighting performance. type skill created 2026-02-27T00:00:00.000Z domain design-creative category 3d-animation risk unknown source community tags ["skill","design-creative","3d-animation","threejs","lighting"]
Three.js Lighting
When to Use
You need to add or tune lighting in a Three.js scene.
The task involves light types, shadows, environment lighting, or lighting performance tradeoffs.
You want to improve scene readability, realism, or mood through Three.js lighting setup.
Quick Start
import * as THREE from "three" ;
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 AmbientLight Uniform everywhere No Very Low HemisphereLight Sky/ground gradient No Very Low DirectionalLight Parallel rays (sun) Yes Low PointLight Omnidirectional (bulb) Yes Medium SpotLight Cone-shaped Yes Medium RectAreaLight Area light (window) No* High
*RectAreaLight shadows require custom solutions
AmbientLight
Illuminates all objects equally. No direction, no shadows.
const ambient = new THREE .AmbientLight (0xffffff , 0.5 );
scene.add (ambient);
ambient.color .set (0xffffcc );
ambient.intensity = 0.3 ;
HemisphereLight Gradient from sky to ground color. Good for outdoor scenes.
const hemi = new THREE .HemisphereLight (0x87ceeb , 0x8b4513 , 0.6 );
hemi.position .set (0 , 50 , 0 );
scene.add (hemi);
hemi.color ;
hemi.groundColor ;
hemi.intensity ;
DirectionalLight Parallel light rays. Simulates distant light source (sun).
const dirLight = new THREE .DirectionalLight (0xffffff , 1 );
dirLight.position .set (5 , 10 , 5 );
dirLight.target .position .set (0 , 0 , 0 );
scene.add (dirLight.target );
scene.add (dirLight);
DirectionalLight Shadows dirLight.castShadow = true ;
dirLight.shadow .mapSize .width = 2048 ;
dirLight.shadow .mapSize .height = 2048 ;
dirLight.shadow .camera .near = 0.5 ;
dirLight.shadow .camera .far = 50 ;
dirLight.shadow .camera .left = -10 ;
dirLight.shadow .camera .right = 10 ;
dirLight.shadow .camera .top = 10 ;
dirLight.shadow .camera .bottom = -10 ;
dirLight.shadow .radius = 4 ;
dirLight.shadow .bias = -0.0001 ;
dirLight.shadow .normalBias = 0.02 ;
const helper = new THREE .CameraHelper (dirLight.shadow .camera );
scene.add (helper);
PointLight Emits light in all directions from a point. Like a light bulb.
const pointLight = new THREE .PointLight (0xffffff , 1 , 100 , 2 );
pointLight.position .set (0 , 5 , 0 );
scene.add (pointLight);
pointLight.distance ;
pointLight.decay ;
PointLight Shadows pointLight.castShadow = true ;
pointLight.shadow .mapSize .width = 1024 ;
pointLight.shadow .mapSize .height = 1024 ;
pointLight.shadow .camera .near = 0.5 ;
pointLight.shadow .camera .far = 50 ;
pointLight.shadow .bias = -0.005 ;
SpotLight Cone-shaped light. Like a flashlight or stage light.
const spotLight = new THREE .SpotLight (0xffffff , 1 , 100 , Math .PI / 6 , 0.5 , 2 );
spotLight.position .set (0 , 10 , 0 );
spotLight.target .position .set (0 , 0 , 0 );
scene.add (spotLight.target );
scene.add (spotLight);
spotLight.angle ;
spotLight.penumbra ;
spotLight.distance ;
spotLight.decay ;
SpotLight Shadows spotLight.castShadow = true ;
spotLight.shadow .mapSize .width = 1024 ;
spotLight.shadow .mapSize .height = 1024 ;
spotLight.shadow .camera .near = 0.5 ;
spotLight.shadow .camera .far = 50 ;
spotLight.shadow .camera .fov = 30 ;
spotLight.shadow .bias = -0.0001 ;
spotLight.shadow .focus = 1 ;
RectAreaLight Rectangular area light. Great for soft, realistic lighting.
import { RectAreaLightHelper } from "three/examples/jsm/helpers/RectAreaLightHelper.js" ;
import { RectAreaLightUniformsLib } from "three/examples/jsm/lights/RectAreaLightUniformsLib.js" ;
RectAreaLightUniformsLib .init ();
const rectLight = new THREE .RectAreaLight (0xffffff , 5 , 4 , 2 );
rectLight.position .set (0 , 5 , 0 );
rectLight.lookAt (0 , 0 , 0 );
scene.add (rectLight);
const helper = new RectAreaLightHelper (rectLight);
rectLight.add (helper);
Shadow Setup
Enable Shadows
renderer.shadowMap .enabled = true ;
renderer.shadowMap .type = THREE .PCFSoftShadowMap ;
light.castShadow = true ;
mesh.castShadow = true ;
mesh.receiveShadow = true ;
floor.receiveShadow = true ;
floor.castShadow = false ;
Optimizing Shadows
const d = 10 ;
dirLight.shadow .camera .left = -d;
dirLight.shadow .camera .right = d;
dirLight.shadow .camera .top = d;
dirLight.shadow .camera .bottom = -d;
dirLight.shadow .camera .near = 0.5 ;
dirLight.shadow .camera .far = 30 ;
dirLight.shadow .bias = -0.0001 ;
dirLight.shadow .normalBias = 0.02 ;
Contact Shadows (Fake, Fast) import { ContactShadows } from "three/examples/jsm/objects/ContactShadows.js" ;
const contactShadows = new ContactShadows ({
resolution : 512 ,
blur : 2 ,
opacity : 0.5 ,
scale : 10 ,
position : [0 , 0 , 0 ],
});
scene.add (contactShadows);
Light Helpers import { RectAreaLightHelper } from "three/examples/jsm/helpers/RectAreaLightHelper.js" ;
const dirHelper = new THREE .DirectionalLightHelper (dirLight, 5 );
scene.add (dirHelper);
const pointHelper = new THREE .PointLightHelper (pointLight, 1 );
scene.add (pointHelper);
const spotHelper = new THREE .SpotLightHelper (spotLight);
scene.add (spotHelper);
const hemiHelper = new THREE .HemisphereLightHelper (hemiLight, 5 );
scene.add (hemiHelper);
const rectHelper = new RectAreaLightHelper (rectLight);
rectLight.add (rectHelper);
dirHelper.update ();
spotHelper.update ();
Environment Lighting (IBL) Image-Based Lighting using HDR environment maps.
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader.js" ;
const rgbeLoader = new RGBELoader ();
rgbeLoader.load ("environment.hdr" , (texture ) => {
texture.mapping = THREE .EquirectangularReflectionMapping ;
scene.environment = texture;
scene.background = texture;
scene.backgroundBlurriness = 0 ;
scene.backgroundIntensity = 1 ;
});
const pmremGenerator = new THREE .PMREMGenerator (renderer);
pmremGenerator.compileEquirectangularShader ();
rgbeLoader.load ("environment.hdr" , (texture ) => {
const envMap = pmremGenerator.fromEquirectangular (texture).texture ;
scene.environment = envMap;
texture.dispose ();
pmremGenerator.dispose ();
});
Cube Texture Environment const cubeLoader = new THREE .CubeTextureLoader ();
const envMap = cubeLoader.load ([
"px.jpg" ,
"nx.jpg" ,
"py.jpg" ,
"ny.jpg" ,
"pz.jpg" ,
"nz.jpg" ,
]);
scene.environment = envMap;
scene.background = envMap;
Light Probes (Advanced) Capture lighting from a point in space for ambient lighting.
import { LightProbeGenerator } from "three/examples/jsm/lights/LightProbeGenerator.js" ;
const lightProbe = new THREE .LightProbe ();
scene.add (lightProbe);
lightProbe.copy (LightProbeGenerator .fromCubeTexture (cubeTexture));
const cubeCamera = new THREE .CubeCamera (
0.1 ,
100 ,
new THREE .WebGLCubeRenderTarget (256 ),
);
cubeCamera.update (renderer, scene);
lightProbe.copy (
LightProbeGenerator .fromCubeRenderTarget (renderer, cubeCamera.renderTarget ),
);
Common Lighting Setups
Three-Point Lighting
const keyLight = new THREE .DirectionalLight (0xffffff , 1 );
keyLight.position .set (5 , 5 , 5 );
scene.add (keyLight);
const fillLight = new THREE .DirectionalLight (0xffffff , 0.5 );
fillLight.position .set (-5 , 3 , 5 );
scene.add (fillLight);
const backLight = new THREE .DirectionalLight (0xffffff , 0.3 );
backLight.position .set (0 , 5 , -5 );
scene.add (backLight);
const ambient = new THREE .AmbientLight (0x404040 , 0.3 );
scene.add (ambient);
Outdoor Daylight
const sun = new THREE .DirectionalLight (0xffffcc , 1.5 );
sun.position .set (50 , 100 , 50 );
sun.castShadow = true ;
scene.add (sun);
const hemi = new THREE .HemisphereLight (0x87ceeb , 0x8b4513 , 0.6 );
scene.add (hemi);
Indoor Studio
RectAreaLightUniformsLib .init ();
const light1 = new THREE .RectAreaLight (0xffffff , 5 , 2 , 2 );
light1.position .set (3 , 3 , 3 );
light1.lookAt (0 , 0 , 0 );
scene.add (light1);
const light2 = new THREE .RectAreaLight (0xffffff , 3 , 2 , 2 );
light2.position .set (-3 , 3 , 3 );
light2.lookAt (0 , 0 , 0 );
scene.add (light2);
const ambient = new THREE .AmbientLight (0x404040 , 0.2 );
scene.add (ambient);
Light Animation const clock = new THREE .Clock ();
function animate (const time = clock.getElapsedTime ();
light.position .x = Math .cos (time) * 5 ;
light.position .z = Math .sin (time) * 5 ;
light.intensity = 1 + Math .sin (time * 2 ) * 0.5 ;
light.color .setHSL ((time * 0.1 ) % 1 , 1 , 0.5 );
lightHelper.update ();
}
Performance Tips
Limit light count : Each light adds shader complexityUse baked lighting : For static scenes, bake to texturesSmaller shadow maps : 512-1024 often sufficientTight shadow frustums : Only cover needed areaDisable unused shadows : Not all lights need shadowsUse light layers : Exclude objects from certain lights
light.layers .set (1 );
mesh.layers .enable (1 );
otherMesh.layers .disable (1 );
mesh.castShadow = true ;
mesh.receiveShadow = true ;
decorMesh.castShadow = false ;
See Also
threejs-materials - Material light responsethreejs-textures - Lightmaps and environment mapsthreejs-postprocessing - Bloom and other light effects
Connections
Domain: [[Design & Kreativitaet]]Kategorie: [[3D & Animation]]Navigation: [[Skills Uebersicht]], [[Home]] 