如何在THREE.js中修改GLTF模型材质且不丢失烘焙纹理信息

核心逻辑 #

GLB格式会将所有关联纹理打包到单文件二进制数据中，经GLTFLoader加载后，模型默认挂载的MeshStandardMaterial已经持有所有烘焙纹理的实例引用，无需单独导出、导入纹理图片，直接复用这些纹理创建MeshBasicMaterial替换原有材质即可，烘焙的光照、纹理信息不会有任何损失。

实现步骤 #

• 正常引入GLTFLoader加载目标.glb模型文件
• 模型加载完成后，遍历模型场景下的所有节点，筛选出网格（Mesh）类型节点
• 提取网格原有标准材质上的烘焙纹理、基础渲染参数（如正反面渲染规则、透明属性等）
• 用提取到的参数创建新的MeshBasicMaterial实例
• 销毁旧的标准材质释放显存，将网格材质替换为新创建的基础材质

代码示例 #

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { MeshBasicMaterial } from 'three';

const loader = new GLTFLoader();
loader.load('your-baked-model.glb', (gltf) => {
  const bakedModel = gltf.scene;
  bakedModel.traverse((node) => {
    if (!node.isMesh) return;
    // 提取原有标准材质上的内置烘焙纹理
    const bakedMap = node.material.map;
    // 如有单独烘焙的AO、透明贴图可同步提取
    // const bakedAoMap = node.material.aoMap;
    // const bakedAlphaMap = node.material.alphaMap;

    // 创建基础材质，直接复用已有纹理
    const basicMaterial = new MeshBasicMaterial({
      map: bakedMap,
      // 按需传入其他贴图通道
      // aoMap: bakedAoMap,
      // alphaMap: bakedAlphaMap,
      // transparent: !!bakedAlphaMap,
      // 继承原有材质的面渲染设置，避免正反面显示异常
      side: node.material.side
    });

    // 销毁旧材质释放显存，注意不要dispose纹理，纹理需要复用
    node.material.dispose();
    node.material = basicMaterial;
  });
  scene.add(bakedModel);
});

注意事项 #

• 切换为MeshBasicMaterial后，模型不会再响应场景内的实时灯光影响，会完全显示你预烘焙到纹理上的效果，完全匹配预烘焙工作流的需求
• 如果网格使用了多材质数组，遍历材质数组按相同逻辑逐个替换即可
• 若你烘焙时将色彩、光照、阴影信息全部合并到了基础色贴图中，上述代码无需额外调整即可直接使用，显示效果和烘焙输出完全一致

内容的提问来源于stack exchange，提问作者user14656666