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