如何在three.js中加载指定文件内容而不是路径的3-D模型？答案

【问题标题】：How to load 3-D models specifying file content rather than path in three.js?如何在three.js中加载指定文件内容而不是路径的3-D模型？
【发布时间】：2016-08-31 17:58:48
【问题描述】：

我想创建一个在线查看器，用户可以在其中上传模型并查看它们，而不必在源代码中编辑路径。由于浏览器不允许检索文件路径，但我可以读取文件的内容，如何在给定文件内容的情况下加载模型（obj、ply、mtl 等）？

【问题讨论】：

标签： javascript three.js load 3d-model

【解决方案1】：

有几种方法可以做到这一点，但如果您访问 github three.js 存储库，在示例中您会看到一个 obj 加载器。有mtl、stl、collada等的例子。

http://threejs.org/examples/webgl_loader_obj.html

存储库有示例文件夹，其中有一个包含所有示例加载器的 js 文件夹：

https://github.com/mrdoob/three.js/tree/master/examples/js/loaders

如果要颠覆内部的三个loader，每个loader示例都有一个parse(text)方法。

【讨论】：

是的，我知道。使用的约定是loader.load(url, ..)，其中 loader 可以用于 Obj、Ply、Fbx。但是在将文件上传到浏览器时我没有url，只有文件的内容。如何调用此函数以及使用什么参数？
大部分加载器都有解析方法。可以直接使用github.com/mrdoob/three.js/blob/master/examples/js/loaders/…
是的，使用解析方法。 ^

【解决方案2】：

刚刚发现three.js 在线编辑器可以做到这一点@http://threejs.org/editor/。

文件 -> 导入。

【讨论】：

【解决方案3】：

您可以使用the HTML5 filereader API，然后您可以直接从相应的加载器调用解析方法。

或者您可以使用文件阅读器，将文件读入数据 url 并加载数据 url 而不是您的普通 url。

允许用户加载模型文件的 HTML 代码

<h1>Model File Reader</h1>
<div>
  Select a model file: 
  <input type="file" id="fileInput">
</div>

处理onload事件的Javascript代码：

window.onload = function() {
    var fileInput = document.getElementById('fileInput');

    fileInput.addEventListener('change', function(e) {

      // file selection is done you can now read the file
      var file = this.files[0];

      // set your file encoding
      var encoding = 'ISO-8859-1'; 

      // create a file reader
      var reader = new FileReader();

      // set on load handler for reader
      reader.onload = function(e) {
          var result = reader.result;

          // parse using your corresponding loader
          loader.parse( result );
      }

      // read the file as text using the reader
      reader.readAsText(file, encoding);

    });
}

查看here 了解有关文件阅读器类的更多信息

【讨论】：