Three.js中GLB模型纹理映射异常问题求助

问题描述 #

我是Three.js新手，上传了一个圆角立方体GLB模型并尝试为其添加纹理，但纹理显示异常——仅模型内部的纹理显示正常，外部完全错乱。我猜测问题可能和UV坐标有关，但对这个概念并不了解。模型与纹理本身均无问题，已在多个网站单独验证。我的代码如下：

const textureloader = new THREE.TextureLoader();

const material = new THREE.MeshStandardMaterial({
  map: textureloader.load('./assets/textures/albedo/albedo-wood.png'),
});

var mat;

loader.load(modelPath, (glb) => {
      
  const mesh = glb.scene;

  glb.scene.traverse( function( object ) {  
    if ((object instanceof THREE.Mesh))
      { 
        if (object.material) {
          mat = object.material;

          object.map = material.map;
          object.map.needsUpdate = true;
        }
      } 
  });

  this.scene.add(glb.scene);

问题分析与解决 #

1. 代码中的核心错误 #

你代码里犯了一个关键错误：Mesh对象本身没有map属性，map是材质（Material）的专属属性。你写的object.map = material.map完全无效，正确的做法是修改材质的map，或者直接替换材质。

修正后的遍历逻辑可以改成这样：

glb.scene.traverse( function( object ) {  
  if (object instanceof THREE.Mesh) { 
    // 方案1：直接替换材质（适合不需要保留原材质其他属性的场景）
    object.material = material.clone();
    
    // 方案2：保留原材质，仅替换纹理（适合需要保留原材质粗糙度、金属度等属性的场景）
    // object.material.map = material.map;
    // object.material.needsUpdate = true;
  } 
});

2. 纹理仅内部显示的可能原因 #

你遇到的“内部正常、外部异常”，大概率是以下两个原因之一：

• 模型面法线方向颠倒
  GLB模型导出时可能把面的正反方向搞反了，Three.js默认开启backfaceCulling（背面剔除）——只渲染面的正面。如果模型外部的面是“背面”，就会被剔除，看起来只有内部（实际是模型的正面）显示纹理。

可以先开启双面渲染测试：

const material = new THREE.MeshStandardMaterial({
  map: textureloader.load('./assets/textures/albedo/albedo-wood.png'),
  side: THREE.DoubleSide // 强制渲染正反两面
});

如果开启后外部纹理正常显示，那就是法线方向的问题。长期解决的话，建议在建模软件里修正模型的面法线；如果临时用，保留DoubleSide也可以，但会增加一定渲染开销。

• UV坐标与纹理翻转不一致
  Three.js的TextureLoader默认会将纹理的Y轴翻转（flipY=true），但很多建模软件导出的UV是不翻转Y轴的，这就会导致纹理映射颠倒，外部显示错乱，而内部因为面是反向的，反而显示正常。

可以尝试关闭纹理的Y轴翻转：

const texture = textureloader.load('./assets/textures/albedo/albedo-wood.png');
texture.flipY = false; // 关闭默认翻转，匹配建模软件的UV方向

const material = new THREE.MeshStandardMaterial({ map: texture });

总结排查步骤 #

1. 先修正代码中的材质赋值错误，确保纹理正确绑定到材质上；
2. 开启DoubleSide测试是否是面法线方向问题；
3. 设置texture.flipY=false，排查UV翻转导致的显示异常。

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