Three.js-从文件输入中加载Collada文件（和纹理）

Question

目前，我有2个输入，一个输入几何（.dae）文件，一个输入纹理（.png / .jpg）。 我正在尝试使用来自文件输入的那些纹理加载Collada文件。 我有2个函数，它们在文件输入更改时被调用：

• loadCollada（）：当几何文件输入更改时，使用THREE.ColladaLoader加载几何，并将几何存储在名为loadCollada的全局变量中
• loadTextures（）：当纹理文件输入更改时，使用THREE.TextureLoader加载纹理，并将纹理存储在一个名为loadTextures的全局变量中

在调用完这两个函数之后，将调用第三个函数loadModel（）。 此刻，我已经使其工作了一些； 模型最终被显示，但是纹理未正确应用，并且如果模型的上轴不是Y_UP，则显示的角度错误。 这是我为loadModel（）编写的代码：

• 从loadedCollada中提取几何图形到称为几何图形的数组中
• 使用THREE.GeometryUtils.merge（）函数将数组中的所有几何合并为单个几何（THREE.Geometry）
• 根据loadedTextures中的单个几何图形和纹理创建最终网格
• 将模型放置到场景中

任何帮助将不胜感激； 我已经设法弄清楚了一段时间。 如果我不必从用户的计算机上加载Collada文件，那很好，但是我必须以某种方式使它从文件输入中起作用。 谢谢 ：）

Answer 1

我最近从用户文件输入中对OBJ + MTL文件进行了相同类型的操作。

对three.js（r88） https://github.com/mrdoob/three.js/pull/11259的添加使您可以覆盖资源URL（将从文件上传中选择）。

我还看到了这个示例https://github.com/mrdoob/three.js/pull/12591 ，该示例用于帮助我解决加载OBJ + MTL文件的问题，并且只要它们使用loadingManager，它就适用于大多数模型加载器。 这也使得仅使用一个文件输入并同时选择模型/纹理成为可能（因此它也可以支持拖放）。

因此，我根据上述示例对collada格式做了一个小提琴： https ://jsfiddle.net/Lhrvna7a/45/

相关部分是：

$('.inputfile').change(function (e) {

var files = e.currentTarget.files;
var dae_path;

var extraFiles = {}, file;
for (var i = 0; i < files.length; i++) {
  file = files[i];
  extraFiles[file.name] = file;

 //Filename ends in .dae/.DAE
  if (files[i].name.match(/\w*.dae\b/i)) {
    dae_path = files[i].name;
  }
}

const manager = new THREE.LoadingManager();
manager.setURLModifier(function (url, path) {       

  url = url.split('/');
  url = url[url.length - 1];

  if (extraFiles[url] !== undefined) {

    var blobURL = URL.createObjectURL(extraFiles[url]);
    console.log(blobURL); //Blob location created from files selected from file input
    return blobURL;     

  }
  return url;
});

var loader = new THREE.ColladaLoader(manager);
loader.load(dae_path, function (collada) {

  console.log(collada);
  var dae = collada.scene;

  scene.add(dae);

});                 
  });
}   

加载模型后，我假设您提到的其他操作（例如合并）可以与正常加载模型时相同的方式执行。

至于模型的角度/方向，模型可能已经在使用与three.js不同的坐标系的软件中创建。 我不确定是否可以事先在collada中了解模型的旋转（也许我错了），但是设置dae.rotation.set(0, 0, 0); ）可能就足够了dae.rotation.set(0, 0, 0); 在将模型添加到场景之前。

希望这对您有帮助。