Currently, I am immersed in a project that involves Three.js. The challenge I am facing is trying to access the mesh (gltf.scene) in the GLTF load from an external source. However, whenever I attempt to console.log outside of the loader, it shows up as undefined. Despite dedicating hours to unraveling this mystery, I have yet to find a solution. I suspect that this issue may be due to its asynchronous nature, but I cannot say for certain.
class mainCharacter {
constructor(game) {
...
...
...
this.character;
this.loader = new GLTFLoader();
this.loader.load("./c.glb",(gltf)=>{
this.character= gltf.scene;
});
console.log(this.character);
}
I even experimented with using async functions without success.
class mainCharacter {
constructor(game) {
...
...
...
this.character;
this.loadMain();
console.log(this.character);
})
async loadMain(){
const loader = new GLTFLoader();
this.character = await loader.loadAsync("./c.glb");
this.character.scene.scale.set(13, 13, 13);
this.scene.add(this.character.scene);
}
It appears that utilizing await before loadMain() and console.log(this.character) yields results. However, since the constructor function is not asynchronous, I cannot use await within it. If anyone has insights or suggestions, please lend me your assistance :'(
Thank you!