Loading Multiple Collada Objects in THREE.js

Question

I am loading multiple car models using a loop in THREE.js, but the problem is that sometime it loads all the objects but some time it does not load all the objects. For example if the loop is of 3 iteration, it will load 2 objects sometime, sometime it loads 1 and sometime it loads all three objects. I don't know why? I searched a lot but can't find any thing 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 this one more loader in which I have init() and animate() functions

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 can't figure out what the problem with the above one.

Answer 1

There seems to be a known issue when re-using the same instance of the collada loader 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 am instantiating a new loader every time I load a model.