Added possibility to load MTL files via File object

[cnspaha]

Use case:
The user has the possibility to load a obj + mtl file via an input file tag (multiple files allowed) into a viewer.
So before I use the MTLLoader I seperate the obj file from the mtl and map (.png, .jpg) files.
Afterwards I wanna load the mtl file but I only have the File object at hand no URL.
So I first load the map files as data urls and then load the mtl file and create the textures from the map files if needed.

Any suggestions? Feel free to criticize ;)

PS: If this change is approved I also will open another PR for the documentation of the function "loadByFiles".

[donmccurdy]

@cnspaha you can achieve this more easily with a recent addition in three.js r88, LoadingManager.setURLModifier.

Here's an example. The important parts are:

var extraFiles = {
  'foo.mtl': file1,
  'foo.png': file2
};

const manager = new THREE.LoadingManager();
manager.setURLModifier((url, path) => {
  if (files[url] !== undefined) {
    return URL.createObjectURL( files[url] );
  }
  return url;
});

const loader = new THREE.OBJLoader( manager );
loader.load( 'foo.obj', (model) => { ... });

Practically, you'd need to use the input tag to determine the names of the files and create the extraFiles object from that.

[cnspaha]

@donmccurdy
Wow... that's awesome...
worked with r85 so far, but updated today. really saves quite some work, wished I had known before I made so many changes :/

for these who are interested, here's an working example code (for r88):

    $('.inputfile').change(function (e) {
        var files = e.currentTarget.files;
        var extraFiles = {},
          file;
        for (var i = 0; i < files.length; i++) {
          file = files[i];
          extraFiles[file.name] = file;
        }

        const manager = new THREE.LoadingManager();
        manager.setURLModifier((url, path) => {
          if (extraFiles[url] !== undefined) {
            return URL.createObjectURL(extraFiles[url]);
          }
          return url;
        });

        var mtlloader = new THREE.MTLLoader(manager);
        mtlloader.load('D3D-P-LOW-001.mtl', (materials) => {
          const loader = new THREE.OBJLoader(manager);
          loader.setMaterials(materials);
          loader.load('D3D-P-LOW-001.obj', (model) => {
            console.log(model);
          });
        });


      });

[donmccurdy]

Good to hear it's working! One thing I forgot to mention when using URL.createObjectURL is that you may want to save the URL and revoke it after the model has loaded, like URL.revokeObjectURL(url), to free up that memory.