Skip to main content Skills Marketplace Descubra e explore skills de IA criadas pela comunidade.
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Mostrar detalhes do prompt Um comando direto ignora o prompt de revisão. Verifique a origem antes de executá-lo.
npx skills add https://github.com/BEKO2210/Firstbrain --skill threejs-lightingO comando permanece em uma só linha. Role horizontalmente para revisá-lo antes de copiar.
Prefere uma cópia local? Baixe os arquivos disponíveis atualmente no SkillsMP.
Baixar Zip Baixando... Ocupações relacionadas SOC
Baseado na classificação 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]] 