three.jsのパスではなく、ファイルの内容を指定する3-Dモデルを読み込む方法は？

Question

ソースコードのパスを編集するのではなく、モデルをアップロードして表示できるオンラインビューアを作成したいと考えています。 ブラウザはファイルパスを取得することはできませんが、ファイルの内容を読み取ることができるため、ファイルの内容を指定してモデル（obj、ply、mtlなど）をロードするにはどうすればよいですか？

Answer 1

いくつかの方法がありますが、github three.jsリポジトリに行くと、例ではobjローダーが表示されます。

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

は、あなたがしたい場合：など

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

リポジトリは、すべての例ローダーとjsのフォルダを持っている例フォルダがありMTL、STL、COLLADA、との例があります。内部の3つのローダーを破壊するために、各ローダーの例は解析（テキスト）メソッドを持っています。

Answer 2

まあ、three.jsのオンラインエディタではこれが@http://threejs.org/editor/であることがわかりました。

ファイル - >インポート。

Answer 3

the HTML5 filereader APIを使用して、対応するローダから解析メソッドを直接呼び出すことができます。

ファイルリーダーを使用して、ファイルをデータURLに読み込み、通常のURLの代わりにデータURLを読み込むことができます。

HTMLコードのonloadイベントを処理するため、ユーザは

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

モデルファイルをロードできるようにする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ファイルリーダークラス

の詳細については、