第二部分-光照与阴影——10. 光照属性与配置

10. 光照属性与配置

1. 概述

光照属性决定了光源的行为和视觉效果。合理配置光源的位置、颜色、强度、衰减等属性，可以创造出逼真的光照效果。

┌─────────────────────────────────────────────────────────────┐ │ 光照属性体系 │ ├─────────────────────────────────────────────────────────────┤ │ │ │ 通用属性 │ │ ├── color：光源颜色 │ │ ├── intensity：光照强度 │ │ ├── position：光源位置 │ │ └── target：目标点 │ │ │ │ 距离相关 │ │ ├── distance：光照距离 │ │ ├── decay：衰减系数 │ │ └── power：功率（流明） │ │ │ │ 方向相关 │ │ ├── angle：聚光灯角度 │ │ ├── penumbra：半影系数 │ │ └── direction：光照方向 │ │ │ │ 阴影相关 │ │ ├── castShadow：是否投射阴影 │ │ ├── shadow.mapSize：阴影贴图大小 │ │ ├── shadow.bias：阴影偏移 │ │ └── shadow.normalBias：法线偏移 │ │ │ └─────────────────────────────────────────────────────────────┘

2. 颜色与强度

2.1 颜色配置

// 使用十六进制constlight=newTHREE.DirectionalLight(0xff6600,1);// 使用 RGB 值light.color=newTHREE.Color(1,0.4,0);// 使用颜色名称light.color=newTHREE.Color('orange');// 使用 HSLlight.color.setHSL(0.1,1,0.5);// 颜色混合constredLight=newTHREE.PointLight(0xff0000,0.5);constblueLight=newTHREE.PointLight(0x0000ff,0.5);

2.2 强度配置

// 强度范围通常 0-1，但可以更高constlight=newTHREE.DirectionalLight(0xffffff,1.0);// 低强度（柔和照明）light.intensity=0.3;// 高强度（明亮）light.intensity=1.5;// 动态调整强度functionanimate(){constintensity=0.5+Math.sin(Date.now()*0.001)*0.3;light.intensity=intensity;}

3. 位置与目标

3.1 位置设置

// 直接设置constdirectionalLight=newTHREE.DirectionalLight(0xffffff,1);directionalLight.position.set(5,10,7);// 单独设置分量directionalLight.position.x=5;directionalLight.position.y=10;directionalLight.position.z=7;// 从向量设置constposition=newTHREE.Vector3(5,10,7);directionalLight.position.copy(position);

3.2 目标设置

// 创建目标点consttarget=newTHREE.Object3D();target.position.set(0,0,0);scene.add(target);directionalLight.target=target;// 快捷方式（自动创建目标）directionalLight.position.set(5,10,7);directionalLight.lookAt(0,0,0);// 动态目标constmovingTarget=newTHREE.Object3D();scene.add(movingTarget);directionalLight.target=movingTarget;functionanimate(){movingTarget.position.x=Math.sin(Date.now()*0.001)*2;}

4. 距离与衰减

4.1 PointLight 衰减

constpointLight=newTHREE.PointLight(0xffffff,1,10,1);// distance：光照最大距离（0 = 无限）pointLight.distance=15;// decay：衰减系数（默认 1）pointLight.decay=1.5;// 衰减公式：intensity = power / (4 * PI * distance^2)// 实际衰减：I = I0 / (1 + decay * (d / distance)^2)

4.2 使用功率（Power）

// 使用功率（流明）替代 intensity + distance + decayconstpointLight=newTHREE.PointLight(0xffffff);pointLight.power=100;// 100 流明// 功率会自动计算 intensity// intensity = power / (4 * PI * distance^2)

4.3 聚光灯衰减

constspotLight=newTHREE.SpotLight(0xffffff,1,20,Math.PI/4,0.3,1);// distance：最大距离spotLight.distance=25;// decay：衰减系数spotLight.decay=1.2;// angle：光束角度spotLight.angle=Math.PI/6;// 30度// penumbra：半影（边缘柔和度）spotLight.penumbra=0.4;

