Samstag, 7. September 2013

Three.js - Skybox

A skybox is a big cube in which our scene is placed inside. Our texture is drawn on the inside faces of the cube to create a sky.


The texture is divided into 6 parts, facing in all directions. Corresponding to the asex, we name them skybox-xpos.png (right), skybox-xnef.png (left), skybox-ypos.png (top), ....

This is the structure:

Creating the skybox

We first have to load all 6 textures into the material. Then we add the cube. It's as simple as that.
Keep in mind that the size of the skybox's cube has to fit into the camera's near/far viewpoint.
If the skybox is somehow rotated, you have to correct it (see example).

 var imagePrefix = "images/skybox-";
 var directions  = ["xpos", "xneg", "ypos", "yneg", "zpos", "zneg"];
 var imageSuffix = ".png";
 var materialArray = [];
 for (var i = 0; i < 6; i++)
  materialArray.push( new THREE.MeshBasicMaterial({
   map: THREE.ImageUtils.loadTexture( imagePrefix + directions[i] + imageSuffix ),
   side: THREE.BackSide
 var skyGeometry = new THREE.CubeGeometry( 500, 500, 500 );
 var skyMaterial = new THREE.MeshFaceMaterial( materialArray );
 var skyBox = new THREE.Mesh( skyGeometry, skyMaterial );
 skyBox.rotation.x += Math.PI / 2;
 scene.add( skyBox );

Keine Kommentare:

Kommentar veröffentlichen