Dave3of5 Dave3of5 - 3 months ago 29
Javascript Question

How would I create a terrain like this in Three.js

I am trying to create a terrain from a heightmap with a "closed" bottom see the example here:


My terrain generation function is as so:

var img = document.getElementById("landscape-image");
var numSegments = img.width - 1; // We have one less vertex than pixel

var geometry = new THREE.PlaneGeometry(2400, 2400, numSegments, numSegments);

var material = new THREE.MeshLambertMaterial({
color: 0xccccff,
wireframe: false
plane = new THREE.Mesh(geometry, material);
plane.name = 'Terrain';
// set height of vertices
for (var i = 0; i < plane.geometry.vertices.length; i++) {
plane.geometry.vertices[i].z = (terrain[i]/255) * height;


plane.position.x = 0;
plane.rotation.x = 0;
plane.position.y = -10;

The problem I am having is how do I create that connected bottom part of the terrain with a THREE.PlaneGeometry. I can't extrude as:

  1. The bottom must be flat if I extrude it will be bumpy like the

  2. Extrude takes a Shape object, not a Geometry object.

Really scratching my head here anyone done this before.

Edit: Maybe I could use two planes and merge them but how would I merge the side faces into a single piece of Geometery ?

P.S. The example draws straight to the canvas


create a plane for each side which has your amount of Segments in width and 1 in height. them set the top Vertices according to your heightmap

something like this

var geometry_l = new THREE.PlaneGeometry(2400, 0, numSegments, 1);
plane_l = new THREE.Mesh(geometry_l, material);

for (var i = 0; i < numSegments; i++) {
     plane_l.geometry_l.vertices[i].z = (Terrain[0][i]/255) * height;
//Offset to the edge of your main plane

you might want to Change your Terrain Array to be two-dimensional for this. so you can always read the row you want.