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

Question

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

Answer 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)方法。

Answer 2

您可以使用HTML5 文件阅读器 API，然后您可以直接从相应的加载器调用 parse 方法并获取结果。

或者您可以使用文件阅读器，将文件读入数据 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);

    });
}

在这里查看有关文件阅读器类的更多信息

Answer 3

刚刚发现three.js 在线编辑器这样做@http: //threejs.org/editor/。

文件 -> 导入。