第二部分-光照与阴影——13. 光照模型与性能

13. 光照模型与性能

1. 概述

光照模型决定了材质如何与光线交互。Three.js 提供了多种内置光照模型，每种模型在视觉效果和性能之间有不同的权衡。了解这些模型的原理和性能特点，可以帮助你做出更好的选择。

┌─────────────────────────────────────────────────────────────┐ │ 光照模型体系 │ ├─────────────────────────────────────────────────────────────┤ │ │ │ 光照模型类型 │ │ ├── MeshBasicMaterial：无光照（性能最佳） │ │ ├── MeshLambertMaterial：兰伯特（漫反射） │ │ ├── MeshPhongMaterial：冯氏（漫反射+高光） │ │ ├── MeshStandardMaterial：标准 PBR │ │ ├── MeshPhysicalMaterial：物理 PBR（最真实） │ │ └── MeshToonMaterial：卡通（非真实感） │ │ │ │ 性能对比 │ │ ├── 计算复杂度 │ │ ├── 顶点/片元着色器负担 │ │ ├── 光源数量影响 │ │ └── 阴影性能 │ │ │ └─────────────────────────────────────────────────────────────┘

2. 光照模型详解

2.1 MeshBasicMaterial（无光照）

最简单的材质，不受光照影响，直接显示颜色或纹理。

constbasicMaterial=newTHREE.MeshBasicMaterial({color:0xff6600,map:texture});

特点：

• 无需光照计算
• 性能最佳
• 无阴影
• 适用于 UI、调试、2D 效果

2.2 MeshLambertMaterial（兰伯特）

兰伯特光照模型，只计算漫反射，适合粗糙表面。

constlambertMaterial=newTHREE.MeshLambertMaterial({color:0x44aa88});

特点：

• 只有漫反射
• 无高光
• 性能较好
• 适合粗糙材质

2.3 MeshPhongMaterial（冯氏）

冯氏光照模型，在兰伯特基础上增加了高光。

constphongMaterial=newTHREE.MeshPhongMaterial({color:0x44aa88,specular:0x444444,shininess:60});

特点：

• 漫反射 + 高光
• 性能中等
• 适合光滑材质

2.4 MeshStandardMaterial（标准 PBR）

基于物理的渲染（PBR）模型，使用金属度和粗糙度。

conststandardMaterial=newTHREE.MeshStandardMaterial({color:0xccaa88,metalness:0.8,roughness:0.2});

特点：

• 物理真实
• 性能较高
• 适合大多数场景

2.5 MeshPhysicalMaterial（物理 PBR）

标准 PBR 的扩展，增加清漆、透射等属性。

constphysicalMaterial=newTHREE.MeshPhysicalMaterial({color:0x88aaff,metalness:0.9,roughness:0.1,clearcoat:1.0,transmission:0.8});

特点：

• 最真实
• 性能消耗最大
• 适合高端场景

2.6 MeshToonMaterial（卡通）

非真实感渲染，产生渐变着色效果。

consttoonMaterial=newTHREE.MeshToonMaterial({color:0x44aa88});

特点：

• 卡通风格
• 性能较好
• 适合风格化渲染

3. 性能对比

3.1 性能对比表

3.2 性能测试代码

functionmeasureMaterialPerformance(material,iterations=1000){constgeometry=newTHREE.BoxGeometry(1,1,1);constmesh=newTHREE.Mesh(geometry,material);scene.add(mesh);conststart=performance.now();for(leti=0;i<iterations;i++){renderer.render(scene,camera);}constend=performance.now();scene.remove(mesh);returnend-start;}

4. 光源数量与性能

4.1 光源数量影响

4.2 光源优化策略

// 限制光源数量constmaxLights=4;// 使用环境光减少光源需求constambientLight=newTHREE.AmbientLight(0x404040,0.5);// 使用光源辅助器调试constlightHelper=newTHREE.DirectionalLightHelper(directionalLight);

5. 性能优化技巧

5.1 材质优化

// 使用更简单的材质// 不需要高光时使用 Lambertconstmaterial=needsSpecular?newTHREE.MeshPhongMaterial({color:0x44aa88}):newTHREE.MeshLambertMaterial({color:0x44aa88});// 禁用不必要的特性material.transparent=false;material.depthTest=true;material.depthWrite=true;// 合并材质（相同材质的物体可以合并渲染）constmergedGeometry=BufferGeometryUtils.mergeBufferGeometries(geometries);constmergedMesh=newTHREE.Mesh(mergedGeometry,sharedMaterial);

5.2 纹理优化

// 降低纹理分辨率consttextureLoader=newTHREE.TextureLoader();consttexture=textureLoader.load('image.jpg');texture.minFilter=THREE.LinearFilter;texture.magFilter=THREE.LinearFilter;// 使用压缩纹理// 使用 BasisTexture 或 KTX2 格式

5.3 阴影优化

// 降低阴影质量renderer.shadowMap.type=THREE.BasicShadowMap;light.shadow.mapSize.width=512;light.shadow.mapSize.height=512;// 限制阴影范围light.shadow.camera.left=-5;light.shadow.camera.right=5;light.shadow.camera.top=5;light.shadow.camera.bottom=-5;// 禁用不必要的阴影backgroundMesh.castShadow=false;backgroundMesh.receiveShadow=false;

5.4 实例化渲染

// 大量相同物体使用 InstancedMeshconstcount=1000;constinstancedMesh=newTHREE.InstancedMesh(geometry,material,count);constdummy=newTHREE.Object3D();for(leti=0;i<count;i++){dummy.position.set(Math.random()*100-50,Math.random()*10,Math.random()*100-50);dummy.updateMatrix();instancedMesh.setMatrixAt(i,dummy.matrix);}instancedMesh.instanceMatrix.needsUpdate=true;scene.add(instancedMesh);

