Three.js静态场景的灯光烘焙实现咨询

阿华AIGC实验室

2026-4-17

嘿，我完全懂你想在Three.js里搞定静态场景灯光优化的需求——不想每帧都重复计算光照，又不想依赖Blender烘焙，就想在代码里直接解决对吧？其实Three.js里确实有不少针对静态场景的灯光优化方案，不用外部工具就能实现，下面给你捋几个实用的思路：

1. 用光照贴图（Lightmap）固化光照效果

这是最常用的静态场景灯光烘焙方式，原理是先把场景的光照信息渲染成一张纹理，再把这张纹理贴到模型材质上，之后就不用再让灯光参与每帧计算了。步骤大概是这样：

先准备好Lightmap UV：光照贴图需要独立的UV坐标（不能和普通纹理UV冲突），如果你的模型没有的话，可以用Three.js的LightMapUVGenerator生成，或者提前在建模软件里分好第二组UV。
离屏渲染生成光照纹理：创建一个WebGLRenderTarget作为离屏渲染目标，临时替换模型材质为纯色材质，把场景的光照效果渲染到这个目标上，得到光照纹理。
绑定光照贴图到材质：恢复模型原材质，把生成的光照纹理设为材质的lightMap，调整lightMapIntensity控制亮度，之后材质就会直接用这张纹理的光照效果，不用再响应实时灯光了。

简单的代码示例：

// 创建离屏渲染目标，尺寸可以根据需求调整
const renderTarget = new THREE.WebGLRenderTarget(1024, 1024);

// 临时替换模型材质，确保能正确捕捉光照
scene.traverse(obj => {
  if (obj.isMesh) {
    obj.userData.originalMat = obj.material;
    obj.material = new THREE.MeshBasicMaterial({ color: 0xffffff });
  }
});

// 渲染光照到离屏目标
renderer.setRenderTarget(renderTarget);
renderer.render(scene, camera);
renderer.setRenderTarget(null);

// 恢复原材质并绑定光照贴图
scene.traverse(obj => {
  if (obj.isMesh) {
    obj.material = obj.userData.originalMat;
    obj.material.lightMap = renderTarget.texture;
    obj.material.lightMapIntensity = 1.2; // 按需调整亮度
    obj.material.needsUpdate = true;
  }
});

// 之后可以移除场景中的灯光，或者禁用它们的更新
scene.traverse(obj => {
  if (obj.isLight) obj.visible = false;
});

2. 禁用材质的灯光响应

如果你的场景只需要一次光照计算，之后完全静态，可以在第一帧渲染完成后，直接把所有模型材质的lights属性设为false——这样材质就会停止响应场景中的灯光，固定住第一帧的光照效果。这个方法比光照贴图简单，适合对光照精度要求不那么高的场景：

// 确保第一帧已经渲染完成后执行
scene.traverse(obj => {
  if (obj.isMesh && obj.material.lights !== undefined) {
    obj.material.lights = false;
    obj.material.needsUpdate = true; // 触发材质更新
  }
});