Three.js从文件输入加载Collada模型及纹理的问题求助

嘿，我来帮你搞定这两个头疼的问题！你已经把本地文件加载的基础逻辑搭起来了，咱们一步步拆解修复纹理映射和方向轴的问题：

你当前提取几何合并后统一加纹理的方式，很容易丢失Collada模型原生的UV映射、材质关联这些关键信息。建议调整loadModel()的逻辑，直接复用模型原有的网格结构来绑定纹理：

1. 先修正纹理的翻转设置 #

Collada模型的纹理坐标系通常和Three.js默认的Y轴方向相反，加载纹理时必须关闭翻转，否则纹理会上下颠倒：

function loadTextures(event) {
  const file = event.target.files[0];
  const url = URL.createObjectURL(file);
  const loader = new THREE.TextureLoader();
  
  loader.load(url, (texture) => {
    texture.flipY = false; // 这一步是关键！
    loadedTextures = texture;
    loadModel();
  });
}

2. 直接为模型原生网格绑定纹理 #

别再提取几何合并了，直接遍历Collada场景里的所有网格对象，把加载好的纹理赋值给对应的材质——这样能完整保留模型原有的层级、UV和材质逻辑：

function loadModel() {
  // 确保两个资源都加载完成
  if (!loadedCollada || !loadedTextures) return;

  // 遍历Collada场景下的所有子对象
  loadedCollada.scene.traverse((child) => {
    if (child.isMesh) {
      // 如果网格已有材质，直接替换纹理并标记更新
      if (child.material) {
        child.material.map = loadedTextures;
        child.material.needsUpdate = true; // 通知Three.js材质已修改
      } else {
        // 没有材质的话，创建一个带纹理的标准材质
        child.material = new THREE.MeshStandardMaterial({
          map: loadedTextures,
          side: THREE.DoubleSide // 可选：解决单面纹理不显示的问题
        });
      }
    }
  });

  // 把整个Collada场景添加到你的主场景里
  scene.add(loadedCollada.scene);
}

Collada模型可能用Z轴作为向上轴（Three.js默认是Y轴），有两种简单的修复方式：

1. 加载时直接指定向上轴 #

初始化ColladaLoader的时候，直接设置模型的向上轴，比如模型是Z_UP的话：

function loadCollada(event) {
  const file = event.target.files[0];
  const url = URL.createObjectURL(file);
  const loader = new THREE.ColladaLoader();
  
  // 把模型的向上轴设为Z轴
  loader.up = new THREE.Vector3(0, 0, 1); 
  
  loader.load(url, (collada) => {
    loadedCollada = collada;
    loadModel();
  });
}

2. 加载后旋转模型调整方向 #

如果不确定模型的向上轴，也可以在加载后对整个场景对象进行旋转，比如把Z轴向上的模型转成Y轴向上：

function loadModel() {
  if (!loadedCollada || !loadedTextures) return;

  // 绕X轴旋转-90度，把Z轴转到Y轴的方向
  loadedCollada.scene.rotation.x = -Math.PI / 2;

  // ... 上面的纹理绑定逻辑 ...
}

• 如果你用的是新版本Three.js，THREE.GeometryUtils已经被废弃了，要是实在需要合并几何，得用THREE.BufferGeometryUtils.mergeBufferGeometries，但前提是所有几何的UV结构完全一致。
• 调试的时候可以打开浏览器控制台，打印loadedCollada.scene看看里面的网格结构，确认UV和材质是否存在，能帮你快速定位问题。

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