Is there any way to wait for THREE.TextureLoader.load () to complete?

Question

I am working with the release of R73. My current task is to populate the array with materials. The contents of this array are supposed to be used later. This use depends on all the materials that I have fully downloaded.

Now I look through the array of JSON information and call this code for each element:

TLoader.load(
        BASE_ODB_URL + jsonMat.pic,
        function (texture) {
            texture.wrapS = THREE.RepeatWrapping;
            texture.wrapT = THREE.RepeatWrapping;
            texture.repeat.set(jsonMat.scaleu, jsonMat.scalev);
            Mat = new THREE.MeshLambertMaterial({
                    map : texture,
                    side : THREE.DoubleSide,
                    name : jsonMat.mname
                });
            THREEMatList.push(Mat);
        },
        function (xhr) {
        }, //onProgress
            function (xhr) {
            Mat = new THREE.MeshLambertMaterial({
                    color : 0xff0000,
                    side : THREE.DoubleSide,
                    name : jsonMat.mname
                });
            THREEMatList.push(Mat);
        } 
    )

TLoader is initialized earlier: var TLoader = new THREE.TextureLoader ();

If there is no material, when necessary, I get spare material. This was intended only as an error option. Is there any way to wait for .load () to finish?

Answer 1

Promise, , , TextureLoader doesn 't a Promise ( ). , IE11 polyfill, promises.

- , textureArray JSON Array:

var allPromises = [];

textureArray.forEach( function( jsonMat ) {

    allPromises.push( new Promise( function( resolve, reject ) {

        TLoader.load(
           BASE_ODB_URL + jsonMat.pic,

           function( texture ) {
               // Success callback of TextureLoader
               texture.wrapS = THREE.RepeatWrapping;
               texture.wrapT = THREE.RepeatWrapping;
               texture.repeat.set( jsonMat.scaleu, jsonMat.scalev );
               var material = new THREE.MeshLambertMaterial({
                   map: texture,
                   side: THREE.DoubleSide,
                   name: jsonMat.mname
               });
               THREEMatList.push( material );

               // We're done, so tell the promise it is complete
               resolve( material );
           },

           function( xhr ) {
               // Progress callback of TextureLoader
               // ...
           },

           function( xhr ) {
               // Failure callback of TextureLoader
               // Reject the promise with the failure
               reject( new Error( 'Could not load ' + jsonMat.pic ) );
           }
        );

    }));

});

Promise.all( allPromises )
    .then( function( arrayOfMaterials ) {
        // All textures are now loaded, and this array
        // contains all the materials that you created
    }, function( error ) {
        console.error( "Could not load all textures:", error );
    });

, , , Promise Promise s. Promise, allPromises. , promises , .

, Promise.all , , , - . , Promise polyfill , Promise/A +, RSVP.js. reject() resolve() .

Answer 2

Threejs - LoadingManager. TextureLoader DefaultLoadingManager:

import {TextureLoader, DefaultLoadingManager} from './three.module.js';

const getTextures = ()=> new Promise((resolve, reject)=>{
  const loader = new TextureLoader();
  DefaultLoadingManager.onLoad = ()=>resolve(textures);
  const textures = [
    "image1.jpg",
    "image2.jpg",
    "image3.jpg"
  ].map(filename=>loader.load(filename));
});

getTextures().then(result=>console.log("We received,", result,"!"));

, , . , , LoadingManager TextureLoader :

import {TextureLoader, LoadingManager} from './three.module.js';

const getTextures = ()=> new Promise((resolve, reject)=>{
  const manager = new LoadingManager(()=>resolve(textures));
  const loader = new TextureLoader(manager);
  const textures = [
    "image1.jpg",
    "image2.jpg",
    "image3.jpg"
  ].map(filename=>loader.load(filename));
});

getTextures().then(result=>console.log("We received,", result,"!"));

Answer 3

, :

    /**
     *
     * @param {Array} texturesSources - List of Strings that represent texture sources
     * @returns {Array} Array containing a Promise for each source 
     */
    function getTextures (texturesSources) {
        const loader = new THREE.TextureLoader()
        return texturesSources.map(textureSource => {
            return new Promise((resolve, reject) => {
                loader.load(
                    textureSource,
                    texture => resolve(texture),
                    undefined, // onProgress callback not supported from r84
                    err => reject(err)
                )
            })
        })
    }

Promise.all, , .

:

const texturesBasePath = '../assets/textures/'
const texturesSRC = [
    'image1.jpg',
    'image2.jpg',
    'image3.jpg',
].map(texture => texturesBasePath + texture)

Promise.all(getTextures(texturesSRC))
    .then(textures => {
        // create your materials, meshs...
        // render the scene
    })
    .catch(err => console.error(err))