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

它们未定义，因为您将来自synce-install-cab data.cab的{{1}}数据视为对象; textures生成一个数组。尝试作为数组迭代Promise.all。您可以随时在回调中进行后处理，将纹理重新放入带有键的对象中，以便在程序中使用下一个函数。

Promise.all

以下是Promise.all

的MDN参考

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

1 个答案: