Currently, I am in the process of loading elements of a model and then grouping them together. My goal is to be able to move this group as a whole after all the elements have been loaded.
One challenge I am facing is how to execute code only once all the models have finished loading. I am unsure how to effectively use the .onload function with the colladaLoader and its callback functions. Additionally, I'm not sure if it's wise to use a self-executing function as I have done here. It seems like the best way to loop through a list and load all the models, but is there a better approach?
Below is the code snippet I've been working with. I attempted a workaround by using a counter called "complete," but it doesn't always work reliably. Thank you for any help!
for ( var i=0; i<object.asset.length; i++ ) {
loader = new THREE.ColladaLoader();
asset = furniture.asset[i];
(function(asset) {
loader.load(asset["path"], function(collada, materials) {
// Function responsible for scaling and positioning the model
var mesh = daeAttributes(collada, object, asset, newMaterial);
var scene = get_scene();
group.add( mesh );
complete++;
// Once all assets are loaded, add the group to the scene
if (complete===object.asset.length-1) {
// Move the group once all models are loaded
group = moveModel(group, object);
scene.add( group );
render();
};
});
})(asset);
Update
If there is a list of more than one unique objects to load in, the code works correctly. However, when there is only one object to load, it fails to load that single object.