Loading multiple Collada objects in THREE.js

Question

I load several car models using a loop in THREE.js, but the problem is that once it loads all objects, but for a while it does not load all objects. For example, if a loop has 3 iterations, it will load 2 objects sometime, sometime it loads 1 and sometime it loads all three objects. I do not know why? I searched a lot, but did not find anything useful. Here is the code.

for (var k = 1; k <= myWorld.noOfEnemies(); k++) { myWorld.setWorldEnemyCar(k); loader2.load('obj/us/us_police_car.dae', function colladaReady(collada) { object3 = collada.scene; object3.scale.x = object3.scale.y = object3.scale.z = 2; object3.updateMatrix(); object3.position.x = myWorld.enemyCar.position.x; object3.position.y = myWorld.enemyCar.position.y; object3.position.z = myWorld.enemyCar.position.z; object3.rotation.x = -(Math.PI / 2); object3.rotation.z = (Math.PI / 2); enemyModels.push(object3); //localObject.rotation.z = -(Math.PI / 2); //collidableMeshList3 = localObject; //console.log(collidableMeshList3); // init(); // animate(); }); } 

After that, another bootloader in which I have the functions init() and animate()

 loader2.load('obj/us/us_police_car.dae', function colladaReady(collada) { localObject = collada.scene; localObject.scale.x = localObject.scale.y = localObject.scale.z = 2; localObject.updateMatrix(); localObject.position.x = 0; localObject.position.y = 0; localObject.position.z = 0; localObject.rotation.x = -(Math.PI / 2); localObject.rotation.z = (Math.PI / 2); //localObject.rotation.z = -(Math.PI / 2); //collidableMeshList3 = localObject; //console.log(collidableMeshList3); //scene.add(localObject); init(); animate(); }); 

This works fine, but cannot figure out what the problem is with the previous one.

Answer 1

There seems to be a known issue when reusing the same instance of the collada bootloader to load multiple collada files.

The following code works reliably for me (at least in chrome and firefox):

 scene = new THREE.Scene(); // setup lighting etc. load('/path/someColladaModel.dae'); load("/path/someOtherColladaModel.dae"); load("/path/yetAnotherColladaModel.dae"); function load(daeLocation){ var manager = new THREE.LoadingManager(); manager.onProgress = function(item, loaded, total) { console.log(item, loaded, total); }; var loader = new THREE.ColladaLoader(manager); loader.options.convertUpAxis = true; loader.load(daeLocation, function(collada) { dae = collada.scene; dae.position.set(0, 0, 0); scene.add(dae); render(); }, function(progress) { // show some progress }); } 

Note. I create an instance of a new bootloader every time the model loads.

Answer 2

Just create your own asynchronous bootloader. Your problem is that you are using the async function as synchronization. You never know where the async function ends, and the code after starting, without waiting for it to complete. This is a generic javascript emblem not only three.js

 loader = function(files,callback){ var i = 0; var objects = new Array(); files.forEach(function(file){ loader2.load('obj/us/us_police_car.dae', function colladaReady(collada) { objects[i] = collada.scene; (... rest of the code for each object) i++; if (i == files.length) { callback(objects); } } }); } 

Answer 3

I had the same problem. Apparently, the Collada bootloader current cannot handle downloading multiple files. I solved this by putting all the objects in a single file, and then when it has finished loading, I discover individual objects and use them separately. Hope this helps, and this is an option in your case.

Answer 4

If you load the same model several times, there is no need to call the bootloader for each of them. You can clone a grid:

  // queen is a mesh var newQueen = queen.clone(); // make sure to re position to be able to see the new queen! newQueen.position.set(100,100,100); // or any other coordinates 

Answer 5

I just decided that this problem is a bug in the 3js collada bootloader, they have a new bootloader that supposedly does not have this problem, but it has not yet been released (dec 2015), you can get it in the dev tree. see https://github.com/mrdoob/three.js/issues/7388