有没有办法等待 THREE.TextureLoader.load() 完成？

Question

我正在使用版本 R73。 我目前的任务是用材料填充数组。该数组的内容应该稍后使用。这种用法取决于我完全加载的所有材料。

现在我遍历一个 JSON 信息数组并为每个元素调用此代码：

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 之前初始化过：var TLoader = new THREE.TextureLoader();

如果材料不存在，当需要时，我会获得备用材料。这只是作为一个错误选项。 有没有办法等到 .load() 完成？

Answer 1

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 2

解决这个问题的方法是通过Promise，因为它们确实是前进的方向，我个人认为很遗憾TextureLoader 没有返回Promise 开始（这会使这有点容易一点）。但是，请记住，IE11 需要一个 polyfill，因为它缺乏对 Promise 的原生支持。

应该这样做，其中textureArray 在可迭代的Array 中表示您的 JSON 数据：

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 用于跟踪另一个Promises 的状态。正在加载的每个纹理都包含在 Promise 中，并添加到 allPromises 中。最后，对整个 Promise 集进行成功或失败测试，​​此时您就知道整体的成功或失败。

这里要记住的重要一点是，Promise.all 只有在 所有 纹理都已加载时才会成功，并且一旦任何一个失败，它就会失败。如果您需要比这更精细的控制，您将需要一个具有比 Promise/A+ 规范提供的更多功能的 Promise polyfill，例如 RSVP.js。或者，您可以 resolve() 它并优雅地处理结果，而不是 reject()ing 承诺。

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))