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

            });

这个可以正常工作，但是我无法弄清楚上面那个的问题。

- Najam-us-Saqib

---

似乎在使用单个加载器实例加载多个Collada文件时，Collada加载器存在错误[https://github.com/mrdoob/three.js/issues/5721]，请参见下面的答案。 - JohnIdol

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

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

- JohnIdol

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

- Avner Solomon

---

我制作了一个同步加载的版本，但这并没有解决问题。显然与异步无关。 - fluffybunny

Answer 3

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

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

- Kris De Greve

Answer 4

我曾经遇到过同样的问题。 显然，Collada加载器目前无法处理加载多个文件的情况。 我通过将所有对象放在一个单独的文件中解决了这个问题，然后当它完成加载时，我会找到各个对象并分别使用它们。 希望这可以帮助你，并且在你的情况下也是一个选项。

- Magnus Aycox

---

你能否更详细地解释一下你所做的事情？我无法完全理解你的想法。顺便说一句：谢谢。 - Najam-us-Saqib

问题在于有时它会加载所有对象，有时它会加载两个，有时会加载一个，有时什么都不加载。这是加载器的问题还是循环或循环中名为enemyModels的数组的问题，因为在循环外它通常是空的。 - Najam-us-Saqib

看我的回答 - 这是一个错误 [https://github.com/mrdoob/three.js/issues/5721]，你可以通过实例化多个Collada加载器来解决这个问题。 - JohnIdol

Answer 5

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

- fluffybunny