what I’m trying to achieve is not easy to explain.
But what I’m trying to do is build a “boxy” terrain that represents an elevation grid.

The issue that I’m now facing is that three.js is doing a great smooth terrain.
From this example: https://threejs.org/examples/#physics_ammo_terrain

I manage to build an utility class that build a terrain.

export class CubeGrid extends THREE.Group {
  private terrain: THREE.Mesh<THREE.BufferGeometry, THREE.MeshPhongMaterial>;
  private width: number;
  private depth: number;

  private terrainWidth = 30;
  private terrainDepth = 30;

  constructor(depth: number, width: number) {
    super();

    this.depth = depth;
    this.width = width;

    const terrainMaxHeight = 2;
    const terrainMinHeight = 0;

    const heightData = generateHeight(this.terrainWidth, this.terrainDepth, terrainMinHeight, terrainMaxHeight);

    const geometry = new THREE.PlaneGeometry(this.width, this.depth, this.terrainWidth - 1, this.terrainDepth - 1);
    geometry.rotateX(Math.PI / 2);
    const vertices = geometry.attributes.position.array;

    for (let i = 0, j = 0, l = vertices.length; i < l; i++, j += 3) {
      // j + 1 because it is the y component that we modify
      vertices[j + 1] = heightData[i];
    }
    geometry.computeVertexNormals();
    const groundMaterial = new THREE.MeshPhongMaterial({ color: 0xc7c7c7, side: THREE.DoubleSide });

    this.terrain = new THREE.Mesh(geometry, groundMaterial);
    this.terrain.castShadow = false;
    this.terrain.receiveShadow = false;
    this.terrain.rotateX(Math.PI);
    this.add(this.terrain);
  }

  updateGrid(data) {
    const heightData = data;

    const geometry = new THREE.PlaneGeometry(this.width, this.depth, this.terrainWidth - 1, this.terrainDepth - 1);
    geometry.rotateX(Math.PI / 2);
    const vertices = geometry.attributes.position.array;

    for (let i = 0, j = 0, l = vertices.length; i < l; i++, j += 3) {
      // j + 1 because it is the y component that we modify
      vertices[j + 1] = heightData[i];
    }
    geometry.computeVertexNormals();
    this.terrain.geometry.dispose();
    this.terrain.geometry = geometry;
  }
}

The main issue is that this does not have the “boxy” effect I’m looking for.

This is my result:

But I’m trying to do something like this:

In that example, the “data” I’d be using to create the terrain would be something like this:

const data = [
    2,1,1,
    4,1,1,
    6,4,1
]

How could I achieve that “boxy” effect?
I tried to simply create a lot of boxes, but I will be instantiating a loot of boxes (100×100 grid), and I dont want to loose performance.

Thanks in advance!