Check out this snippet of code showcasing THREE.ImageUtils.loadTexture in action using THREE.js:
THREE.ImageUtils = {
crossOrigin: undefined,
loadTexture: function ( src, map, handleLoad, handleFail ) {
var loader = new THREE.ImageLoader();
loader.crossOrigin = this.crossOrigin;
var textureImage = new THREE.Texture( undefined, map );
loader.load( src, function ( img ) {
textureImage.image = img;
textureImage.needsUpdate = true;
if ( handleLoad ) handleLoad( textureImage );
}, undefined, function ( err ) {
if ( handleFail ) handleFail( err );
});
textureImage.sourceFile = src;
return textureImage;
},
You can easily encapsulate this functionality within a custom function that utilizes Promises (in ES6 syntax):
loadTextureAsync (src, map) {
return new Promise ((resolve, reject) => {
const onLoad = (texture) => resolve (texture)
const onError = (err) => reject (err)
THREE.ImageUtils.loadTexture(
src, map, onLoad, onError)
})
}