After loading the gltf models to the scene, they become undefined when called outside of loadAsync. However, if you call them inside the promise, they are defined.
Also, if you do console.log(scene.children) outside of the promise, you see that all the children of the array are properly defined. However, once you do console.log(scene.children[0]) then it returns undefined again. All the models are still rendered, and can be raycasted.
Any idea why?
Here are my related codes:
const loadManager = new THREE.LoadingManager();
const loaderGLTF = new GLTFLoader(loadManager);
//Using promise to load models
const loadAsync = url => {
return new Promise(resolve => {
loaderGLTF.load(url, gltf => {
resolve(gltf);
})
})
}
Promise.all([loadAsync('./assets/visuals/digitalAnimation.glb'), loadAsync('./assets/visuals/background.glb')]).then(models => {
let blenderMixerIndex = 0;
for(let j =0; j<models.length; j++){
blenderModels.push(models[j].scene);
if (models[j].animations.length > 0) {
blenderMixer.push(new THREE.AnimationMixer( models[j].scene ));
blenderActions1.push(blenderMixer[blenderMixerIndex].clipAction( models[j].animations[0]));
}
if (models[j].animations.length > 1) {
blenderActions2.push(blenderMixer[blenderMixerIndex].clipAction( models[j].animations[1]));
}
if (models[j].animations.length > 2) {
blenderActions3.push(blenderMixer[blenderMixerIndex].clipAction( models[j].animations[2]));
}
if (models[j].animations.length > 3) {
blenderActions4.push(blenderMixer[blenderMixerIndex].clipAction( models[j].animations[3]));
}
blenderMixerIndex ++;
scene.add( blenderModels[j] );
}
console.log(blenderModels[1]); //this returns a valid object
});
console.log(blenderModels[1]); //returns undefined object