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

**URL:** https://discourse.threejs.org/t/can-you-use-a-preloaded-image-in-an-cube-texture-beginner/34400
**Category:** Questions
**Tags:** textures, loaders, cube-texture
**Created:** [February 2, 2022, 7:07am UTC](https://discourse.threejs.org/t/can-you-use-a-preloaded-image-in-an-cube-texture-beginner/34400 "2022-02-02T07:07:38Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![ErrorBot1122](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/errorbot1122/32/21371_2.png) [@ErrorBot1122](https://discourse.threejs.org/u/ErrorBot1122)
#### Post date: [February 2, 2022, 7:07am UTC](https://discourse.threejs.org/t/can-you-use-a-preloaded-image-in-an-cube-texture-beginner/34400/1 "2022-02-02T07:07:38Z")

</div>

_ **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:
> 
> ```js
> // 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:
> 
> ```js
> 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
> 
> ```js
> // 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)](https://replit.com/@ErrorbotTHE2nd/Roblox-External-Editor)

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

---

<div class="post-metadata">

### Author: ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)
#### Post date: [February 3, 2022, 12:08pm UTC](https://discourse.threejs.org/t/can-you-use-a-preloaded-image-in-an-cube-texture-beginner/34400/2 "2022-02-03T12:08:57Z")

</div>

> [@ErrorBot1122](#):
>
> Is there a way to use a way to use already loaded images from `THREE.ImageLoader` inside a `CubeTexture` ?

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.

---

<div class="post-metadata">

### Author: ![ErrorBot1122](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/errorbot1122/32/21371_2.png) [@ErrorBot1122](https://discourse.threejs.org/u/ErrorBot1122)
#### Post date: [February 3, 2022, 3:16pm UTC](https://discourse.threejs.org/t/can-you-use-a-preloaded-image-in-an-cube-texture-beginner/34400/3 "2022-02-03T15:16:58Z")

</div>

Oh, Thank you 🙂

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

---

<div class="post-metadata">

### Author: ![ErrorBot1122](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/errorbot1122/32/21371_2.png) [@ErrorBot1122](https://discourse.threejs.org/u/ErrorBot1122)
#### Post date: [February 3, 2022, 3:20pm UTC](https://discourse.threejs.org/t/can-you-use-a-preloaded-image-in-an-cube-texture-beginner/34400/4 "2022-02-03T15:20:23Z")

</div>

> [@Mugen87](#):
>
> Yes, you just have to pass an array of six images to the constructor of `THREE.CubeTexture` .

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