score:1

i know is not the proper answer but you should take a look to r3f react-three-fiber

https://github.com/pmndrs/react-three-fiber

and it has useloader on its api:

https://github.com/pmndrs/react-three-fiber/blob/master/markdown/api.md#useloader

where you'll be able to do:

useloader(loader: three.loader, url: string , extensions?, xhr?)

score:3

textureloader.load uses callbacks for onload, onerror, and onprogress.

so if you want to make the scene wait until the texture is loaded, don't start rendering until onload or onerror is called.

example:

let url = "...";
let loader = new three.textureloader();

function onload(tex){
  // start rendering now
}

function onerror(){
  // start rendering now?
}

function onprogress(xhr){
  //...
}

loader.load(url, onload, onerror, onprogress);

in recent versions of three.js, there is also a loadasync function, which returns a promise. with this, you can construct your application to leverage async/await to wait for the texture to finish loading.

pseudo-code:

// set up your scene, etc., then...

async function run(){
  let url = "...";
  let loader = new three.textureloader();

  function onprogress(xhr){
    //...
  }

  await loader.loadasync(url, onprogress); // or use .then/.catch

  // start rendering now
}

run();

three.js r127


Related Query

More Query from same tag