It took me a fair amount of attempts but in the end it didn't turn out to be too hard. I've created this custom PlaneGeometry by creating a custom BufferGeometry. Although it's probably 3x heavier to use;

At the moment it holds 36 (12 * 3) positions per tile segment as where the default PlaneGeometry holds 12 (4 * 3) positions. Although i'm not sure if 3x more positions automatically means 3x more performance usage, but it definitely uses more than the default PlaneGeometry.

Here are the results (changes in height smoothen out prettier):

Code to create the geometry:

    const geometry = new THREE.BufferGeometry();
    const vertices = new Float32Array([

        // (North Face)
        .5, -.5, 0, // 0:  Center
        1, -1, 0,   // 1:  NE
        1, 0, 0,    // 2:  NW

        // (East Face)
        .5, -.5, 0, // 3:  Center
        0, -1, 0,   // 4:  SE
        1, -1, 0,   // 5:  NE

        // (South Face)
        .5, -.5, 0, // 6:  Center
        0, 0, 0,    // 7:  SW
        0, -1, 0,   // 8:  SE

        // (West Face)
        .5, -.5, 0, // 9:  Center
        1, 0, 0,    // 10: NW
        0, 0, 0,    // 11: SW

    ]);

    geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
 
    const material = new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true  } );
    const mesh = new THREE.Mesh( geometry, material );

    mesh.rotation.x = - Math.PI / 2;
    scene.add( mesh );