Change edges/triangulation of plane geometry - three.js

Question

I am trying to edit the edges/triangulation of a planebuffer geometry in three js.
Example of problem
I want to change the corners in red to be triangulated like the corner in green.
Is this possible via editing a plane, or do I have to start building my own custom mesh buffer.
Here is a fiddle for an example of the kind of manipulation I am doing on the plane. (can click and drag to rotate it)
var camera, scene, renderer;
var geometry, material, mesh;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
camera.position.z = 5;
scene = new THREE.Scene();
geometry = new THREE.PlaneBufferGeometry( 10, 10, 10, 10 );
const pointLight = new THREE.PointLight(0xFFFFFF, 1);
const ambientLight = new THREE.AmbientLight(0xFFFFFF, 0.1);
pointLight.position.y += 2;
pointLight.position.x = -1;
scene.add(pointLight);
scene.add(ambientLight);
const grid = [
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
[0, 1, 1, 2, 2, 2, 2, 2, 1, 1, 0],
[0, 1, 1, 2, 2, 2, 2, 2, 1, 1, 0],
[0, 1, 1, 2, 2, 2, 2, 2, 1, 1, 0],
[0, 1, 1, 2, 2, 2, 2, 2, 1, 1, 0],
[0, 1, 1, 2, 2, 2, 2, 2, 1, 1, 0],
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
];
const planePos = geometry.attributes.position;
for (let x = 0; x < grid.length; x++) {
const row = grid[x];
for (let y = 0; y < row.length; y++) {
const h = row[y];
const i = (x * row.length) + y;
planePos.setZ(i, h * 0.5);
}
}
//
material = new THREE.MeshPhongMaterial({flatShading:true});
mesh = new THREE.Mesh( geometry, material );
mesh.rotateX(Math.PI * -0.5);
mesh.translateZ(-1);
scene.add( mesh );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var controls = new THREE.OrbitControls( camera, renderer.domElement );
}
function animate(t) {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
body {
margin: 0;
}
<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

Answer 1

Ok, as #prisoner849 commented, buffergeometryies index property was the answer.
I redid the triangulation of the mesh by looping over the "squares" of my mesh, getting their corners and then changing the indexes for each squares triangles to one of a pre calculated set, based on which corner had a unique height. It also seems that you want the indexes to go in a specific order to control which side is "up", it seems to be that counter clockwise or so.
const size = 10;
const vertMap = [0, 3, 1, 3, 2, 1];
const triSets = [
[0, 3, 2, 0, 2, 1],
[1, 3, 2, 1, 0, 3],
[0, 3, 2, 0, 2, 1],
[1, 3, 2, 1, 0, 3],
];
const getSquareVerts = (x, y) => {
const i = (y * size) + x + y;
return [i, i + 1, i + (size + 2), i + (size + 1)];
}
const getUniqueHeightPoint = (verts) => {
let unique = -1;
const set = verts.reduce((p, n) => {
const c = p[n.toString()] || 0;
p[n.toString()] = c + 1;
return p;
}, {});
const keys = Object.keys(set);
if (keys.length == 2 && (set[keys[0]] == 1 || set[keys[0]] == 3)) {
for (const key of keys) {
if (set[key] == 1) {
unique = verts.findIndex((v) => v == parseFloat(key));
break;
}
}
}
return unique;
}
const reworkTris = (plane) => {
let indexOffset = 0;
const planeIdx = plane.geometry.index;
for (let y = 0; y < this.size; y++) {
for (let x = 0; x < this.size; x++) {
const verts = this.getSquareVerts(x, y);
const heights = verts.map((v) => this.planePos.getZ(v));
const uniqueHeight = this.getUniqueHeightPoint(heights);
let tris = vertMap.map((i) => verts[i]);
if (uniqueHeight >= 0) {
tris = triSets[uniqueHeight].map((i) => verts[i]);
}
planeIdx.set(tris, indexOffset);
indexOffset += 6;
}
}
planeIdx.needsUpdate = true;
}
const plane = new THREE.Mesh(new THREE.PlaneBufferGeometry());
reqorkTris(plane);