How can I get a group of triangles that comprise a cube face?

Question

I’m trying to get the triangles that create a cube mesh face.

This is what I tried: The box geometry mesh turns to have a groups array of 6 items. I assumed that since a cube has 6 faces, each of this objects was storing data related to the faces than comprised the cube face.

However, in the following code I’m getting the indices stored in the first group and getting the vertices by using the mesh.getVertexPosition() to render lines from those points.

const topFaceTrgl = groups[0];
    for (
      let i = topFaceTrgl.start;
      i < topFaceTrgl.start + topFaceTrgl.count;
      i += 3
    ) {
      const v1 = mesh.getVertexPosition(
        i,
        new THREE.Vector3()
      );
      const v2 = mesh.getVertexPosition(
        i + 1,
        new THREE.Vector3()
      );
      const v3 = mesh.getVertexPosition(
        i + 2,
        new THREE.Vector3()
      );

      const lineGeo = new THREE.BufferGeometry();
      const lineBufAtrb = new THREE.BufferAttribute(
        new Float32Array(4 * 3),
        3
      );
      lineBufAtrb.setXYZ(0, v1.x, v1.y, v1.z);
      lineBufAtrb.setXYZ(1, v2.x, v2.y, v2.z);
      lineBufAtrb.setXYZ(2, v3.x, v3.y, v3.z);
      lineBufAtrb.setXYZ(4, v1.x, v1.y, v1.z);
      lineGeo.setAttribute("position", lineBufAtrb);
      const lineMat = new THREE.LineBasicMaterial({
        color: "white",
        transparent: true,
      });
      const lineMesh = new THREE.Line(lineGeo, lineMat);
      scene.add(lineMesh);
}

As result, the following lines are rendered:

Instead, I was expecting the lines to draw one of the cube faces like this

What it should be the process to get the grouped triangles that builds a cube face?

Answer 1

After an exhausting trial and error process, I realized that the code was wrong implemented, specifically with the part of passing the appropriate geometry.index to the mesh.getVertexPosition() argument. Thus, It appears that three.js really groups the triangles that comprise a cube face inside the geometry.groups property, Thanks!

a group:

2 group items:

3 group items: