Estoy usando THREE.js OBJ y MTL Loader en un bucle para mostrar diferentes elementos de un pastel animado en 3D. Necesito esos elementos diferentes porque quiero que el usuario pueda cambiar el color de esos elementos específicos (por ejemplo, la decoración) del pastel.

Pero cada vez que presiono una función THREE.load, la ejecución de la iteración del ciclo se detiene y comienza con la siguiente (i ++). Soy nuevo en Javascript. Así que no estoy seguro de si me falta una comprensión general de los bucles.

Solo en el último paso se llama y ejecuta correctamente la función de carga. Si uso exactamente el mismo código sin un bucle, sino que proporciono el material-/objectPath codificado y uso varios cargadores, todo funciona bien.

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