CODEWITHSUNDEEP
javascriptthree.jsload3d-model
Vikas Thamizharasan
Vikas Thamizharasan

Reputation: 1

How to load 3-D models specifying file content rather than path in three.js?

I want to create an online viewer where a user can upload models and view them, rather than having to edit the path in the source code. Since browsers don't allow to retrieve file path but I can read the contents of the file, how do I load a model (obj, ply, mtl etc) given the contents of the file?

Upvotes: 0

Views: 2963

Answers (3)

Wilt
Wilt

Reputation: 44326

You can use the HTML5 filereader API and then you can call parse method from the corresponding loader directly with the result.

Or you can use the file reader, read the file into a data url and load the data url instead of your normal url.

HTML code allowing user to load the model file

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

Javascript code to handle the onload event:

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);

    });
}

Check here for more information on the file reader class

Upvotes: 0

Vikas Thamizharasan
Vikas Thamizharasan

Reputation: 1

Well just found out that the three.js online editor does this @http://threejs.org/editor/ .

File -> Import.

Upvotes: 0

Radio
Radio

Reputation: 2853

There a couple ways to do it, but if you go to the github three.js repository, in the examples you'll see an obj loader. There are examples with mtl, stl, collada, etc.

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

The repository has the examples folder which has a js folder with all the example loaders:

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

If you want to subvert the internal three loader, each loader example has a parse(text) method.

Upvotes: 1

Related Questions