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

Questions
, ,
1

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

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…?

2

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:

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:

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

2 Likes
3

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

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

1 Like