Trying to construct a terrain based on a heightmap with an enclosed bottom layer. Refer to this example for clarification:
The current function for generating the terrain is as follows:
var img = document.getElementById("landscape-image");
var numSegments = img.width - 1; // 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 vertex heights
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 challenge arises in creating the connected bottom section of the terrain using THREE.PlaneGeometry. Extrusion is not viable due to:
- The necessity for a flat bottom; extrusion would result in a bumpy surface.
- The extrude function requires a Shape object, not Geometry.
This poses a real conundrum. Has anyone encountered and resolved this issue before?
Edit: Could potentially utilize two planes and merge them together, but merging side faces into a single Geometery piece remains unclear.
P.S. The mentioned example directly renders to the canvas element.