Question

目前，我有2个输入，一个用于几何（.dae）文件，另一个用于纹理（.png / .jpg）。我尝试使用文件输入中的那些纹理加载Collada文件。我有2个函数，当文件输入改变时调用：

loadCollada（）：使用THREE.ColladaLoader在几何文件输入更改时加载几何体，并将几何体存储在名为 loadedCollada
loadTextures（）：使用THREE.TextureLoader在纹理文件输入更改时加载纹理，并将纹理存储在名为 loadedTextures

在调用这两个函数之后，调用第三个函数loadModel（）。目前，我已经开始工作了;模型最终显示，但纹理未正确应用，如果模型的上轴不是Y_UP，则显示错误的角度。以下是我为loadModel（）编写的代码：

将 loadedCollada 中的几何图形提取到名为 geometry
使用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的问题文件，它应该适用于大多数模型加载器，只要他们使用loadManager。这也使它成为可能只使用一个文件输入并同时选择模型/纹理（因此它也可以支持拖放）。

因此，基于上面的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);

});                 
  });
}

加载模型后，我假设您提及的其他内容（例如合并）可以执行相同的操作正如他们正常加载模型时一样。

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

希望这对你有所帮助。

Three.js - 从文件输入

1 个答案: