Three.js OBJ和MTL加载器不会在循环中调用

Question

我在一个循环中使用THREE.js OBJ和MTL Loader来显示3d动画蛋糕的不同元素。我需要这些不同的元素，因为我希望用户能够改变这些特定元素的颜色。蛋糕的装饰

但是每当我打到3。加载函数时，循环迭代的执行停止，并从下一个(i++)开始。我是Javascript的新手。所以我不确定我是否错过了对循环的一般理解。

只有在最后一次遍历中才调用并正确执行load函数。如果我使用完全相同的代码而不使用循环，而是提供硬编码的材料-/objectPath并使用几个加载器，则一切都运行良好。

function draw(currentlySelectedCake){
layerArray = [];
// Load  Cake
var i;
for (i = 0; i < currentCakeElements.length; i++){
if(currentCakeElements[i].endsWith(".mtl")){
var materialPath = "uploads/" +currentlySelectedCake + "/" + currentCakeElements[i];
var objectPath = "uploads/" +currentlySelectedCake + "/" + currentCakeElements[i+1];
var cakeLoader = new THREE.MTLLoader();
cakeLoader.load(materialPath, function (materials) {    
materials.preload();
// Load the Cake
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
objLoader.load(objectPath , function (object) {


layer1 = object.clone();
layer2 = object.clone(); 
layer3 = object.clone();
layer1.name = "Layer1Part" + i;
layer2.name = "Layer2Part" + i;
layer3.name = "Layer3Part" + i;

layer1.traverse((child) => {
if (child.isMesh) {
child.material = child.material.clone();
}
});
layer2.traverse((child) => {
if (child.isMesh) {
child.material = child.material.clone();
}
});
layer3.traverse((child) => {
if (child.isMesh) {
child.material = child.material.clone();
}
});
layer2.position.y = tortenhoehe;
layer3.position.y = tortenhoehe*2*0.75;

camera.lookAt(layer2.position);

layer1Group.add(layer1);
layer1Group.name = "Layer1";
layer2Group.add(layer2);
layer2Group.name = "Layer2";
layer3Group.add(layer3);
layer3Group.name = "Layer3";

});
layer1Elements.push(layer1Group);
layer2Elements.push(layer2Group);
layer3Elements.push(layer3Group); 
});

}


});
}

} 

Answer 1

我想这就是我的解决方案。还在测试的最后阶段。不过目前看来还不错。

https://www.albertgao.xyz/2016/08/25/why-not-making-functions-within-a-loop-in-javascript/

1. 首先声明变量i和j
2. 当第一个循环运行时，在循环中创建了一个匿名函数
3. 在新创建的匿名函数中，它引用了不在其作用域
中的变量i
4. 第一次循环后，由于循环运行3次，变量i的值累计为3。
5. 在第二个循环中，将调用第一个循环中创建的每个函数。
6. 当它被调用时，解释器将检查i的值，它发现里面没有i。
7. 由于这个匿名已经变成了闭包，解释器将查看它的作用域链。最后，解释器在全局作用域中发现变量i，它仍然在它的词法作用域中，这个匿名函数引用它是完全合法的。
8. ，i的值为3。我们在步骤4中解决了它。
9. 因此，将输出3。
10. 第二个和第三个循环之后发生的情况与步骤6~10完全相同。