CODEWITHSUNDEEP
javascriptasynchronousmodulethree.jsgltf
MiMi
MiMi

Reputation: 135

Three,js get mesh outside the loader

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!

Upvotes: 1

Views: 1317

Answers (2)

Fahad Bin Shahabudheen
Fahad Bin Shahabudheen

Reputation: 1

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.

Upvotes: 0

Llogari Casas
Llogari Casas

Reputation: 962

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"
});

Upvotes: 1

Related Questions