Skip to main content Skills Marktplatz Entdecken und erkunden Sie KI-Skills, die von der Community erstellt wurden.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Prompt-Details anzeigen Ein direkter Befehl überspringt den Prüf-Prompt. Prüfen Sie die Quelle, bevor Sie ihn ausführen.
npx skills add https://github.com/BEKO2210/Firstbrain --skill threejs-lightingDer Befehl bleibt in einer Zeile. Scrollen Sie horizontal, um ihn vor dem Kopieren vollständig zu prüfen.
Sie bevorzugen eine lokale Kopie? Laden Sie die Dateien herunter, die SkillsMP derzeit vorliegen.
ZIP herunterladen Herunterladen... Mehr aus diesem Repository Verwandte Berufe SOC
Basierend auf der SOC-Berufsklassifikation
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]] 