Предварительная загрузка нескольких текстур с помощью 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

Они не определены, потому что вы обрабатываете данные textures, исходящие из Promise.all в качестве объекта; 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... 

Вот ссылка MDN для Promise.all