THREE.js Ajouter des textures avec des promesses

Question

J'essaie d'utiliser des promesses pour charger des textures dans THREE.JS mais je ne sais pas comment le faire. J'ai vu comment ils fonctionnent, mais y a-t-il un exemple? J'essaye de charger une image (img.png) dans un maillage de cube.

Je ne souhaite pas utiliser JSON.

Answer 1

Ce code source de THREE.ImageUtils.loadTexture de Three.js:

THREE.ImageUtils = { 

    crossOrigin: undefined, 

    loadTexture: function (url, mapping, onLoad, onError) { 

    var loader = new THREE.ImageLoader(); 
    loader.crossOrigin = this.crossOrigin; 

    var texture = new THREE.Texture(undefined, mapping); 

    loader.load(url, function (image) { 

     texture.image = image; 
     texture.needsUpdate = true; 

     if (onLoad) onLoad(texture); 

    }, undefined, function (event) { 

     if (onError) onError(event); 

    }); 

    texture.sourceFile = url; 

    return texture; 

    }, 

vous pouvez donc simplement conclure que dans une fonction personnalisée qui renvoie une promesse (ce qui est la syntaxe ES6):

loadTextureAsync (url, mapping) { 

    return new Promise ((resolve, reject) => { 

    const onLoad = (texture) => resolve (texture) 

    const onError = (event) => reject (event) 

    THREE.ImageUtils.loadTexture(
     url, mapping, onLoad, onError) 
    }) 
}