THREE.js用Promises添加紋理

Question

我試圖使用承諾來加載紋理THREE.JS但我不知道該怎麼做。我已經看到他們是如何工作的，但是有沒有例子？ 我正嘗試在立方體網格中加載圖片（img.png）。

我不想使用JSON。

Answer 1

從three.js所THREE.ImageUtils.loadTexture的這個源代碼：

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; 

    }, 

所以，你可以只是包裝，最多在返回無極自定義函數（這是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) 
    }) 
}