HTML5本身不支持建模和光照计算，环境光需通过Three.js等WebGL库实现，如new THREE.AmbientLight(0x404040, 0.3)并scene.add()；全局光照在Three.js中不可原生实现，仅能通过烘焙lightMap或屏幕空间近似模拟。
HTML5 本身不提供建模或光照计算能力，所谓“HTML5 建模”实际依赖 WebGL（如 Three.js、Babylon.js 等库），环境光和全局光照也必须通过这些库实现——原生 HTML5 + Canvas 无法直接设置 ambientLight 或 global illumination。
Three.js 中怎么添加环境光（AmbientLight）
环境光是最基础的光照类型，用于避免阴影区域完全变黑。它不带方向、不产生阴影，均匀影响所有表面。
-
AmbientLight的颜色和强度需手动指定，例如new THREE.AmbientLight(0xffffff, 0.3)表示偏白、强度为 0.3 的环境光 - 必须将创建的灯光对象用
scene.add()加入场景，否则无效 - 环境光强度不宜设为 1，否则会冲淡其他光源效果；通常 0.1–0.4 是安全范围
- 注意：Three.js R128+ 已弃用
intensity参数名（旧版叫intensity，新版统一为第二个参数，但语义仍是强度）
const ambientLight = new THREE.AmbientLight(0x404040, 0.3); // 灰色环境光 scene.add(ambientLight);
为什么 Three.js 没有真正的全局光照（Global Illumination）
Three.js 默认渲染器（WebGLRenderer）使用前向渲染，不支持光线追踪或辐射度算法，因此无法原生实现物理真实的全局光照。
- 所谓“GI 效果”在 Three.js 中只能靠近似手段：烘焙光照贴图（
Lightmap）、使用PMREMGenerator配合 HDR 环境贴图模拟间接光、或启用WebGLRenderer.shadowMap.enabled = true+ 多光源叠加营造层次 - 实时 GI 方案（如 Unity 的 Enlighten 或 Unreal 的 Lumen）目前 Web 端无等效替代；Babylon.js 的
ScreenSpaceReflectionsPostProcess或SSAO2RenderingPipeline也只是屏幕空间近似 - 若真需 GI，唯一可行路径是预烘焙：用 Blender 导出带
lightMap的 glTF 模型，Three.js 加载后手动赋值到材质的lightMap属性
glTF 模型中如何携带并启用烘焙环境光（lightMap）
真正接近“全局光照感”的实用方案是使用预计算的光照贴图，它本质是一张额外纹理，存储了静态物体接收到的间接光照信息。
立即学习“前端免费学习笔记（深入）”；
- Blender 中需开启
Bake → Type: Combined（勾选 Ambient Occlusion 和 Indirect），导出为 glTF 时确保勾选Include → Lightmaps - Three.js 加载后，模型材质（如
MeshStandardMaterial）会自动识别lightMap，但需确认材质启用了该通道：material.lightMap = lightMapTexture; material.lightMapIntensity = 1.0; - 注意：
lightMap仅对MeshStandardMaterial/MeshPhysicalMaterial生效，MeshBasicMaterial完全忽略 - 运行时不能修改
lightMap内容，它是静态烘焙结果；动态变化的光照必须用多光源混合模拟
loader.load('model.glb', (gltf) => {
gltf.scene.traverse((child) => {
if (child.isMesh && child.material.lightMap) {
child.material.lightMapIntensity = 1.2;
}
});
scene.add(gltf.scene);
});
环境光容易加，但“全局光照”在浏览器里始终是妥协的艺术：要么离线烘焙，要么用屏幕空间技巧糊弄人。别信“一键开启 GI”的宣传，检查控制台有没有报 THREE.WebGLProgram: gl.getProgramInfoLog() 错误，那往往是你试图用不支持的扩展强行模拟造成的。
