Hi,
I have a complex mesh object and I have predefined positions in different parts of the mesh.
I’d like to add another object on each position while the add object will face to direction of the mesh face normal at each position.
I know how to add it using mouse raycasting, but here I don’t have the mouse - I load the positions and want to add the objects on the positions.
any idea?
You can use the code from this example: https://threejs.org/examples/#webgl_decals
The mouse helper in this demo visualizes the current selected position on the mesh. It is oriented along the respective face normal. It’s best when you study how the checkIntersection()
function works. Your own code might look like this:
objectToAdd.position.copy( predefinedPosition );
const n = face.normal.clone();
n.transformDirection( complexMesh.matrixWorld );
n.add( predefinedPosition );
objectToAdd.lookAt( n );
thank you, I’m familiar with this example, the mouse helper use the face normal using raycaster,
how can I extract the face normal from each given position without raycaster?
You could iterate over all faces, use Triangle.closestPointToPoint() in order to determine the face with the closest point to your given position. You then pick this face and the respective face normal.
iterate over all faces to locate all positions sounds heavy… nevertheless not sure I understand how to use this function, can you explain or example?
You basically determine all three vertices of a face and copy these values to Triangle
properties a
, b
and c
. Next, you call Triangle.closestPointToPoint() and pass the position vector as the first argument. The second argument is the result vector and thus the closest point to this particular face. You can then calculate the distance from this closest point to the position vector and save the face with the minimum distance in a variable.
I don’t think there is a faster way to determine the closest face. The good thing is: You have to do this calculation just once.