Skip to main content سوق المهارات اكتشف واستكشف مهارات الذكاء الاصطناعي التي بناها المجتمع.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
عرض تفاصيل Prompt يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/BEKO2210/Firstbrain --skill threejs-lightingيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
تحميل Zip جاري التحميل... المهن ذات الصلة SOC
استنادا إلى تصنيف 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]] 