Estoy trabajando en un proyecto usando Three.js. Y estoy tratando de obtener malla (gltf.scene) en la carga GLTF desde el exterior, pero dice que no está definido si hago console.log fuera del cargador. Pasé horas para resolver esto, pero no he podido resolver este problema. Supongo que esto sucede porque es asíncrono, pero no estoy tan seguro. Este es mi primer intento de usar el formato de clase de JavaScript, por lo que estoy un poco confundido. Por lo general, funcionó si declaro una variable en el alcance superior y le asigno la malla, pero esta vez no funciona.
class mainCharacter { constructor(game) { ... ... ... this.character; this.loader = new GLTFLoader(); this.loader.load("./c.glb",(gltf)=>{ this.character= gltf.scene; }); console.log(this.character); }También traté de hacer la función asíncrona pero no funcionó.
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); }Parece que funciona si uso await delante de loadMain() y console.log(this.character), pero no puedo usar await en la función constructora, ya que no es una función asíncrona. Si alguien tiene alguna idea, por favor ayúdeme :'(
¡Gracias!
De acuerdo con la documentación de ThreeJS ( https://threejs.org/docs/#api/en/loaders/Loader.loadAsync ), el método loadAsync no devuelve la malla cargada, sino un evento Promise.
.loadAsync ( url : String, onProgress : Function ) : PromisePor lo tanto, deberá declarar una función de devolución de llamada onLoad como la siguiente:
this.character = await loader.loadAsync("./c.glb").then(function(value) { console.log(value); // "Success" });Defina otro método estático (como la load que se muestra a continuación) en this clase y páselo como parámetro
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 ); } } en las funciones de flecha, apunta al propietario de this función o al objeto en el que se define esa función de flecha en particular. en su caso, this dentro de la función de flecha no apunta al objeto mainCharacter porque en realidad está definido y pasado a la función loader.load() . Consulte https://www.w3schools.com/js/js_arrow_function.asp para obtener más detalles.