2

When I search for some skybox images (e.g. google images) I am getting hits showing single images in a sideways cross pattern. But all the three.js examples (for example) I've managed to find show loading 6 images.

It feels strange that I have to cut up a single image, and then have the extra load of 6 images instead of one image.

The documentation is a bit vague (i.e. as to whether 6 images is an option, or the only way to do it).

Here is a question that seems to be using a single image, but it is one row, and the answer uses a 2x3 grid; neither of them are the cross shape!

(BTW, bonus question: I tried working this out from the source code, but where is it? The THREE.CubeTextureLoader().load() code is a loop to load however many URLs it is given (NB. no checking that it is 6), then calls THREE.Texture, which seems very generic.)

Community
  • 1
  • 1
Darren Cook
  • 27,837
  • 13
  • 117
  • 217

2 Answers2

2

Answer: yes, it can definitely be a single image. You have the proof in the stackoverflow question you provided.

Why the cross images exists: Sometimes (I have done this in OpenGl), you can specify coordinates in you images, for each one of the 6 faces of your cube. It doesn't look like the three.js library offers this functionnality.

What they offer is the .repeat and .offset attributes. This is what is being used in the single image jsfiddle.

for ( var i = 0; i < 6; i ++ ) {
  t[i] = THREE.ImageUtils.loadTexture( imgData ); //2048x256
  t[i].repeat.x  = 1 / 8;
  t[i].offset.x = i / 8;
  // Could also use repeat.y and offset.y, which are probably used in the 2x3 image
  ....

You can experiment with the fiddle to see what happens if you modify those values. i.e.

t[i].repeat.x  = 1 / 4;
t[i].offset.x = i / 4;

Good luck, hope this helped.

Bonus question edit : Also, in the THREE.CubeTextureLoader().load() code, it does in fact do an automatic update once 6 images have been loaded :

...
if ( loaded === 6 ) {
    texture.needsUpdate = true;
    if ( onLoad ) onLoad( texture );
}
phenxd
  • 689
  • 4
  • 17
0

FYI, correct mapping after tried it out:

  x_offset = [3, 1, 2, 2, 2, 0];
  y_offset = [1, 1, 2, 0, 1, 1];
  for ( var i = 0; i < 6; i ++ ) {
      t[i] = loader.load( imgData, render ); //2330 x 1740 // cubemap
      t[i].repeat.x  = 1 / 4;
      t[i].offset.x = x_offset[i] / 4;
      t[i].repeat.y  = 1 / 3;
      t[i].offset.y = y_offset[i] / 3;
      //t[i].magFilter = THREE.NearestFilter;
      t[i].minFilter = THREE.NearestFilter;
      t[i].generateMipmaps = false;
      materials.push( new THREE.MeshBasicMaterial( { map: t[i] } ) );
  }
Cooper
  • 1