在THREE.js中加载多个Collada对象

Question

我在THREE.js中使用循环加载多个汽车模型，但问题是有时它会加载所有对象，但有时它不会加载所有对象。 例如，如果循环是3次迭代，它将在某个时候加载2个对象，有时它加载1并且有时加载所有三个对象。 我不知道为什么？ 我搜索了很多，但找不到任何有用的东西。 这是代码。

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();

                });

            }

在这一个加载器之后，我有init()和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();

            });

这工作正常，但无法弄清楚上面的问题是什么。

Answer 1

当重新使用collada加载器的相同实例来加载多个collada文件时，似乎存在一个已知问题 。

以下代码对我来说可靠（至少在chrome和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
    });
}

注意我每次加载模型时都会实例化一个新的加载器。

Answer 2

只需制作自己的异步加载器。 您的问题是您使用异步功能作为同步。 你永远不会知道异步函数的结束位置以及运行后的代码而不等待它结束。 这是一个普通的javascript问题，而不仅仅是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

我有同样的问题。 显然Collada加载器当前无法处理加载多个文件。 我通过将所有对象放在一个文件中解决它，然后当它完成加载时，我找到各个对象并单独使用它们。 希望这会有所帮助，这是您的选择。

Answer 4

如果您多次加载相同的模型，则无需为每个模型调用加载器。 你可以克隆网格：

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

我刚刚确定这个问题是3js collada加载器中的一个错误，他们有一个新的加载器，据说没有这个问题但它还没有发布（2015年12月），你可以在开发树中得到它。 请参阅https://github.com/mrdoob/three.js/issues/7388