6. 光照模型选择指南

6.1 决策树

需要光照效果？ │ ├─ 否 → MeshBasicMaterial │ └─ 是 → 需要高光效果？ │ ├─ 否 → MeshLambertMaterial │ └─ 是 → 需要物理真实感？ │ ├─ 否 → 性能优先？ │ │ │ ├─ 是 → MeshPhongMaterial │ └─ 否 → MeshStandardMaterial │ └─ 是 → 需要透射/清漆？ │ ├─ 是 → MeshPhysicalMaterial └─ 否 → MeshStandardMaterial

6.2 场景推荐

7. 完整示例

import*asTHREEfrom'three';import{OrbitControls}from'three/examples/jsm/controls/OrbitControls.js';importStatsfrom'stats.js';constscene=newTHREE.Scene();scene.background=newTHREE.Color(0x111122);constcamera=newTHREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);camera.position.set(8,6,12);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;// 性能监控conststats=newStats();stats.showPanel(0);document.body.appendChild(stats.dom);// 光源constambientLight=newTHREE.AmbientLight(0x404040,0.4);scene.add(ambientLight);constdirectionalLight=newTHREE.DirectionalLight(0xffffff,1);directionalLight.position.set(5,10,7);directionalLight.castShadow=true;scene.add(directionalLight);constfillLight=newTHREE.PointLight(0x88aaff,0.3);fillLight.position.set(-3,2,4);scene.add(fillLight);// 辅助对象constaxesHelper=newTHREE.AxesHelper(5);scene.add(axesHelper);constgridHelper=newTHREE.GridHelper(15,20);scene.add(gridHelper);constgeometry=newTHREE.SphereGeometry(0.8,64,64);// 不同材质对比constmaterials=[{name:'Basic',material:newTHREE.MeshBasicMaterial({color:0xff6600}),pos:[-3,1,-2]},{name:'Lambert',material:newTHREE.MeshLambertMaterial({color:0x44aa88}),pos:[0,1,-2]},{name:'Phong',material:newTHREE.MeshPhongMaterial({color:0x44aa88,shininess:60}),pos:[3,1,-2]},{name:'Standard',material:newTHREE.MeshStandardMaterial({color:0x44aa88,metalness:0.5,roughness:0.3}),pos:[-3,1,2]},{name:'Physical',material:newTHREE.MeshPhysicalMaterial({color:0x44aa88,metalness:0.5,roughness:0.3,clearcoat:0.5}),pos:[0,1,2]},{name:'Toon',material:newTHREE.MeshToonMaterial({color:0x44aa88}),pos:[3,1,2]}];materials.forEach((item)=>{constmesh=newTHREE.Mesh(geometry,item.material);mesh.position.set(item.pos[0],item.pos[1],item.pos[2]);mesh.castShadow=true;scene.add(mesh);});// 平面constplaneGeometry=newTHREE.PlaneGeometry(14,12);constplaneMaterial=newTHREE.MeshStandardMaterial({color:0x336699,side:THREE.DoubleSide});constplane=newTHREE.Mesh(planeGeometry,planeMaterial);plane.rotation.x=-Math.PI/2;plane.position.y=-0.5;plane.receiveShadow=true;scene.add(plane);// 标签import{CSS2DRenderer,CSS2DObject}from'three/examples/jsm/renderers/CSS2DRenderer.js';constlabelRenderer=newCSS2DRenderer();labelRenderer.setSize(window.innerWidth,window.innerHeight);labelRenderer.domElement.style.position='absolute';labelRenderer.domElement.style.top='0px';labelRenderer.domElement.style.left='0px';labelRenderer.domElement.style.pointerEvents='none';document.body.appendChild(labelRenderer.domElement);materials.forEach((item)=>{constdiv=document.createElement('div');div.textContent=item.name;div.style.color='white';div.style.background='rgba(0,0,0,0.6)';div.style.padding='4px 8px';div.style.borderRadius='4px';div.style.fontSize='14px';constlabel=newCSS2DObject(div);label.position.set(item.pos[0],item.pos[1]+1.2,item.pos[2]);scene.add(label);});// GUI 控制importGUIfrom'lil-gui';constgui=newGUI();// 光源强度控制gui.add(directionalLight,'intensity',0,2).name('主光强度');gui.add(fillLight,'intensity',0,1).name('补光强度');gui.add(ambientLight,'intensity',0,1).name('环境光强度');// 性能信息显示constperfFolder=gui.addFolder('性能信息');perfFolder.add({fps:0},'fps').name('FPS').listen();perfFolder.open();letframeCount=0;letlastTime=performance.now();functionanimate(){constnow=performance.now();frameCount++;if(now-lastTime>=1000){stats.update();perfFolder.controllers[0].setValue(frameCount);frameCount=0;lastTime=now;}stats.begin();controls.update();renderer.render(scene,camera);labelRenderer.render(scene,camera);stats.end();requestAnimationFrame(animate);}animate();window.addEventListener('resize',onWindowResize,false);functiononWindowResize(){camera.aspect=window.innerWidth/window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth,window.innerHeight);labelRenderer.setSize(window.innerWidth,window.innerHeight);}

8. 总结

9. 第二部分总结

恭喜你完成了第二部分：光照与阴影！

你已掌握：

1. ✅ 光源类型（环境光、平行光、点光源、聚光灯、半球光）
2. ✅ 光照属性与配置（颜色、强度、位置、衰减）
3. ✅ 阴影系统（启用、配置、优化）
4. ✅ 反射与折射（环境贴图、玻璃材质）
5. ✅ 光照模型与性能（材质选择、性能优化）