Search code examples
three.jsmeshheightmap

Threejs deform mesh from heightmap

How can I go about deforming an already created mesh with a heightmap in three.js? I did a few searches and couldn't find anything, so I'm asking here.

Solution

  • You are lucky, three.js-r72 introduced vertex displacement in the MeshPhongMaterial. You set the displacement map like a normalMap:

    var displacementMap = THREE.ImageUtils.loadTexture( "textures/ninja/displacement.jpg" );

var material = new THREE.MeshPhongMaterial( {
                color: 0x0a0100,
                //...
                displacementMap: displacementMap,
                displacementScale: 2.436143,
                displacementBias: - 0.428408,
            } );

    scale: The amount of displacement, "how tall are your spikes"

    bias: Shift the center up or down

    Official Example: http://threejs.org/examples/#webgl_materials_displacementmap