Get the face center position

Hi I have a glb model so i need the center position of faceIndex. So how can I do that like how can i get the center position

Is it related to Raycaster?

Yes it is related to raycaster

Depends on what kind of geometry you have (indexed or non-indexed).
Non-indexed: a triplet of consequential vertices defines a face. Thus, work with geometry.attributes.position directly.
Indexed: a triplet of consequential indices of vertices defines a face. Thus, work with geometry.attributes.position via geometry.index.
When you find three vertices of a face, you can use THREE.Triangle() and its .getMidpoint() method.

I have this type of property when I click on specific position on glb model. Basically I want to add the annotation on exact position where my mouse click.


What position do you want to use? Center of a face, or point of intersection?

center of face .Once I get the position so I can save the position in JSON and use those position use in future for model which I selected

These are indices of vertices that form the face.
You need to use something like this:

let pos = geometry.attributes.position;
let a = new THREE.Vector3().fromBufferAttribute( pos, face.a );
let b = new THREE.Vector3().fromBufferAttribute( pos, face.b );
let c = new THREE.Vector3().fromBufferAttribute( pos, face.c );
let faceCenter = new THREE.Vector3().addVectors( a, b ).add( c ).multiplyScalar( 1/3 );
1 Like

Thanks alot :slight_smile:

I apply your code and it show me three values .So I need the one value of center face .Means i multiply all these three values to get the center value of face?

Three values are coordinates of the center of a face, why do you want to multiply them?

My scenario is that i want to add the annotation in runtime. After add the annotation ,once you load the model again then i will apply the annotation automatically with JSON which I have to save the locations as well. So I need the position of model where i click on specific surface not only the point of intersection

Center of a face is in local coordinates of the model, as you calculate it with vertices of model’s geometry.
If you need it in global coordinates, do model.localToWorld( center_of_face )

ok so these are the local coordinates which you mention above