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

10. 光照属性与配置1. 概述光照属性决定了光源的行为和视觉效果。合理配置光源的位置、颜色、强度、衰减等属性可以创造出逼真的光照效果。┌─────────────────────────────────────────────────────────────┐ │ 光照属性体系 │ ├─────────────────────────────────────────────────────────────┤ │ │ │ 通用属性 │ │ ├── color光源颜色 │ │ ├── intensity光照强度 │ │ ├── position光源位置 │ │ └── target目标点 │ │ │ │ 距离相关 │ │ ├── distance光照距离 │ │ ├── decay衰减系数 │ │ └── power功率流明 │ │ │ │ 方向相关 │ │ ├── angle聚光灯角度 │ │ ├── penumbra半影系数 │ │ └── direction光照方向 │ │ │ │ 阴影相关 │ │ ├── castShadow是否投射阴影 │ │ ├── shadow.mapSize阴影贴图大小 │ │ ├── shadow.bias阴影偏移 │ │ └── shadow.normalBias法线偏移 │ │ │ └─────────────────────────────────────────────────────────────┘2. 颜色与强度2.1 颜色配置// 使用十六进制constlightnewTHREE.DirectionalLight(0xff6600,1);// 使用 RGB 值light.colornewTHREE.Color(1,0.4,0);// 使用颜色名称light.colornewTHREE.Color(orange);// 使用 HSLlight.color.setHSL(0.1,1,0.5);// 颜色混合constredLightnewTHREE.PointLight(0xff0000,0.5);constblueLightnewTHREE.PointLight(0x0000ff,0.5);2.2 强度配置// 强度范围通常 0-1但可以更高constlightnewTHREE.DirectionalLight(0xffffff,1.0);// 低强度柔和照明light.intensity0.3;// 高强度明亮light.intensity1.5;// 动态调整强度functionanimate(){constintensity0.5Math.sin(Date.now()*0.001)*0.3;light.intensityintensity;}3. 位置与目标3.1 位置设置// 直接设置constdirectionalLightnewTHREE.DirectionalLight(0xffffff,1);directionalLight.position.set(5,10,7);// 单独设置分量directionalLight.position.x5;directionalLight.position.y10;directionalLight.position.z7;// 从向量设置constpositionnewTHREE.Vector3(5,10,7);directionalLight.position.copy(position);3.2 目标设置// 创建目标点consttargetnewTHREE.Object3D();target.position.set(0,0,0);scene.add(target);directionalLight.targettarget;// 快捷方式自动创建目标directionalLight.position.set(5,10,7);directionalLight.lookAt(0,0,0);// 动态目标constmovingTargetnewTHREE.Object3D();scene.add(movingTarget);directionalLight.targetmovingTarget;functionanimate(){movingTarget.position.xMath.sin(Date.now()*0.001)*2;}4. 距离与衰减4.1 PointLight 衰减constpointLightnewTHREE.PointLight(0xffffff,1,10,1);// distance光照最大距离0 无限pointLight.distance15;// decay衰减系数默认 1pointLight.decay1.5;// 衰减公式intensity power / (4 * PI * distance^2)// 实际衰减I I0 / (1 decay * (d / distance)^2)4.2 使用功率Power// 使用功率流明替代 intensity distance decayconstpointLightnewTHREE.PointLight(0xffffff);pointLight.power100;// 100 流明// 功率会自动计算 intensity// intensity power / (4 * PI * distance^2)4.3 聚光灯衰减constspotLightnewTHREE.SpotLight(0xffffff,1,20,Math.PI/4,0.3,1);// distance最大距离spotLight.distance25;// decay衰减系数spotLight.decay1.2;// angle光束角度spotLight.angleMath.PI/6;// 30度// penumbra半影边缘柔和度spotLight.penumbra0.4;5. 阴影配置5.1 启用阴影// 渲染器启用阴影renderer.shadowMap.enabledtrue;// 光源投射阴影light.castShadowtrue;// 物体投射阴影mesh.castShadowtrue;// 物体接收阴影mesh.receiveShadowtrue;5.2 阴影贴图大小// 提高阴影质量性能消耗更大light.shadow.mapSize.width2048;light.shadow.mapSize.height2048;// 常用尺寸// 512x512低质量// 1024x1024中等质量默认// 2048x2048高质量// 4096x4096极高品质5.3 阴影相机参数// 平行光阴影相机constshadowCameradirectionalLight.shadow.camera;shadowCamera.near0.5;shadowCamera.far30;shadowCamera.left-10;shadowCamera.right10;shadowCamera.top10;shadowCamera.bottom-10;// 点光源阴影相机六个方向constpointShadowCamerapointLight.shadow.camera;pointShadowCamera.near0.5;pointShadowCamera.far15;// 聚光灯阴影相机constspotShadowCameraspotLight.shadow.camera;spotShadowCamera.near0.5;spotShadowCamera.far20;spotShadowCamera.fovspotLight.angle*180/Math.PI;5.4 阴影偏移Bias// 防止阴影痤疮shadow acnelight.shadow.bias0.0001;// 法线偏移更适合曲面light.shadow.normalBias0.05;6. 光源辅助器配置6.1 DirectionalLightHelperconsthelpernewTHREE.DirectionalLightHelper(directionalLight,size,color);// size辅助器大小// color辅助器颜色可选scene.add(helper);// 更新辅助器helper.update();6.2 PointLightHelperconsthelpernewTHREE.PointLightHelper(pointLight,sphereSize);// sphereSize球体大小scene.add(helper);6.3 SpotLightHelperconsthelpernewTHREE.SpotLightHelper(spotLight);scene.add(helper);// 更新光源参数改变后helper.update();6.4 阴影相机辅助器// 添加阴影相机辅助器调试用constshadowCameraHelpernewTHREE.CameraHelper(directionalLight.shadow.camera);scene.add(shadowCameraHelper);7. 光源组配置7.1 多光源组合// 三点布光// 主光Key LightconstkeyLightnewTHREE.DirectionalLight(0xffffff,1);keyLight.position.set(5,5,5);keyLight.castShadowtrue;scene.add(keyLight);// 补光Fill LightconstfillLightnewTHREE.PointLight(0x88aaff,0.3);fillLight.position.set(-3,2,4);scene.add(fillLight);// 背光Back Light / Rim LightconstrimLightnewTHREE.PointLight(0xffaa66,0.5);rimLight.position.set(0,3,-5);scene.add(rimLight);7.2 光源组constlightGroupnewTHREE.Group();constlight1newTHREE.PointLight(0xff6600,0.5);light1.position.set(2,0,0);constlight2newTHREE.PointLight(0x44aaff,0.5);light2.position.set(-2,0,0);lightGroup.add(light1,light2);scene.add(lightGroup);// 整体旋转光源组functionanimate(){lightGroup.rotation.y0.01;}8. 完整示例import*asTHREEfromthree;import{OrbitControls}fromthree/examples/jsm/controls/OrbitControls.js;constscenenewTHREE.Scene();scene.backgroundnewTHREE.Color(0x111122);constcameranewTHREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);camera.position.set(6,5,10);camera.lookAt(0,0,0);constrenderernewTHREE.WebGLRenderer({antialias:true});renderer.setSize(window.innerWidth,window.innerHeight);renderer.shadowMap.enabledtrue;document.body.appendChild(renderer.domElement);constcontrolsnewOrbitControls(camera,renderer.domElement);controls.enableDampingtrue;// 物体constsphereGeometrynewTHREE.SphereGeometry(1,64,64);constsphereMaterialnewTHREE.MeshStandardMaterial({color:0x44aa88,metalness:0.5,roughness:0.3});constspherenewTHREE.Mesh(sphereGeometry,sphereMaterial);sphere.castShadowtrue;sphere.receiveShadowtrue;scene.add(sphere);constcubeGeometrynewTHREE.BoxGeometry(1,1,1);constcubeMaterialnewTHREE.MeshStandardMaterial({color:0xff6633,metalness:0.2,roughness:0.4});constcubenewTHREE.Mesh(cubeGeometry,cubeMaterial);cube.position.set(2,0,1);cube.castShadowtrue;cube.receiveShadowtrue;scene.add(cube);// 地面constplaneGeometrynewTHREE.PlaneGeometry(12,12);constplaneMaterialnewTHREE.MeshStandardMaterial({color:0x336699,side:THREE.DoubleSide});constplanenewTHREE.Mesh(planeGeometry,planeMaterial);plane.rotation.x-Math.PI/2;plane.position.y-1.5;plane.receiveShadowtrue;scene.add(plane);// 辅助对象constaxesHelpernewTHREE.AxesHelper(5);scene.add(axesHelper);constgridHelpernewTHREE.GridHelper(15,20);scene.add(gridHelper);// 环境光constambientLightnewTHREE.AmbientLight(0x404040,0.4);scene.add(ambientLight);// 平行光主光constdirectionalLightnewTHREE.DirectionalLight(0xffffff,1);directionalLight.position.set(5,10,7);directionalLight.castShadowtrue;directionalLight.shadow.mapSize.width1024;directionalLight.shadow.mapSize.height1024;directionalLight.shadow.camera.near0.5;directionalLight.shadow.camera.far20;directionalLight.shadow.camera.left-5;directionalLight.shadow.camera.right5;directionalLight.shadow.camera.top5;directionalLight.shadow.camera.bottom-5;scene.add(directionalLight);// 点光源补光constpointLightnewTHREE.PointLight(0x88aaff,0.5);pointLight.position.set(-3,2,4);pointLight.castShadowtrue;pointLight.distance15;pointLight.decay1;scene.add(pointLight);// 背光constbackLightnewTHREE.PointLight(0xffaa66,0.4);backLight.position.set(0,2,-5);scene.add(backLight);// 辅助器constdirHelpernewTHREE.DirectionalLightHelper(directionalLight,0.5);scene.add(dirHelper);constpointHelpernewTHREE.PointLightHelper(pointLight,0.2);scene.add(pointHelper);constshadowHelpernewTHREE.CameraHelper(directionalLight.shadow.camera);scene.add(shadowHelper);// GUI 控制importGUIfromlil-gui;constguinewGUI();// 平行光控制constdirFoldergui.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();// 点光源控制constpointFoldergui.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();// 环境光控制constambientFoldergui.addFolder(Ambient Light);ambientFolder.add(ambientLight,intensity,0,1).name(强度);ambientFolder.open();// 动画functionanimate(){requestAnimationFrame(animate);// 点光源环绕consttimeDate.now()*0.001;pointLight.position.x-3Math.sin(time)*1;pointLight.position.z4Math.cos(time)*1;controls.update();renderer.render(scene,camera);}animate();window.addEventListener(resize,onWindowResize,false);functiononWindowResize(){camera.aspectwindow.innerWidth/window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth,window.innerHeight);}9. 总结属性说明适用光源color光源颜色所有intensity光照强度所有position光源位置Directional, Point, Spottarget目标点Directional, Spotdistance光照距离Point, Spotdecay衰减系数Point, Spotangle光束角度Spotpenumbra半影系数Spotpower功率流明PointcastShadow投射阴影Directional, Point, Spotshadow.mapSize阴影贴图大小Directional, Point, Spotshadow.bias阴影偏移Directional, Point, Spot