Can you use a preloaded image in an Cube Texture (Beginner)

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 :dizzy_face:


Is there a way to use a way to use already loaded images from THREE.ImageLoader inside a CubeTexture?


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?


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);					


The THREEImageLoaderPromise, is just this:

const THREEImageLoaderPromise = (file, three, whileLoading) => {
	const threeLoadingManager = new three.LoadingManager();
	threeLoadingManager.onProgress = (url, 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) {
					.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


I Code on Chromebook but i don’t think you needed to know that. (I’ll tell you more if you need me to)

Yes, you just have to pass an array of six images to the constructor of THREE.CubeTexture. After assigning the images to your cube texture, you have to set the needsUpdate flag of the texture to true. CubeTextureLoader does essentially the same thing.

1 Like

Oh, Thank you :slight_smile:

Right now I’m doing it in a different way, but thanks for the help :+1:

Wait so do I need to add the image object or the image path / URL?