使用Three.js替换GLTF模型纹理后颜色过淡的问题排查

阿华AIGC实验室

2026-5-6

Three.js替换GLTF模型纹理后颜色偏淡的问题排查

我在Three.js中有一个带纹理的模型，希望页面加载时替换GLTF文件中定义的纹理。参考相关示例后编写了以下代码：

var images = [ "./textures/01.jpg", // "./textures/01.jpg", ];
var texture = new THREE.TextureLoader().load( images[0] );
var my_material = new THREE.MeshBasicMaterial({map: texture});
// load the model
var loader = new GLTFLoader().setPath( 'models/gltf/' ); // trex
loader.load( 'creature_posed.gltf', function ( gltf ) {
  gltf.scene.traverse( function ( child ) {
    if ( child.isMesh ) {
      // The textures go for a double flip, I have no idea why
      // Texture compensation
      texture.flipX = false;
      texture.flipY = false;
      child.material = my_material;
      texture.needsUpdate = true;
    }
  } );
var model = gltf.scene;

但替换后的纹理颜色明显偏淡，已排除纹理本身的问题，请问我遗漏了什么步骤？

问题原因及解决办法

1. 材质类型不匹配（最可能的核心原因）

你用了MeshBasicMaterial，这种材质是完全不受光照影响的，只会直接平铺纹理的原始颜色。但GLTF导出的模型默认使用的是MeshStandardMaterial或MeshPhysicalMaterial，这类材质会和场景中的光照、环境贴图等交互，呈现出更真实的光影层次。直接替换成MeshBasicMaterial会丢失所有光照交互，导致纹理看起来平淡发灰。

解决办法：换成和原材质匹配的类型，比如MeshStandardMaterial，同时根据原模型材质的参数调整metalness和roughness（可以先打印原材质属性做参考）：

// 替换材质创建部分
var texture = new THREE.TextureLoader().load( images[0] );
// 用MeshStandardMaterial替代MeshBasicMaterial
var my_material = new THREE.MeshStandardMaterial({
  map: texture,
  metalness: 0.1, // 可根据原材质调整，默认0.5
  roughness: 0.8  // 可根据原材质调整，默认0.5
});

2. 纹理颜色空间未正确设置

GLTF规范中，基础颜色纹理默认使用sRGB颜色空间，但Three.js的TextureLoader加载纹理时，默认可能不是这个空间（取决于版本）。如果颜色空间不匹配，纹理会被错误地线性解码，导致颜色偏淡发白。

解决办法：给纹理设置正确的颜色空间：

Three.js r152及以后版本：

texture.colorSpace = THREE.SRGBColorSpace;

旧版本（r151及之前）：

texture.encoding = THREE.sRGBEncoding;

3. 直接替换材质丢失原属性

你直接把child.material替换成了新创建的材质，这会丢失原模型材质的很多关键属性，比如双面渲染（side: THREE.DoubleSide）、透明度、法线贴图、AO贴图等，这些属性缺失也可能导致视觉上的颜色异常。

更稳妥的替代方案：不替换整个材质，只修改原材质的map属性：

gltf.scene.traverse( function ( child ) {
  if ( child.isMesh ) {
    texture.flipX = false;
    texture.flipY = false;
    texture.colorSpace = THREE.SRGBColorSpace; // 加上颜色空间设置
    // 只替换纹理，保留原材质的其他属性
    child.material.map = texture;
    child.material.needsUpdate = true; // 告诉Three.js材质已更新
  }
} );