Learning Three.js

or WebGL for Dummies

Lets Do a Sky

This tutorial is about doing a sky. It makes a nice panorama with a nice immersive effect. This is much simpler than people would expect : only 3 steps for a total around 20 lines. You can find a live demo of it. It may be a easy addition to your effects. This is simple and efficient.


Technically this is called a cube mapping. Why that ? because the principle is so simple: we create a large cube, apply some images on each face of this cube and put the camera inside it. That’s it.

The illustration (from SharkD at wikipedia) on the right, may help understanding. On the bottom left, you can see a 3D scene with a dot in the middle… This is where the camera will be positionned. On the bottom right, you can see the same 3D scene, with the large cube and now the camera is inside. The kind of cross on the top half are the images used as texture. Those are the ones which gonna be applied inside the large sky cube. If you go to the demo, open your browser debugger and look at downloaded images, you will see those 6 images.

Lets Code it Now!

Now that we got an understanding of the background, lets code it. To add a skybox to your page is 3 simple steps in around 20 lines. Lets look at them.

Step 1: Lets load the cube textures

This will create the texture objects and download all the images. They are usually stored in 6 images: posx for the front face on X axis, negx for the back side on the X axis, posy for the front on Y axis and so on.

var urlPrefix = "images/Bridge2/";
var urls = [ urlPrefix + "posx.jpg", urlPrefix + "negx.jpg",
    urlPrefix + "posy.jpg", urlPrefix + "negy.jpg",
    urlPrefix + "posz.jpg", urlPrefix + "negz.jpg" ];
var textureCube = THREE.ImageUtils.loadTextureCube( urls );

Step 2: Lets init the shader

Then we init the shader for the cube. A shader is a program which run directly on the graphic card. It uses a special C-like language, run super fast as it is massively paralelle. It is rather standard, dont forget to init tCube uniform with your textures.

var shader = THREE.ShaderUtils.lib["cube"];
var uniforms = THREE.UniformsUtils.clone( shader.uniforms );
uniforms['tCube'].texture= textureCube;   // textureCube has been init before
var material = new THREE.MeshShaderMaterial({
    fragmentShader    : shader.fragmentShader,
    vertexShader  : shader.vertexShader,
    uniforms  : uniforms

Step 3: Lets Create the Cube Itself

Now we create the large cube. The actual size is up to you. Note that you need to ensure your camera is able to see that far. The last step is to add it to the scene, and we are done. Rather simple for such a cool effect i would say.

// build the skybox Mesh 
skyboxMesh    = new THREE.Mesh( new THREE.CubeGeometry( 100000, 100000, 100000, 1, 1, 1, null, true ), material );
// add it to the scene
scene.addObject( skyboxMesh );


This tutorial explained how to do a sky using cube mapping. Additionnaly you can look at an anotated source of the demo especially the skybox section of the live demo. You may go out with your camera and do your own cube images. Just use Hugin later to stinch them back together. It takes around 20 lines, quite small source for such immersive effect. Use it and tweek it for fun :) Examples are there for that.