How can I properly load objects asynchronously using Three.js? I’ve been having lots of trouble with this. Currently, I have the following (simplified, albeit irreproducible without downloading GTLF models) code:
const loader = new THREE.GLTFLoader();
async function init(){
obj = await loader.loadAsync("./public/modelo/scene.gltf");
obj2 = await loader.loadAsync("./public/earth/scene.gltf");
console.log(obj2.scene.children[0].position);
}
init();
This throws an error in the line with console.log
, claiming Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'position')
. Can someone explain what is going wrong here and how to fix it? I’m not very familiar with await, but I thought its functionality was to specifically avoid things like this from happening.
My reason for using asynchronous loading is so that I can pass these 3D objects to animation functions, and without asynchronous loading, the objects get passed before they have fully loaded, which throws an error.