I'm using the obj/mtl loader provided by three.js to load several obj files including mtl. Now I need to load multiple objs. But I need to load them one after another. I already used THREE.DefaultLoadingManager.onProgress to add a "Loading Screen". But how can I check for loaded === total within the loop for adding new objs. Or should I use a recursive function?

Hope you can help me. Thanks

I'm using the obj/mtl loader provided by three.js to load several obj files including mtl. Now I need to load multiple objs. But I need to load them one after another. I already used THREE.DefaultLoadingManager.onProgress to add a "Loading Screen". But how can I check for loaded === total within the loop for adding new objs. Or should I use a recursive function?

Hope you can help me. Thanks

• javascript
• three.js

3 Answers 3

There is a callback function that is called when an object is loaded. There you can trigger the next loading step.

var index = 0;
var files = ['file1.obj','file2.obj'];

var objLoader = new THREE.OBJLoader();

function loadNextFile() {

  if (index > files.length - 1) return;

  objLoader.load(files[index], function(object) {

    scene.add(object);

    index++;
    loadNextFile();

  });

}

loadNextFile();

This basic code needs to be extended to load materials.

@brakebein's answer helped me to get this solution right, so I thought I would chime in with my full code that worked for me (fwiw) - THANKS BRAKEBEIN! :)

// Texture and OBJ loader
let OBJfiles = ['love3','rose'];
let _MTLLoader = new THREE.MTLLoader().setPath( 'models/' );

// this function will load the next MTL and OBJ file in the queue
function loadNextMTL () {

    if (index > OBJfiles.length - 1) return;

    _MTLLoader.load( OBJfiles[index]+'.mtl', function ( materials ) {
        materials.preload();
        new THREE.OBJLoader()
            .setMaterials( materials )
            .setPath( 'models/' )
            .load( OBJfiles[index]+'.obj', function ( group ) {
                mesh = group.children[0];
                mesh.material.side = THREE.DoubleSide;
                mesh.position.y = 0.25;
                mesh.scale.set(0.02,0.02,0.02);
                markerRoot[index].add(mesh);

                index++; // incrememnt count and load the next OBJ
                loadNextMTL();

            });
            //, onProgress, onError > These can be used to keep track of the loads
        });

}

loadNextMTL (); // kick off the preloading routine

You could check THREE.DefaultLoadingManager.onLoad.
That should do the Job, without trying.