Used PlaneGeometry for terrain, but would like to "box-it" up. How can I extrude or add volume? Somehow use a BoxGeometry instead?

Questions
1

Hi there,

I’ve created a terrain using a PlaneGeometry and XYZ coordinates for each vertex (not a height map). This worked all fine! But now I was wondering, I would like the terrain “boxed-up” like:

EXAMPLE

I guess I have two options: either try to use a BoxGeometry, but I failed and assigning the data to the top face or somehow extrude or add volume to the PlaneGeometry. For relevance, my current code for the plane:

function createTerain(data, scene) {
  const gridSize = Math.sqrt(data.length);
  const geometry = new THREE.PlaneGeometry(gridSize, gridSize, gridSize - 1, gridSize - 1);
  const material = new THREE.MeshLambertMaterial({ color: COLOR });

  const positions = geometry.attributes.position.array;
  data.forEach(([x, y, z], j) => positions.set([x, y, z], j * 3));

  geometry.attributes.position.needsUpdate = true;
  const mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);

  return mesh;
}

Thankful for any ideas!

2

Yes, you may use a box and modify only the vertices at the top side (this includes the edge vertices of side faces).

But you can use just a plane geometry as well by boxing it down - i.e. the peripheral vertices are all pushed down to ground level 0.

https://codepen.io/boytchev/full/mdaKJQR

https://codepen.io/boytchev/full/vYVPXxX

https://codepen.io/boytchev/full/qBLNEVZ

2 Likes