The Question should be "Creating a skyBox in three.js using a single image file with 12 equal-sized tiles".
(Special thanks to WestLangley for their assistance in achieving this answer).
Here are some important points to consider:
Assume the tiles in the source image are arranged and referenced as follows:-
//... Personal Source image Desired positions Required
//... tile numbering [column, row] of tiles in scene sequence numbers in
//... scheme tile coordinates xyz positions of 6 Three.js material array
//... [ 0] [ 3] [ 6] [ 9] [0,0] [1,0] [2,0] [3,0] [ ] [py] [ ] [ ] [ ] [2] [ ] [ ]
//... [ 1] [ 4] [ 7] [10] [0,1] [1,1] [2,1] [3,1] [nx] [pz] [px] [nz] [1] [4] [0] [5]
//... [ 2] [ 5] [ 8] [11] [0,2] [1,2] [2,2] [3,2] [ ] [ny] [ ] [ ] [ ] [3] [ ] [ ]
The tile at the center of the "cross" represents the view from the skyBox origin in the Z_positive direction.
No need to spin by 180 degrees to achieve this.
When defining the material, use... side: THREE.FrontSide
To avoid mirror images of the source tiles, use... skyBox.scale.set( -1, 1, 1 )
To ensure complete processing of images, the function F_cutImageUp now includes creating the skyBox mesh.
This method is compatible with the latest version of Three.js (R.68).
This code does not utilize MeshShaderMaterial, for a more advanced example check out http://threejs.org/examples/webgl_shaders_ocean.html
The webgl_shaders_ocean.html example also includes a more efficient tile-cutting and sequencing algorithm.
SkyBox Generation Code (to be added to the THREE.js Initialisation function).
var skybox_sidelength = 10000;
var skyBoxGeometry = new THREE.BoxGeometry( skybox_sidelength, skybox_sidelength, skybox_sidelength);
var skyBoxMaterialArray = [];
var numCols = 4, numRows = 3; //... assuming tiled source image has 4 columns(x) by 3 rows(y)
//... We use the following mapping scheme to reference the tiles in the source image:-
//...
//... Personal [x,y] tile coordinates xyz positions Required tile
//... tile numbering of tiles in scene sequence in Three.js
//... array
//... [ 0] [ 3] [ 6] [ 9] [0,0] [1,0] [2,0] [3,0] [ ] [py] [ ] [ ] [ ] [2] [ ] [ ]
//... [ 1] [ 4] [ 7] [10] [0,1] [1,1] [2,1] [3,1] [nx] [pz] [px] [nz] [1] [4] [0] [5]
//... [ 2] [ 5] [ 8] [11] [0,2] [1,2] [2,2] [3,2] [ ] [ny] [ ] [ ] [ ] [3] [ ] [ ]
var image_file = "3D_Skybox_files/Giant_A.jpg", tile_width = 512, tile_height = 512;
var IP_image = new Image();
IP_image.onload = F_cutImageUp;
IP_image.src = image_file; //... horizontal cross of 6 WYSIWYG tiles in a 4x3 = 12 tile layout.
function F_cutImageUp()
{ //... dividing source image into 12 separate image tiles, numbered 0..11
var imagePieces = [];
var item_num = -1;
for(var xxx = 0; xxx < numCols; ++xxx)
{
for(var yyy = 0; yyy < numRows; ++yyy)
{
var tileCanvas = document.createElement('canvas');
tileCanvas.width = tileWidth;
tileCanvas.height = tileHeight;
var tileContext = tileCanvas.getContext('2d');
tileContext.drawImage(
IP_image,
xxx * tileWidth, yyy * tileHeight,
tileWidth, tileHeight,
0, 0, tileCanvas.width, tileCanvas.height);
imagePieces.push(tileCanvas.toDataURL());
}
}
//... Required sequence of tile view directions = ["xpos", "xneg", "ypos", "yneg", "zpos", "zneg"];
for (var iii = 0; iii < 6; iii++) //... selecting the correct tiles for the 6 different faces of the sky box
{
if (iii == 0) imagePiece_num = 7;//... xpos
else if (iii == 1) imagePiece_num = 1;//... xneg
else if (iii == 2) imagePiece_num = 3;//... ypos
else if (iii == 3) imagePiece_num = 5;//... yneg
else if (iii == 4) imagePiece_num = 4;//... zpos
else if (iii == 5) imagePiece_num = 10;//... zneg
skyBoxMaterialArray.push
( new THREE.MeshBasicMaterial
({ map: THREE.ImageUtils.loadTexture(imagePieces[imagePiece_num]),
side: THREE.FrontSide // <== required
})
);
}
var skyBoxMaterial = new THREE.MeshFaceMaterial( skyBoxMaterialArray );
var skyBox = new THREE.Mesh( skyBoxGeometry, skyBoxMaterial );
skyBox.scale.set( -1, 1, 1 ); // <== required
scene.add( skyBox );
}//... end of F_cutImageUp function <== note function includes skyBox mesh creation.