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

Posted 2023-03-23

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

【英文标题】：Three.js - Load Collada file (and textures) from file inputs

【发布时间】：2018-09-02 14:03:20

【问题描述】：

目前，我有 2 个输入，一个用于几何 (.dae) 文件，一个用于纹理 (.png/.jpg)。我正在尝试使用文件输入中的这些纹理加载 Collada 文件。我有 2 个函数在文件输入更改时调用：

loadCollada()：使用 THREE.ColladaLoader 在几何文件输入发生变化时加载几何，并将几何存储在名为 loadedCollada 的全局变量中 loadTextures()：使用 THREE.TextureLoader 在纹理文件输入发生变化时加载纹理，并将纹理存储在名为 loadedTextures 的全局变量中

在这两个函数都被调用之后，第三个函数 loadModel() 被调用。目前，我已经让它工作了一些；模型最终被显示，但纹理没有正确应用，如果模型的上轴不是 Y_UP，它会以错误的角度显示。以下是我为 loadModel() 编写的代码的作用：

将几何图形从 loadedCollada 提取到一个名为 geometries 的数组中 使用 THREE.GeometryUtils.merge() 函数将阵列中的所有几何图形组合成一个几何图形 (THREE.Geometry) 从 loadedTextures 中的单个几何体和纹理创建最终网格 将模型放入场景中

对此的任何帮助将不胜感激；我一直试图弄清楚它已经有一段时间了。如果我不必从用户的机器上加载 Collada 文件就可以了，但我必须以某种方式让它从文件输入中工作。谢谢:)

【问题讨论】：

你能发布你描述的代码吗？不清楚你在这里问什么，也无法从描述中重现。

【参考方案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);

);                 
  );
   

加载模型后，我假设您提到的其他事情（例如合并）可以执行相同的操作 就像正常加载模型时一样。

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

希望这对您有所帮助。

【讨论】：

谢谢！我最终采取了另一种方法，而不是我发布的方法。我没有将几何体和纹理合并在一起来创建一个新模型，而是加载了 Collada 文件，然后查看它以找到与文件名匹配的纹理贴图，然后用纹理文件中的贴图替换这些贴图。