Three.js加载MTL文件中纹理时出现颜色显示偏差问题

• 颜色空间不匹配：Three.js默认对输出和颜色类纹理使用sRGB颜色空间，若MTL关联的纹理未被正确标记颜色空间，或渲染器颜色空间配置错误，就会出现颜色偏移。多数偏暖问题都是gamma校正失效导致红、黄通道权重被错误拉高引发的。
• 场景光源色温异常：如果场景中配置的环境光、平行光等光源的颜色本身偏黄、偏橙，会直接给模型叠加暖色调，与纹理原始色产生偏差。
• MTL材质参数解析或配置错误：MTL文件内置的Kd（漫反射基础色）参数如果本身偏暖，或是MTLLoader解析时没有正确把纹理和漫反射色做叠加映射，也会导致最终颜色偏暖。
• 后期处理配置错误：若使用了EffectComposer后期处理管线，未正确配置输出颜色空间，或是叠加了偏暖的调色类Pass，也会引发该问题。

• 校验颜色空间配置
  首先确认渲染器配置了正确的输出颜色空间：

  renderer.outputColorSpace = THREE.SRGBColorSpace;
  

  其次在MTL加载完成后，统一修正材质关联纹理的颜色空间，注意非颜色类纹理不要设置为sRGB空间：

  mtlLoader.load('your-model.mtl', (materials) => {
    materials.preload();
    Object.values(materials.materials).forEach(material => {
      // 仅颜色类纹理设置为sRGB空间
      if (material.map) material.map.colorSpace = THREE.SRGBColorSpace;
      // 法线、粗糙度、金属度等非颜色纹理使用无颜色空间配置
      if (material.normalMap) material.normalMap.colorSpace = THREE.NoColorSpace;
      if (material.roughnessMap) material.roughnessMap.colorSpace = THREE.NoColorSpace;
      if (material.metalnessMap) material.metalnessMap.colorSpace = THREE.NoColorSpace;
    });
    // 后续加载OBJ模型的逻辑
  });
  

• 排查场景光源参数
  临时移除场景所有原有光源，添加纯白色标准光源测试：

  // 纯白色环境光+平行光
  scene.add(new THREE.AmbientLight(0xffffff, 1));
  scene.add(new THREE.DirectionalLight(0xffffff, 1));
  

  如果此时模型颜色恢复正常，说明原有光源的色温配置存在问题，调整光源颜色为中性白即可。
• 校验MTL文件参数
  直接打开MTL文件，查看各材质的Kd配置项，如果Kd的R、G数值明显高于B数值，说明材质本身配置了偏暖的基础漫反射色，将对应Kd值修改为Kd 1.0 1.0 1.0即可让纹理完全按原始颜色呈现。
• 排查后期处理配置
  如果使用了后期处理管线，确认已经添加了OutputPass做颜色空间转换，且没有额外叠加调色、色温调整类的Pass。

内容的提问来源于stack exchange，提问作者Богдан Католик