Disclaimer: Complete Beginner at the Threejs lib, and an advanced beginner at Javascript language as a whole, so expect me to not understand some terminology and make lots of mistakes. YOU HAVE BEEN WARNED 
Summary
Is there a way to use a way to use already loaded images from THREE.ImageLoader inside a CubeTexture?
Context
My code preloads all my assets for each library by using an kind-of easy to use loading system. In this case, I want to load some images for my skybox using the ImageLoader. Althought I should use CubeTexteurLoader in my loading code, in my case, it would be pretty hard to implement it as my code loops thought all the files sepretlly and a CubeTexture need multiple files to work. It would be why esaier for THREE.js to just alow us to use the preloaded images in the contrcuter. OR, dose it already do that?
L O N G C O N T E X T
I’m making an app that can make and play Roblox games via the browser, and in that app, I have a custom loading screen that load all the files for each library (P5, and 3js). In that system, I use this piece of code to load my files:
// Images
case 'png':
case 'jpg':
case 'jpeg':
case 'gif':
case 'webp':
if (LIB_ === 'p5') {
RETURN_OBJ.p5 = loadImagePromise(fileObj.path, p);
}
else if (LIB_ === 'three') {
const OPTIONS_ = fileObj.options
RETURN_OBJ.three = THREEImageLoaderPromise(fileObj.path, THREE, whileLoading);
}
break;
The THREEImageLoaderPromise, is just this:
const THREEImageLoaderPromise = (file, three, whileLoading) => {
const threeLoadingManager = new three.LoadingManager();
threeLoadingManager.onProgress = (url, loaded, total) => {
whileLoading(loaded/total);
}
return new Promise((resolve, reject) => {new THREE.ImageLoader(threeLoadingManager).load(file, resolve, undefined, reject)})
}
In my 3js WebGL Context, I wanted to use Roblox’s default skybox for the skybox, wich requires me to use the CubeTextuerLoader BUT, my code currently dose not support it in my loading function and it would be a hassle to add it in with my function looping through all the files and waiting for them to load first
// Loop through all the files that ared stored in an array that stores all files that are currently loading
for (let i = filesLoading.length - 1; i >= 0; i--) {
const LOADING_FILE_OBJ = filesLoading[i]; // Select the current file loading from the array
// Loop through all the files used librays
LOADING_FILE_OBJ.oldFileObj.forLibs.forEach(lib => {
// Get the real loading file for each lib
const LOADING_FILE = LOADING_FILE_OBJ.loadingFile[lib]; // Get the real loading file for each lib
// Check if the file has not finished loading yet
if (LOADING_FILE instanceof Promise) {
LOADING_FILE
.then(file => fileLoaded(file, LOADING_FILE_OBJ, i, filesLoading, lib)) // Call the previously defined fileLoaded callback when the file is done loading
.catch(err => fileLoadingErr(err, LOADING_FILE_OBJ)) // Call the previously defined fileLoadingErr callback when the catches an error
}
})
}
Exturnel Links
- My Live Code: Roblox External Editor (REE)
Other
I Code on Chromebook but i don’t think you needed to know that. (I’ll tell you more if you need me to)
