如何在Three.js中为导入的GLTF模型正确应用纹理？

你的问题核心是导入的GLTF背心模型UV坐标适配问题：立方体自带的UV是合理展开的，所以纹理显示正常；而背心模型要么UV没正确展开，要么纹理未设置重复模式，导致被过度拉伸成纯色。以下是具体解决步骤和修改后的代码：

1. 检查并修复模型UV坐标 #

导入的模型可能在建模阶段UV展开不正确，导致纹理无法正常映射。可以用Blender打开prom_suit/scene.gltf文件：

• 选中背心模型进入编辑模式
• 打开UV编辑器，查看UV布局是否合理（无重叠、无过度拉伸）
• 如果UV有问题，按U键选择合适的展开方式（比如「智能UV投影」）重新展开，再导出为GLTF格式替换原文件

2. 设置纹理重复与包裹模式 #

给纹理添加重复模式，避免因UV范围和纹理尺寸不匹配导致的拉伸问题，修改后的代码如下：

const textureLoader2 = new THREE.TextureLoader();
const newTexture2 = textureLoader2.load('Fabric_Knitted_006_basecolor.jpg');
newTexture2.flipY = false;

// 开启纹理重复模式
newTexture2.wrapS = THREE.RepeatWrapping;
newTexture2.wrapT = THREE.RepeatWrapping;
// 根据模型UV大小调整重复次数，可自行修改数值
newTexture2.repeat.set(4, 4);

const gltfLoader = new GLTFLoader();
gltfLoader.load('prom_suit/scene.gltf', (gltf) => {
  // 简化缩放写法
  gltf.scene.scale.setScalar(0.1);
  const mesh = gltf.scene.getObjectByName('Object_212');

  // 确保材质为MeshStandardMaterial，避免原材质参数干扰
  if (!(mesh.material instanceof THREE.MeshStandardMaterial)) {
    mesh.material = new THREE.MeshStandardMaterial({
      map: newTexture2,
      color: 0xffffff // 颜色设为白色，避免覆盖纹理细节
    });
  } else {
    mesh.material.map = newTexture2;
    mesh.material.color.set(0xffffff);
    mesh.material.needsUpdate = true;
  }

  scene.add(gltf.scene);
});

额外注意事项 #

• 确认Object_212是背心对应的正确网格对象，避免选错子对象导致纹理没应用到正确位置
• 如果调整重复次数后仍无改善，优先检查建模软件中的UV展开，这是此类问题最常见的根源

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