Obtaining normal of the mesh face using raycaster intersectObjects - Three.js

Question

I tried to obtain the normal of the mesh face using these:

ray = new THREE.Raycaster(x, y); 
var intersection = ray.intersectObjects(objectsOptical, true);
var vector = intersection[0].face.normal;

Added intersection[0].point and intersection[0].face.normal (multiplied by constant) as one vertex and intersection[0].point as second vertex of a (gray) line. And I got this (red lines are rays and gray should be normals - but they are not): Illustrative image

Please help me to obtain NORMALS of the mesh FACE.

Thank you.

Answer 1

The normals that you have plotted with red lines look like they might be correct taking into effect perspective projection.

The raycast test hits a single triangular face from your mesh. The normal you are referring to is the normal for the face object the ray hit, ie. from the original mesh.

In the source code for THREE.Raycaster the intersection calculations can be seen returning the face directly.

Elsewhere it is suggested that Ray.intersectObjects() requires face centroids. However I'm not sure about this since the source code doesn't refer to centroids.

Perhaps the normals in the original geometry weren't correct. Try this function first:

geometry.computeFaceNormals();