name: threejs-lightingdescription: Three.js lighting - light types, shadows, environment lighting. Use when adding lights, configuring shadows, setting up IBL, or optimizing lighting performance.risk: criticalsource: communityThree.js 光照何时使用您需要在 Three.js 场景中添加或调整光照。任务涉及灯光类型、阴影、环境光照或光照性能权衡。您希望通过 Three.js 光照设置改善场景的可读性、真实感或氛围。快速入门import*asTHREEfromthree;// Basic lighting setupconstambientLightnewTHREE.AmbientLight(0xffffff,0.5);scene.add(ambientLight);constdirectionalLightnewTHREE.DirectionalLight(0xffffff,1);directionalLight.position.set(5,5,5);scene.add(directionalLight);灯光类型概览灯光描述阴影支持开销AmbientLight各处均匀否极低HemisphereLight天空/地面渐变否极低DirectionalLight平行光线太阳是低PointLight全方位灯泡是中SpotLight锥形是中RectAreaLight区域光窗户否*高*RectAreaLight 阴影需要自定义解决方案AmbientLight环境光均匀照亮所有对象。无方向、无阴影。// AmbientLight(color, intensity)constambientnewTHREE.AmbientLight(0xffffff,0.5);scene.add(ambient);// Modify at runtimeambient.color.set(0xffffcc);ambient.intensity0.3;HemisphereLight半球光从天空到地面的颜色渐变。适合户外场景。// HemisphereLight(skyColor, groundColor, intensity)constheminewTHREE.HemisphereLight(0x87ceeb,0x8b4513,0.6);hemi.position.set(0,50,0);scene.add(hemi);// Propertieshemi.color;// Sky colorhemi.groundColor;// Ground colorhemi.intensity;DirectionalLight方向光平行光线。模拟远处的光源太阳。// DirectionalLight(color, intensity)constdirLightnewTHREE.DirectionalLight(0xffffff,1);dirLight.position.set(5,10,5);// Light points at target (default: 0, 0, 0)dirLight.target.position.set(0,0,0);scene.add(dirLight.target);scene.add(dirLight);DirectionalLight 阴影dirLight.castShadowtrue;// Shadow map size (higher sharper, more expensive)dirLight.shadow.mapSize.width2048;dirLight.shadow.mapSize.height2048;// Shadow camera (orthographic)dirLight.shadow.camera.near0.5;dirLight.shadow.camera.far50;dirLight.shadow.camera.left-10;dirLight.shadow.camera.right10;dirLight.shadow.camera.top10;dirLight.shadow.camera.bottom-10;// Shadow softnessdirLight.shadow.radius4;// Blur radius (PCFSoftShadowMap only)// Shadow bias (fixes shadow acne)dirLight.shadow.bias-0.0001;dirLight.shadow.normalBias0.02;// Helper to visualize shadow cameraconsthelpernewTHREE.CameraHelper(dirLight.shadow.camera);scene.add(helper);PointLight点光源从一点向所有方向发光。像灯泡。// PointLight(color, intensity, distance, decay)constpointLightnewTHREE.PointLight(0xffffff,1,100,2);pointLight.position.set(0,5,0);scene.add(pointLight);// PropertiespointLight.distance;// Maximum range (0 infinite)pointLight.decay;// Light falloff (physically correct 2)PointLight 阴影pointLight.castShadowtrue;pointLight.shadow.mapSize.width1024;pointLight.shadow.mapSize.height1024;// Shadow camera (perspective - 6 directions for cube map)pointLight.shadow.camera.near0.5;pointLight.shadow.camera.far50;pointLight.shadow.bias-0.005;SpotLight聚光灯锥形光。像手电筒或舞台灯。// SpotLight(color, intensity, distance, angle, penumbra, decay)constspotLightnewTHREE.SpotLight(0xffffff,1,100,Math.PI/6,0.5,2);spotLight.position.set(0,10,0);// Target (light points at this)spotLight.target.position.set(0,0,0);scene.add(spotLight.target);scene.add(spotLight);// PropertiesspotLight.angle;// Cone angle (radians, max Math.PI/2)spotLight.penumbra;// Soft edge (0-1)spotLight.distance;// RangespotLight.decay;// FalloffSpotLight 阴影spotLight.castShadowtrue;spotLight.shadow.mapSize.width1024;spotLight.shadow.mapSize.height1024;// Shadow camera (perspective)spotLight.shadow.camera.near0.5;spotLight.shadow.camera.far50;spotLight.shadow.camera.fov30;spotLight.shadow.bias-0.0001;// Focus (affects shadow projection)spotLight.shadow.focus1;RectAreaLight矩形区域光矩形区域光。适合柔和、逼真的光照。import{RectAreaLightHelper}fromthree/examples/jsm/helpers/RectAreaLightHelper.js;import{RectAreaLightUniformsLib}fromthree/examples/jsm/lights/RectAreaLightUniformsLib.js;// Must initialize uniforms first (WebGL renderer only)RectAreaLightUniformsLib.init();// RectAreaLight(color, intensity, width, height)constrectLightnewTHREE.RectAreaLight(0xffffff,5,4,2);rectLight.position.set(0,5,0);rectLight.lookAt(0,0,0);scene.add(rectLight);// HelperconsthelpernewRectAreaLightHelper(rectLight);rectLight.add(helper);// Works with MeshStandardMaterial, MeshPhysicalMaterial// r183: Clearcoat on MeshPhysicalMaterial is now properly lit by RectAreaLight// Does not cast shadows natively阴影设置启用阴影// 1. Enable on rendererrenderer.shadowMap.enabledtrue;renderer.shadowMap.typeTHREE.PCFSoftShadowMap;// Shadow map types:// THREE.BasicShadowMap - fastest, low quality// THREE.PCFShadowMap - default, filtered// THREE.PCFSoftShadowMap - softer edges// THREE.VSMShadowMap - variance shadow map// 2. Enable on lightlight.castShadowtrue;// 3. Enable on objectsmesh.castShadowtrue;mesh.receiveShadowtrue;// Ground planefloor.receiveShadowtrue;floor.castShadowfalse;// Usually false for floors优化阴影// Tight shadow camera frustumconstd10;dirLight.shadow.camera.left-d;dirLight.shadow.camera.rightd;dirLight.shadow.camera.topd;dirLight.shadow.camera.bottom-d;dirLight.shadow.camera.near0.5;dirLight.shadow.camera.far30;// Fix shadow acnedirLight.shadow.bias-0.0001;// Depth biasdirLight.shadow.normalBias0.02;// Bias along normal// Shadow map size (balance quality vs performance)// 512 - low quality// 1024 - medium quality// 2048 - high quality// 4096 - very high quality (expensive)接触阴影伪阴影、快速import{ContactShadows}fromthree/examples/jsm/objects/ContactShadows.js;constcontactShadowsnewContactShadows({resolution:512,blur:2,opacity:0.5,scale:10,position:[0,0,0],});scene.add(contactShadows);灯光辅助器import{RectAreaLightHelper}fromthree/examples/jsm/helpers/RectAreaLightHelper.js;// DirectionalLight helperconstdirHelpernewTHREE.DirectionalLightHelper(dirLight,5);scene.add(dirHelper);// PointLight helperconstpointHelpernewTHREE.PointLightHelper(pointLight,1);scene.add(pointHelper);// SpotLight helperconstspotHelpernewTHREE.SpotLightHelper(spotLight);scene.add(spotHelper);// Hemisphere helperconsthemiHelpernewTHREE.HemisphereLightHelper(hemiLight,5);scene.add(hemiHelper);// RectAreaLight helperconstrectHelpernewRectAreaLightHelper(rectLight);rectLight.add(rectHelper);// Update helpers when light changesdirHelper.update();spotHelper.update();环境光照IBL使用 HDR 环境贴图的基于图像的光照。import{RGBELoader}fromthree/examples/jsm/loaders/RGBELoader.js;constrgbeLoadernewRGBELoader();rgbeLoader.load(environment.hdr,(texture){texture.mappingTHREE.EquirectangularReflectionMapping;// Set as scene environment (affects all PBR materials)scene.environmenttexture;// Optional: also use as backgroundscene.backgroundtexture;scene.backgroundBlurriness0;// 0-1, blur the backgroundscene.backgroundIntensity1;});// PMREMGenerator for better reflectionsconstpmremGeneratornewTHREE.PMREMGenerator(renderer);pmremGenerator.compileEquirectangularShader();rgbeLoader.load(environment.hdr,(texture){constenvMappmremGenerator.fromEquirectangular(texture).texture;scene.environmentenvMap;texture.dispose();pmremGenerator.dispose();});立方体纹理环境constcubeLoadernewTHREE.CubeTextureLoader();constenvMapcubeLoader.load([px.jpg,nx.jpg,py.jpg,ny.jpg,pz.jpg,nz.jpg,]);scene.environmentenvMap;scene.backgroundenvMap;光照探针高级捕获空间中某一点的光照用于环境光。import{LightProbeGenerator}fromthree/examples/jsm/lights/LightProbeGenerator.js;// Generate from cube textureconstlightProbenewTHREE.LightProbe();scene.add(lightProbe);lightProbe.copy(LightProbeGenerator.fromCubeTexture(cubeTexture));// Or from render targetconstcubeCameranewTHREE.CubeCamera(0.1,100,newTHREE.WebGLCubeRenderTarget(256),);cubeCamera.update(renderer,scene);lightProbe.copy(LightProbeGenerator.fromCubeRenderTarget(renderer,cubeCamera.renderTarget),);常见光照设置三点照明// Key light (main light)constkeyLightnewTHREE.DirectionalLight(0xffffff,1);keyLight.position.set(5,5,5);scene.add(keyLight);// Fill light (softer, opposite side)constfillLightnewTHREE.DirectionalLight(0xffffff,0.5);fillLight.position.set(-5,3,5);scene.add(fillLight);// Back light (rim lighting)constbackLightnewTHREE.DirectionalLight(0xffffff,0.3);backLight.position.set(0,5,-5);scene.add(backLight);// Ambient fillconstambientnewTHREE.AmbientLight(0x404040,0.3);scene.add(ambient);室外日光// SunconstsunnewTHREE.DirectionalLight(0xffffcc,1.5);sun.position.set(50,100,50);sun.castShadowtrue;scene.add(sun);// Sky ambientconstheminewTHREE.HemisphereLight(0x87ceeb,0x8b4513,0.6);scene.add(hemi);室内摄影棚// Multiple area lightsRectAreaLightUniformsLib.init();constlight1newTHREE.RectAreaLight(0xffffff,5,2,2);light1.position.set(3,3,3);light1.lookAt(0,0,0);scene.add(light1);constlight2newTHREE.RectAreaLight(0xffffff,3,2,2);light2.position.set(-3,3,3);light2.lookAt(0,0,0);scene.add(light2);// Ambient fillconstambientnewTHREE.AmbientLight(0x404040,0.2);scene.add(ambient);灯光动画constclocknewTHREE.Clock();functionanimate(){consttimeclock.getElapsedTime();// Orbit light around scenelight.position.xMath.cos(time)*5;light.position.zMath.sin(time)*5;// Pulsing intensitylight.intensity1Math.sin(time*2)*0.5;// Color cyclinglight.color.setHSL((time*0.1)%1,1,0.5);// Update helpers if usinglightHelper.update();}性能提示限制灯光数量每盏灯都会增加着色器复杂度使用烘焙光照静态场景烘焙到纹理更小的阴影贴图512-1024 通常足够紧凑的阴影视锥体只覆盖所需区域禁用未使用的阴影并非所有灯光都需要阴影使用灯光图层将对象从特定灯光中排除// Light layerslight.layers.set(1);// Light only affects layer 1mesh.layers.enable(1);// Mesh is on layer 1otherMesh.layers.disable(1);// Other mesh not affected// Selective shadowsmesh.castShadowtrue;mesh.receiveShadowtrue;decorMesh.castShadowfalse;// Small objects often dont need to cast另请参阅threejs-materials- 材质的光照响应threejs-textures- 光照贴图和环境贴图threejs-postprocessing- 泛光Bloom和其他光照效果限制仅当任务明确符合上述范围时使用此技能。不要将输出视为环境特定验证、测试或专家审查的替代品。如果缺少必要的输入、权限、安全边界或成功标准请停下来询问澄清。