threejs Creating a grid from triangles - three.js

Question

I'm trying to create a grid using the following code. The reason is I would like the grid this way is to have the face to be colored and then change the color when I parse in the x,y coordinates. But I get a "draw array attempt to get access out of bound arrays" error.
for (var i = 0, j = 0, k = -halfSize; i <= divisions; i++, k += step) {
vertices.push(-halfSize, 0, k, halfSize, 0, k);
vertices.push(k, 0, -halfSize, k, 0, halfSize);
var colorg = new THREE.Color("rgb(255, 0, 0)");
colorg.toArray( colors, j ); j += 3;
colorg.toArray( colors, j ); j += 3;
colorg.toArray( colors, j ); j += 3;
colorg.toArray( colors, j ); j += 3;
}
var vertices32 = new Float32Array(vertices);
var colors32 = new Float32Array(colors);
geometry.addAttribute('position', new THREE.BufferAttribute(vertices32, 3 ));
geometry.addAttribute('normal', new THREE.BufferAttribute(normals, 3));
geometry.addAttribute('color', new THREE.BufferAttribute(colors32, 3));
//fgeometry.addAttribute('uv', new THREE.BufferAttribute(uvs, 2));
// optional
geometry.computeBoundingBox();
geometry.computeBoundingSphere();
// set the normals
geometry.computeVertexNormals(); // computed vertex normals are orthogonal to the face for non-indexed BufferGeometry
// material
var material = new THREE.MeshPhongMaterial({
color: 0xffffff,
shading: THREE.FlatShading,
vertexColors: THREE.VertexColors,
side: THREE.DoubleSide
});
// mesh
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

Answer 1

Have you tried BufferGeometry.toNonIndexed? In this way you can create a normal PlaneBufferGeometry and turn it into a non-indexed geometry. Each face has now unique vertices.
let geometry = new THREE.PlaneBufferGeometry();
geometry = geometry.toNonIndexed();
After that, you just add the color attribute to the geometry. Full example:
https://jsfiddle.net/f2Lommf5/4230/