This specific project includes a fallback routine for non-canvas, using a preloading method for images. Although the images are added and loaded correctly, I am facing an issue with integrating them into THREE.js as it tends to reload the images using its own image loader.
** Check out the JavaScript code below **
function MAIN_PRELOAD() {
var Preload_List = [];
var Preload_Loaded = 0;
var Preload_Errors = 0;
function preload_scene() {
// Ignore if List is Empty...
if(SceneAssets.length < 1) return;
for(var i in SceneAssets) {
// Skip if Blank...
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() {
// Ignore if List is Empty...
if(MaskLayer['textures'].length < 1) return;
for(var i in MaskLayer['textures']) {
// Skip if Blank...
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();
Currently, there is no solid overlay implemented yet, that masks everything until the presentation preload is complete.
Just to clarify, each part of my application functions well independently. However, there is a noticeable stutter at the start when everything loads and gets added to the scene, impacting the user experience negatively.
Additionally, there are intermittent stutters during the presentation when loading masking layers as required, resulting in new HTTP requests instead of utilizing the browser cache via THREE.ImageUtils.loadTexture().
I believe I need to somehow replace the THREE.ImageUtils.loadTexture() with the un-appended img element created in the preloader to optimize caching of scene assets for THREE.js, but I haven't found any examples of this technique being used elsewhere. It could potentially enhance performance if successfully implemented.
Any alternative solutions to address this issue would also be appreciated.
Using THREE.js r70