I am working on a project using Three.js. And, I am trying get mesh(gltf.scene) in the GLTF load from outside, but it says it is undefined if I console.log outside of the loader. I spent hours to figure this out but haven't able to solve this problem. I am guessing this is happening because it is asynchronous, but I am not so sure. This is my first attempt to use javascript class format, so I am little bit confused. Usually it worked if I declare variable on the higher scope and assign the mesh to it but does not work this time.
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 also tried to do async function but did not work.
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);
}
Seems like it works if I use await in front of the loadMain() and console.log(this.character), but I cannot use await in the constructor function, since it is not async function. If anyone have any idea, please help me out :'(
Thank you!
According to ThreeJS documentation (https://threejs.org/docs/#api/en/loaders/Loader.loadAsync), the method loadAsync does not return the loaded mesh, instead, it return a Promise event.
.loadAsync ( url : String, onProgress : Function ) : Promise
Therefore, you would need to declare a onLoad callback function like below:
this.character = await loader.loadAsync("./c.glb").then(function(value) {
console.log(value); // "Success"
});
Define another static method (like load shown below) in your class and pass this as a parameter
class mainCharacter {
constructor(game) {
...
this.character;
this.loader;
mainCharacter.load(this);
...
}
static load(self) {
self.loader = new GLTFLoader();
self.loader.load(
"./c.glb",
(gltf) => self.character = gltf.scene
);
}
}
in arrow functions, this points to the owner of that function, or the object in which that particular arrow function is defined.
in your case, this inside the arrow function does not point to the mainCharacter object because its actually defined in and passed on to the loader.load() function.
See https://www.w3schools.com/js/js_arrow_function.asp for more details.