CODEWITHSUNDEEP
javascriptthree.js
Dave3of5
Dave3of5

Reputation: 730

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

Upvotes: 1

Views: 3093

Answers (1)

Thomasn
Thomasn

Reputation: 483

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.

Upvotes: 3

Related Questions