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

Этот конкретный проект имеет резервную процедуру без холста, которая также использует процедуру предварительной загрузки. Изображения добавляются и загружаются надлежащим образом, однако я не могу понять, как их использовать в 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