Currently, my goal is to:
- Retrieve a
JSONfile from the server that contains data regarding my models - Utilize a PLY loader within a for loop to incorporate them into the scene
- Include them in an array
Below are the functions I've implemented:
function fetchJSON(callback) {
var temp = $.getJSON("data/data.json", function(data) {
//calling the callback function while passing the retrieved data
callback(data);
});
}
function loadModels() {
//obtaining our JSON data
fetchJSON(function(data) {
//analyzing the received data
nodes = data.library[0].model.nodes;
nodesLen = nodes.length;
//Loading nodes and adding them to the scene and array
for (var i = 0; i < nodesLen; i++) {
var url = nodes[i].url;
// Instantiating a PLY loader
var loader = new THREE.PLYLoader();
loader.load(url, function(geometry) {
geometry.computeFaceNormals();
var material = new THREE.MeshPhongMaterial({ color: 0xffffff, vertexColors: THREE.VertexColors, transparent: true, side: THREE.DoubleSide });
var mesh = new THREE.Mesh(geometry, material);
mesh.stepNum = i;
console.log(i);
mesh.position.x = 0;
mesh.position.y = 0;
mesh.position.z = 0;
//Adding to the scene
scene.add(mesh);
//Appending to the array
nodesArr.push(mesh);
});
}
});
}
Issue: The models are not loading as expected. Upon checking the output of "console.log(i)" inside the PLY loader, it consistently returns the same value. This suggests that another loop begins before the current one finishes. How can I ensure that the loop waits until all functions complete before initiating another iteration?