Three.js 阴影烘焙与环境光遮蔽AO贴图实战在 Web 3D 展厅、建筑漫游与数字孪生大屏中如果场景只依赖实时的平行光阴影Shadow Mapping墙角与地面交界处、家具底部与背光处往往呈现出一片死黑或极不真实的塑料平光感开启 4 盏实时投射阴影的光源会让移动端 Draw Call 与显存带宽直接打爆帧率瞬间跌破 20 FPS。在电影与 AAA 游戏工业中解决该问题的终极武器是**“光影烘焙Light Baking”与“环境光遮蔽Ambient Occlusion, 简称 AO”**。通过在 Blender 或 3ds Max 中预先离线计算全局光照Global Illumination与漫反射反弹并将光影与转角阴影预先烘焙进两张轻量的二维纹理贴图Lightmap AO Map中我们可以在 Web 端以0 额外 Draw Call、0 实时光源开销呈现出真实世界般温润细腻的建筑空间质感。实时阴影 vs AO 烘焙贴图原理对比flowchart LR subgraph RealtimeShadow [传统实时阴影 (Realtime Shadow Map)] Light[实时光源] -- ShadowPass[每帧额外产生 1 次全场景 Shadow Pass] ShadowPass -- HardEdge[硬边锯齿走样 无法计算复杂漫反射反弹 性能消耗极大] end subgraph BakedAO [预烘焙 AO 与光照贴图 (Lightmap / AO)] Offline[Blender 离线光线追踪计算 10 分钟] -- AOTexture[烘焙生成单通道 AO 纹理 (uv2 映射)] AOTexture -- MeshPBR[运行时 PBR 材质乘法叠加: 0 额外渲染通行极致电影级柔光!] endThree.js 材质双 UV 映射体系uv 与 uv2在 3D 模型中应用 AO 贴图和光照贴图必须理解第二套纹理坐标uv2uv第一套坐标用于基础漫反射纹理Map与法线贴图NormalMap通常会在表面高频重复平铺Tilinguv2第二套坐标必须是不重叠、展开至 $[0, 1]$ 空间的唯一展开图Unique Lightmap UV Unwrap专门用于精准对应整座建筑每一个角落的阴影遮蔽信息。如果几何体中缺少uv2属性Three.js 会在控制台抛出警告且 AO 贴图无法生效。import * as THREE from three; export function setupMeshWithAOMap( mesh: THREE.Mesh, aoTexture: THREE.Texture, lightmapTexture?: THREE.Texture ) { const geometry mesh.geometry; // 1. 检查并自动补充 uv2 属性若导出时已有一套 uv可复用或读取第二套 if (!geometry.attributes.uv2 geometry.attributes.uv) { // 将基础 uv 属性克隆为 uv2 属性 geometry.setAttribute(uv2, geometry.attributes.uv); } // 2. 配置 AO 贴图属性 aoTexture.flipY false; // GLTF 规范贴图 Y 轴不翻转 aoTexture.colorSpace THREE.NoColorSpace; // AO 是纯物理遮蔽数据坚决不能应用 sRGB 伽马校正 // 3. 配置 PBR 标准材质 (MeshStandardMaterial) const material new THREE.MeshStandardMaterial({ color: #e2e8f0, roughness: 0.8, metalness: 0.1, aoMap: aoTexture, aoMapIntensity: 1.2, // AO 阴影浓淡强度系数 (1.0~1.5 呈现深沉水墨转角) }); if (lightmapTexture) { lightmapTexture.flipY false; lightmapTexture.colorSpace THREE.SRGBColorSpace; // 光照贴图包含颜色信息需开启 sRGB material.lightMap lightmapTexture; material.lightMapIntensity 1.0; } mesh.material material; }生产级光影质感优化三部曲环境光贴图Environment Map / IBL协同AO 贴图的作用正是遮蔽掉不合理的 IBL 环境反射光。为场景配置一张高动态范围的 HDR 全景图scene.environment hdrTexture结合 AO 贴图模型在暗处沉稳沉静在亮处通透有光轻量朱砂点睛微光源在静态烘焙的柔和空间基底上仅保留 1 盏低强度的点光源PointLight随鼠标移动形成画龙点睛的动态高光掠影显存纹理压缩KTX2 / Basis将 2048x2048 的 AO 贴图转换为 KTX2 压缩纹理文件体积从 16MB 锐减至 800KB实现移动端秒开。以离线算力烘焙永恒光影在极低消耗下赋予 Web 3D 空间以水墨丹青般的浑厚层次。