How to change the color of specific plane segments

[Louis3797]

So I'm currently struggling with this problem where I'm trying to update the color of a single plane segment. I've tried a lot of things but can't quite figure out how it works. I hope someone can help me here.

So my plane looks like this:

// planeSize is 31 
 <mesh
        position={[0, -0.001, 0]}
        rotation={[-Math.PI / 2, 0, 0]}
        receiveShadow
        ref={mesh}
        castShadow
        onClick={(e) => { ... } }
        onPointerMove={(e) => { ... } }
      >
        <planeGeometry
          args={[planeSize, planeSize, planeSize, planeSize]}
          {...floor} // this is for raycasting, const floor = new Plane(new Vector3(), 0)
          ref={ground}
          attach="geometry"
          name="floor"
        />
        <meshStandardMaterial
          side={DoubleSide}
          vertexColors
          attach="material"
        />
</mesh>

I also added a color attribute to the plane.

 useLayoutEffect(() => {
    const hVerts = ground.current.parameters.heightSegments + 1;
    const wVerts = ground.current.parameters.widthSegments + 1;

    const colors: any[] = [];

    for (let i = 0; i < hVerts; i++) {
      for (let j = 0; j < wVerts; j++) {
        colors.push(1, 1, 1);
      }
    }

    ground.current.setAttribute(
      "color",
      new BufferAttribute(new Float32Array(colors), 3)
    );
  }, []);

Many solutions I have found have used faces, but there is no faces attribute defined. I am also very wondering about this, since I am using a planeGeometry and not a planeBufferGeometry.