Как использовать предварительно загруженные изображения в качестве текстур в THREE.js

Question

В этом конкретном проекте предусмотрена резервная подпрограмма без холста, в которой также используется процедура предварительной загрузки. Изображения добавляются и загружаются соответствующим образом, однако я не могу понять, как их использовать в THREE.js, потому что THREE.js будет использовать собственный загрузчик изображений, чтобы по существу перезагрузить изображения.

** Вот JS **

function MAIN_PRELOAD() {

 var Preload_List = [];
 var Preload_Loaded = 0;
 var Preload_Errors = 0;

 function preload_scene() {

  // Skip Empty List...
  if(SceneAssets.length < 1) return;
  for(var i in SceneAssets) {

   // Skip Blanks...
   if(SceneAssets[i]['material']['map'].length < 1) continue;

   // Skip Repeats...
   if(Preload_List.indexOf(SceneAssets[i]['material']['map']) >= 0) continue;

   // Add to list...
   console.log('Image added to preloader: '+SceneAssets[i]['material']['map']);
   Preload_List[Preload_List.length] = SceneAssets[i]['material']['map'];

  }
 }

 function preload_masks() {

  // Skip Empty List...
  if(MaskLayer['textures'].length < 1) return;
  for(var i in MaskLayer['textures']) {

   // Skip Blanks...
   if(MaskLayer['textures'][i].length < 1) continue;

   // Skip Repeats...
   if(Preload_List.indexOf(MaskLayer['textures'][i]) >= 0) continue;

   // Add to list...
   console.log('Image added to preloader: '+MaskLayer['textures'][i]);
   Preload_List[Preload_List.length] = MaskLayer['textures'][i];

  }
 }

 function preload_finished() {

  console.log('Preloading has finished!');
  // NYI: Hide the loading overlay...
  init();
  animate();

 }

 function preload_init() {

  // Preload Assets...
  preload_scene();
  preload_masks();

  // Finish if empty...
  if(Preload_List.length < 1) {
   preload_finished();
   return;
  }

  // Iterate if filled...
  for(var i in Preload_List) {

   // Enclosure for event trapping...
   (function(i) {

    var imageElement = document.createElement('img');

    imageElement.onload = function() {
     console.log('Image "'+Preload_List[i]+'" done loading!');
     Preload_Loaded ++;
     if(Preload_Loaded + Preload_Errors == Preload_List.length) {
      preload_finished();
     }
    };

    imageElement.onerror = function() {
     console.log('Image "'+Preload_List[i]+'" failed to load...');
     Preload_Errors ++;
     if(Preload_Loaded + Preload_Errors == Preload_List.length) {
      preload_finished();
     }
    };

    imageElement.src = Preload_List[i];

   })(i);

  }

 }
 preload_init();

}

MAIN_PRELOAD();

В настоящее время еще не реализовано твердое наложение, которое маскирует все до завершения предварительной загрузки презентации.

Чтобы было ясно, обе части моего приложения работают нормально сами по себе, однако в начале, когда все загружается и добавляется в сцену, возникает большой перерыв в обработке, который наносит ущерб общему опыту пользователя.

В презентации также есть периодические заикания, когда она загружает маскирующие слои по мере необходимости, и каждый раз, когда это происходит, она делает это из нового HTTP-запроса, а не из кеша браузера через THREE.ImageUtils.loadTexture(),

Мое лучшее предположение, что я должен как-то использовать незаписанный img элемент, созданный в предварительном загрузчике в качестве замены THREE.ImageUtils.loadTexture()Я просто не могу найти никого, кто бы делал то же самое, и я думаю, что это был бы отличный способ кешировать ресурсы сцены для THREE.js, если бы я мог заставить его работать.

Альтернативные методы решения этой проблемы также будут рассмотрены.

Использование THREE.js R70

Answer 1

var texture;
var imageElement = document.createElement('img');
imageElement.onload = function(e) {
    texture = new THREE.Texture( this );
    texture.needsUpdate = true;
    init();
};
imageElement.src = "myimage.png";

init() {
    material = new THREE.MeshPhongMaterial( { map : texture } );
}

Вот скрипка для демонстрации.
ПРИМЕЧАНИЕ: в скрипте я использую imageUrl изображения, это просто, чтобы я мог использовать изображение в качестве текстуры, не получая ошибку CORS. На сайте вы должны иметь возможность просто установить для изображения src путь к файлу, как обычно.