5. 阴影配置

5.1 启用阴影

// 渲染器启用阴影renderer.shadowMap.enabled=true;// 光源投射阴影light.castShadow=true;// 物体投射阴影mesh.castShadow=true;// 物体接收阴影mesh.receiveShadow=true;

5.2 阴影贴图大小

// 提高阴影质量（性能消耗更大）light.shadow.mapSize.width=2048;light.shadow.mapSize.height=2048;// 常用尺寸// 512x512：低质量// 1024x1024：中等质量（默认）// 2048x2048：高质量// 4096x4096：极高品质

5.3 阴影相机参数

// 平行光阴影相机constshadowCamera=directionalLight.shadow.camera;shadowCamera.near=0.5;shadowCamera.far=30;shadowCamera.left=-10;shadowCamera.right=10;shadowCamera.top=10;shadowCamera.bottom=-10;// 点光源阴影相机（六个方向）constpointShadowCamera=pointLight.shadow.camera;pointShadowCamera.near=0.5;pointShadowCamera.far=15;// 聚光灯阴影相机constspotShadowCamera=spotLight.shadow.camera;spotShadowCamera.near=0.5;spotShadowCamera.far=20;spotShadowCamera.fov=spotLight.angle*180/Math.PI;

5.4 阴影偏移（Bias）

// 防止阴影痤疮（shadow acne）light.shadow.bias=0.0001;// 法线偏移（更适合曲面）light.shadow.normalBias=0.05;

6. 光源辅助器配置

6.1 DirectionalLightHelper

consthelper=newTHREE.DirectionalLightHelper(directionalLight,size,color);// size：辅助器大小// color：辅助器颜色（可选）scene.add(helper);// 更新辅助器helper.update();

6.2 PointLightHelper

consthelper=newTHREE.PointLightHelper(pointLight,sphereSize);// sphereSize：球体大小scene.add(helper);

6.3 SpotLightHelper

consthelper=newTHREE.SpotLightHelper(spotLight);scene.add(helper);// 更新（光源参数改变后）helper.update();

6.4 阴影相机辅助器

// 添加阴影相机辅助器（调试用）constshadowCameraHelper=newTHREE.CameraHelper(directionalLight.shadow.camera);scene.add(shadowCameraHelper);

7. 光源组配置

7.1 多光源组合

// 三点布光// 主光（Key Light）constkeyLight=newTHREE.DirectionalLight(0xffffff,1);keyLight.position.set(5,5,5);keyLight.castShadow=true;scene.add(keyLight);// 补光（Fill Light）constfillLight=newTHREE.PointLight(0x88aaff,0.3);fillLight.position.set(-3,2,4);scene.add(fillLight);// 背光（Back Light / Rim Light）constrimLight=newTHREE.PointLight(0xffaa66,0.5);rimLight.position.set(0,3,-5);scene.add(rimLight);

7.2 光源组

constlightGroup=newTHREE.Group();constlight1=newTHREE.PointLight(0xff6600,0.5);light1.position.set(2,0,0);constlight2=newTHREE.PointLight(0x44aaff,0.5);light2.position.set(-2,0,0);lightGroup.add(light1,light2);scene.add(lightGroup);// 整体旋转光源组functionanimate(){lightGroup.rotation.y+=0.01;}

8. 完整示例

