Three.js - Heightmaps

Heightmaps are used for a rough terrain based on an image which gives us the desired heights. For adding a heightmap to a plane in three.js, 2 steps are required.

• get data from an image
• apply data to the vertices of the plane

Read data from image

This function returns an array with all the pixels of an image converted into a value. If the scale value is set to 1, you will get values from 1 (black) to 63,75 (white).

 
    //return array with height data from img
    function getHeightData(img,scale) {
     
     if (scale == undefined) scale=1;
     
        var canvas = document.createElement( 'canvas' );
        canvas.width = img.width;
        canvas.height = img.height;
        var context = canvas.getContext( '2d' );

        var size = img.width * img.height;
        var data = new Float32Array( size );

        context.drawImage(img,0,0);

        for ( var i = 0; i < size; i ++ ) {
            data[i] = 0
        }

        var imgd = context.getImageData(0, 0, img.width, img.height);
        var pix = imgd.data;

        var j=0;
        for (var i = 0; i<pix.length; i +=4) {
            var all = pix[i]+pix[i+1]+pix[i+2];
            data[j++] = all/(12*scale);
        }
        
        return data;
    }

Apply height data to plane

        // terrain
 var img = new Image();
 img.onload = function () {
  
     //get height data from img
     var data = getHeightData(img);
  
     // plane
     var geometry = new THREE.PlaneGeometry(10,10,9,9);
     var texture = THREE.ImageUtils.loadTexture( 'images/heightmap2.png' );
     var material = new THREE.MeshLambertMaterial( { map: texture } );
     plane = new THREE.Mesh( geometry, material );
     
     //set height of vertices
     for ( var i = 0; i<plane.geometry.vertices.length; i++ ) {
          plane.geometry.vertices[i].z = data[i];
     }

     scene.add(plane);
   
 };
 // load img source
 img.src = "images/heightmap2.png";

Example

I have a 10x10 plane with 100 vertices. My heightmap image is 10x10 px and looks like this:

Scaling the image data by 10 the result looks like this:

Important

The amount of vertices a plane has is (segmentsWidth+1) * (segmentsHeight+1).

If your image is 10x10 px it will give you 100 values. So you have to divide your plane into 9x9 segments.

For example this plane is divided into 5x5 segments, which results into 36 vertices.

var geometry = new THREE.PlaneGeometry(10,10,5,5);

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.

Texture

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).

//skybox
 
 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 );

See http://stemkoski.github.io/Three.js/Skybox.html