Как загрузить трехмерные модели с указанием содержимого файла, а не пути в файле Three.js?

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

Если вы хотите уничтожить внутренние три загрузчика, каждый пример загрузчика имеет метод синтаксического анализа (текст).

Answer 2

Вы можете использовать API для чтения файлов HTML5, а затем вызвать метод parse из соответствующего загрузчика непосредственно с результатом.

Или вы можете использовать программу чтения файлов, прочитать файл в URL-адрес данных и загрузить URL-адрес данных вместо обычного URL-адреса.

HTML-код, позволяющий пользователю загрузить файл модели

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

Код Javascript для обработки события onload:

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/.

Файл -> Импорт.