CubeTextureLoader mapping of textures to skybox

Questions
,
1

Hello, I am looking to sort out an issue I am having with textures appearing seamless in my skybox.

According to the docs the order is:
‘px.png’,
‘nx.png’,
‘py.png’,
‘ny.png’,
‘pz.png’,
‘nz.png’

I assume this means:
[ oo ][ py ][ oo ][ oo ]
[ nx ][ pz ][ px ][ nz ]
[ oo ][ ny ][ oo ][ oo ]

Well I have tried this and all sorts of other combos and I am unable to get it correct. I have pulled seamless textures from a generator so I know they are correct.

Its also worthwhile to note that the loader is an ImageBitmapLoader with imageOrientation flipY active because when I had switched to this loader, for an important reason I have forgotten, it inverted the texture. Would using the ImageBitmapLoader rather than the cube loader cause an issue?

  // add space background
  addSkybox = () => {
    // console.log("Creating Universe");
    // const imgArray      = ["skybox_posx.png", "skybox_negx.png", "skybox_posy.png", "skybox_negy.png", "skybox_posz.png", "skybox_negz.png"],
    const b             = "skybox_2_",
          imgArray      = [`${b}px.png`, `${b}nx.png`, `${b}py.png`, `${b}ny.png`, `${b}pz.png`, `${b}nz.png`],
          materialArray = [];

    for (let i = 0; i < 6; i++){
      this.loader.load(imgArray[i], (imgBitmap) => {
        const skyTexture = new THREE.CanvasTexture(imgBitmap),
              material   = new THREE.MeshBasicMaterial({ 
                                map: skyTexture, 
                                side: THREE.BackSide 
                               });

        materialArray.push( material );
      }, undefined, // onProgress calback unsupported
      error => {
        console.log("Loader Error");
        console.log(error);
        this.props.setModalText("Error Loading Skybox Textures");
      })
    }

    const skyboxMaterial = new THREE.MeshFaceMaterial( materialArray ),
          skyGeo         = new THREE.BoxGeometry( 5000, 5000, 5000, 1, 1, 1),
          sky            = new THREE.Mesh(skyGeo, skyboxMaterial);

    sky.name = "skybox";
    this.sceneLoader.skybox = sky;
  }
2

Do you get the correct result if you load the skybox via CubeTextureLoader using this code?

3

I tested it out and couldn’t seem to get the CubeTextureLoader to work.

Forgetting why I had to use an ImageBitmap Loader for the rest of the non skybox assets, I decided to just make the global loader a TextureLoader.

The Texture Loader implementation seems to work. So all is well…

Thanks for the code reference Mugen. It helps me continue the debugging process and look into alternatives moreso.

Here is the code in case anyone finds this post while searching.

// LOADER
this.loader = new THREE.TextureLoader();
this.loader.setPath( './assets/' );

…

// add space background
  addSkybox = () => {
    // console.log("Creating Universe");
    const imgArray      = ["skybox_posx.png", "skybox_negx.png", "skybox_posy.png", "skybox_negy.png", "skybox_posz.png", "skybox_negz.png"],
          materialArray = [];

    for (let i = 0; i < 6; i++){
      this.loader.load(imgArray[i], (skyTexture) => {
        const material = new THREE.MeshBasicMaterial({ 
                                map: skyTexture, 
                                side: THREE.BackSide 
                              });

        materialArray.push( material );
      }, undefined, // onProgress calback unsupported
      error => {
        console.log("Loader Error");
        console.log(error);
        this.props.setModalText("Error Loading Skybox Textures");
      })
    }

    const skyboxMaterial = new THREE.MeshFaceMaterial(materialArray),
          skyGeo         = new THREE.BoxGeometry(5000, 5000, 5000, 1, 1, 1),
          sky            = new THREE.Mesh(skyGeo, skyboxMaterial);

    sky.name = "skybox";
    this.sceneLoader.skybox = sky;
  }