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