Explaining my issue with a simple example, I find it easy to use await async in functions to ensure textures are loaded before moving on with the program. However, when working with classes for a cleaner program structure, I am unsure how to make the constructor wait until the texture is loaded before calling the subsequent function.
//within 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 works 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){
//perform additional operations with the texture before returning a material
return material;
}
}