javascript - Is there a way to wait for THREE.TextureLoader.load() to finish? -

i'm working release r73. current task fill array materials. content of array supposed used later. usage depends on materials me loaded.

by loop through array of json information , call code every 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 initialized earlier: var tloader = new three.textureloader();

if material isn't there, when needed, fallback material. intended error option. there way wait until .load() finishes?

a way solve through promise's way forward , think it's shame textureloader doesn't return promise start (it make little bit easier). however, keep in mind ie11 need polyfill lacks native support promises.

something should it, texturearray represents json data in iterable 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, tell promise complete                resolve( material );            },             function( xhr ) {                // progress callback of textureloader                // ...            },             function( xhr ) {                // failure callback of textureloader                // reject promise failure                reject( new error( 'could not load ' + jsonmat.pic ) );            }         );      }));  });  promise.all( allpromises )     .then( function( arrayofmaterials ) {         // textures loaded, , array         // contains materials created     }, function( error ) {         console.error( "could not load textures:", error );     }); 

so what's happening here 1 overarching promise used keep track of status of other promises. each texture being loaded wrapped in promise, added allpromises. entire set of promises tested success or failure, , @ point know overall success or failure.

one important thing keep in mind here promise.all succeed if all textures loaded, , fail 1 fails. if need finer control you'll need promise polyfill more features promise/a+ spec offers, such rsvp.js. or instead of reject()ing promise resolve() , handle result gracefully.