使用 Three.js THREE.textureLoader 预加载多个纹理

Question

在另一篇文章中，我在加载纹理时遇到了一些问题，正如 here 所讨论的那样。现在我已经根据那里提供的链接接受了建议，并且根据documentation，我想出了这个解决方案。

var loader = new THREE.TextureLoader();
loader.crossOrigin = '';

var fileArray = [   
                {name : 'texture1' , url : '...jpg'},
                {name :'texture2', url : '...jpg'},
                {name : 'texture3' ,url : '...jpg'},
                {name :'texture4', url : '....jpg'},
                {name :'texture5', url : '...jpg'},
                {name :'texture6', url : '...jpg'},
                {name :'texture7', url : '...jpg'},
                {name :'texture8', url : '...jpg'},
                {name :'texture9', url : '...jpg'}
                ];

function loadTextures( callback ) {

    var promiseArray = [],
        path = './textures/';

    fileArray.forEach( function ( fileOBJ ) {

       promiseArray.push ( new Promise( function ( resolve , reject ) {

            loader.load(

                path+fileOBJ.url ,

                function ( texture ) {

                    var modelOBJ = new Object();

                    modelOBJ[fileOBJ.name] = texture;

                    if( modelOBJ[fileOBJ.name] instanceof THREE.Texture ) resolve( modelOBJ )

                },

                function ( xhr ) {

                    console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );

                },

                function ( xhr ) {

                    reject( new Error ( xhr + 'An error occurred loading while loading' + fileOBJ.url ) )

                }
            ) 

    } ) );

} )

Promise.all( promiseArray )

  .then( 

      function ( textures ) {

        for( var i in textures ) {

           var key = Object.keys( textures[i] ) 

           /* all textures are still undefined! */
           console.log( textures[key] )

        }

          if( callback && typeof( callback ) === "function" && fileArray.length == textures.length ) callback( textures )

      },

      function ( error ) {

            callback( error )

      } )
}

我打算对回调中的对象数组执行的操作是将其传递给另一个函数，在该函数中创建我将在我的场景中使用的所有网格。但是，当传递给我的其他函数时，纹理仍然是“未定义的”。我想知道为什么这仍然发生。我正在使用 Three.js 74。

Answer 1

它们出现未定义是因为您将来自Promise.all 的textures 数据视为对象； Promise.all 产生一个数组。尝试将 textures 作为数组进行迭代。您始终可以在回调中进行后处理，将纹理放回带有键的对象中，以便程序中的下一个函数使用。

Promise.all( promiseArray )
   .then( function ( textures ) {

       // sanity check as an array:
       for( var i = 0; i < textures.length; i++ ) {
           console.log( textures[i] )
       }

       // or as an alternate sanity check:
       console.log( textures );

       // then do some post-processing to put your textures back into an object with keys
    }
    // error handling here...

这是 Promise.all 的 MDN 参考