import*asTHREEfrom'three';import{OrbitControls}from'three/examples/jsm/controls/OrbitControls.js';constscene=newTHREE.Scene();scene.background=newTHREE.Color(0x111122);constcamera=newTHREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);camera.position.set(6,5,10);camera.lookAt(0,0,0);constrenderer=newTHREE.WebGLRenderer({antialias:true});renderer.setSize(window.innerWidth,window.innerHeight);renderer.shadowMap.enabled=true;document.body.appendChild(renderer.domElement);constcontrols=newOrbitControls(camera,renderer.domElement);controls.enableDamping=true;// 物体constsphereGeometry=newTHREE.SphereGeometry(1,64,64);constsphereMaterial=newTHREE.MeshStandardMaterial({color:0x44aa88,metalness:0.5,roughness:0.3});constsphere=newTHREE.Mesh(sphereGeometry,sphereMaterial);sphere.castShadow=true;sphere.receiveShadow=true;scene.add(sphere);constcubeGeometry=newTHREE.BoxGeometry(1,1,1);constcubeMaterial=newTHREE.MeshStandardMaterial({color:0xff6633,metalness:0.2,roughness:0.4});constcube=newTHREE.Mesh(cubeGeometry,cubeMaterial);cube.position.set(2,0,1);cube.castShadow=true;cube.receiveShadow=true;scene.add(cube);// 地面constplaneGeometry=newTHREE.PlaneGeometry(12,12);constplaneMaterial=newTHREE.MeshStandardMaterial({color:0x336699,side:THREE.DoubleSide});constplane=newTHREE.Mesh(planeGeometry,planeMaterial);plane.rotation.x=-Math.PI/2;plane.position.y=-1.5;plane.receiveShadow=true;scene.add(plane);// 辅助对象constaxesHelper=newTHREE.AxesHelper(5);scene.add(axesHelper);constgridHelper=newTHREE.GridHelper(15,20);scene.add(gridHelper);// 环境光constambientLight=newTHREE.AmbientLight(0x404040,0.4);scene.add(ambientLight);// 平行光（主光）constdirectionalLight=newTHREE.DirectionalLight(0xffffff,1);directionalLight.position.set(5,10,7);directionalLight.castShadow=true;directionalLight.shadow.mapSize.width=1024;directionalLight.shadow.mapSize.height=1024;directionalLight.shadow.camera.near=0.5;directionalLight.shadow.camera.far=20;directionalLight.shadow.camera.left=-5;directionalLight.shadow.camera.right=5;directionalLight.shadow.camera.top=5;directionalLight.shadow.camera.bottom=-5;scene.add(directionalLight);// 点光源（补光）constpointLight=newTHREE.PointLight(0x88aaff,0.5);pointLight.position.set(-3,2,4);pointLight.castShadow=true;pointLight.distance=15;pointLight.decay=1;scene.add(pointLight);// 背光constbackLight=newTHREE.PointLight(0xffaa66,0.4);backLight.position.set(0,2,-5);scene.add(backLight);// 辅助器constdirHelper=newTHREE.DirectionalLightHelper(directionalLight,0.5);scene.add(dirHelper);constpointHelper=newTHREE.PointLightHelper(pointLight,0.2);scene.add(pointHelper);constshadowHelper=newTHREE.CameraHelper(directionalLight.shadow.camera);scene.add(shadowHelper);// GUI 控制importGUIfrom'lil-gui';constgui=newGUI();// 平行光控制constdirFolder=gui.addFolder('Directional Light');dirFolder.add(directionalLight,'intensity',0,2).name('强度');dirFolder.add(directionalLight.position,'x',-10,10).name('X位置');dirFolder.add(directionalLight.position,'y',0,15).name('Y位置');dirFolder.add(directionalLight.position,'z',-10,10).name('Z位置');dirFolder.open();// 点光源控制constpointFolder=gui.addFolder('Point Light');pointFolder.add(pointLight,'intensity',0,2).name('强度');pointFolder.add(pointLight,'distance',0,20).name('距离');pointFolder.add(pointLight,'decay',0,2).name('衰减');pointFolder.open();// 环境光控制constambientFolder=gui.addFolder('Ambient Light');ambientFolder.add(ambientLight,'intensity',0,1).name('强度');ambientFolder.open();// 动画functionanimate(){requestAnimationFrame(animate);// 点光源环绕consttime=Date.now()*0.001;pointLight.position.x=-3+Math.sin(time)*1;pointLight.position.z=4+Math.cos(time)*1;controls.update();renderer.render(scene,camera);}animate();window.addEventListener('resize',onWindowResize,false);functiononWindowResize(){camera.aspect=window.innerWidth/window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth,window.innerHeight);}

9. 总结