Skip to main content Skills Marketplace Descubre y explora habilidades de IA creadas por la comunidad.
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Mostrar detalles del prompt Un comando directo omite el prompt de revisión. Revisa el origen antes de ejecutarlo.
npx skills add https://github.com/BEKO2210/Firstbrain --skill threejs-lightingEl comando permanece en una sola línea. Desplázate horizontalmente para revisarlo antes de copiarlo.
¿Prefieres una copia local? Descarga los archivos que SkillsMP tiene disponibles ahora.
Descargar Zip Descargando... Ocupaciones relacionadas SOC
Basado en la clasificación ocupacional SOC
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]] 