Dave3of5 - 1 year ago 172
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:

http://demos.playfuljs.com/terrain/

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

geometry.computeFaceNormals();
geometry.computeVertexNormals();

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

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download