# How to get the center coordinate of a face using only the a, b, c and normal when Raycasting?

**URL:** <https://discourse.threejs.org/t/how-to-get-the-center-coordinate-of-a-face-using-only-the-a-b-c-and-normal-when-raycasting/59449>\
**Category:** Questions\
**Tags:** vector3, threejs, geometry\
**Created:** [December 20, 2023, 4:49am UTC](https://discourse.threejs.org/t/how-to-get-the-center-coordinate-of-a-face-using-only-the-a-b-c-and-normal-when-raycasting/59449 "2023-12-20T04:49:16Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![CosmicFantasy](https://avatars.discourse-cdn.com/v4/letter/c/a9adbd/32.png) [@CosmicFantasy](https://discourse.threejs.org/u/CosmicFantasy)\
**Post date:** [December 20, 2023, 4:49am UTC](https://discourse.threejs.org/t/how-to-get-the-center-coordinate-of-a-face-using-only-the-a-b-c-and-normal-when-raycasting/59449/1 "2023-12-20T04:49:17Z")

</div>

So we can get the center Vector3 of a face by doing this:

```javascript
const GEOMETRY = OBJECT3D['geometry'];

let pos = GEOMETRY['attributes']['position'];

let a = new THREE.Vector3().fromBufferAttribute(pos, intersectionData['face']['a']);
let b = new THREE.Vector3().fromBufferAttribute(pos, intersectionData['face']['b']);
let c = new THREE.Vector3().fromBufferAttribute(pos, intersectionData['face']['c']);

let faceCenter = new THREE.Vector3().addVectors(a, b).add(c).multiplyScalar(1 / 3);

```

I see that the intersectionData[‘face’] gives us these information for example:

` {"a":4,"b":6,"c":5,"normal":{"x":-1,"y":0,"z":0},"materialIndex":0}`

Can I just from the information provided by intersectionData[‘face’] and get the Vector3 center coordinate of that face instead? I saw `THREE.Triangle()`, but I don’t know how to apply the normal on it so that it rotates correctly…?

---

<div class="post-metadata">

**Author:** ![anidivr](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/anidivr/32/32924_2.png) [@anidivr](https://discourse.threejs.org/u/anidivr)\
**Post date:** [December 20, 2023, 12:16pm UTC](https://discourse.threejs.org/t/how-to-get-the-center-coordinate-of-a-face-using-only-the-a-b-c-and-normal-when-raycasting/59449/2 "2023-12-20T12:16:11Z")

</div>

I asked Chat GPT, here’s its answer.

To get the center coordinate of a face in three.js, you need to calculate the centroid of the face. The centroid is the average position of all the vertices of the face. For a triangular face in three.js (which is the most common type in 3D meshes), you can calculate the centroid by averaging the coordinates of its three vertices. Here’s a step-by-step guide:

1. **Access the vertices of the face** : Retrieve the vertices of the face using the indices `a`, `b`, and `c` from the `face` object.

2. **Calculate the centroid** : The centroid is the average of the coordinates of these vertices.

Here’s an example function that calculates the centroid of a face in a three.js mesh:

```javascript
function getFaceCenter(face, geometry) {
    var vA = geometry.vertices[face.a];
    var vB = geometry.vertices[face.b];
    var vC = geometry.vertices[face.c];

    var centroid = new THREE.Vector3();
    centroid.add(vA);
    centroid.add(vB);
    centroid.add(vC);
    centroid.divideScalar(3);

    return centroid;
}

```

In this function, you pass in the `face` object (which you got from the raycast intersection) and the `geometry` of the mesh. The function then uses the indices `a`, `b`, and `c` from the face to access the corresponding vertices in the geometry’s `vertices` array. It calculates the centroid by averaging these three vertices.

This will give you the center point of the face in the local coordinate system of the geometry. If you need this point in world coordinates, you would have to apply the mesh’s world transformation to this point. This can be done using the `localToWorld` method of the mesh:

```javascript
var worldCentroid = mesh.localToWorld(centroid.clone());

```

This converts the centroid from the local coordinate space of the mesh to the world coordinate space.

[Link to full chat conversation](https://chat.openai.com/share/271b03c6-57cd-41ed-bb5d-dc11eff6e7a0)

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [December 20, 2023, 1:56pm UTC](https://discourse.threejs.org/t/how-to-get-the-center-coordinate-of-a-face-using-only-the-a-b-c-and-normal-when-raycasting/59449/3 "2023-12-20T13:56:28Z")

</div>

> [@anidivr](#):
>
> `geometry.vertices[face.a];`

Won’t work, as it’s for deprecated `Geometry`.

> [@CosmicFantasy](#):
>
> I saw `THREE.Triangle()`

Internally, it will do the same, like you calculate `faceCenter`. So, your approach is very much acceptable. 🤔