He presentado un ejemplo simple para ilustrar cuál es mi problema. en funciones, es fácil de usar await async para asegurarse de que las texturas se carguen antes de continuar con el programa. si quiero trabajar con clases debido a la limpieza del programa, no tengo idea de cómo puedo hacer esto para que el constructor espere hasta que se cargue la textura antes de llamar a la función posterior.
//in my three.js init function var sphereObject = new Sphere(100, texture); var sphere = this.sphereObject.sphere; scene.add(sphere); //------------------------ class Sphere{ constructor(radius, preloadedtex){ //this.material = this.doSomething(preloadedtex); this work fine const loader = new THREE.TextureLoader(); loader.load("grass.png", function(texture){ this.material = this.doSomething(texture); }); const geometry = new THREE.SphereGeometry( radius, 128, 64 ); this.sphere = new THREE.Mesh( geometry, this.material); } doSomething(texture){ //further operations with the texture before the function returns a material return material; } }TextureLoader tiene una devolución de llamada onLoad como segundo argumento de .load(). Esto se toma directamente de los documentos :
const loader = new THREE.TextureLoader(); // load a resource loader.load( // resource URL 'textures/land_ocean_ice_cloud_2048.jpg', // onLoad callback function ( texture ) { // in this example we create the material when the texture is loaded const material = new THREE.MeshBasicMaterial( { map: texture } ); }, // onProgress callback currently not supported undefined, // onError callback function ( err ) { console.error( 'An error happened.' ); } );