Get face global normal in Three.js

Question

Say I have a intersect found using raycaster.

intersects[0]

How do I get this intersect face's world normal?

Hopefully I have formulated this question correct. To put it in another way: How do I get the direction of a point on the surface of a mesh?

Answer 1

The normal will be available in the face.

For example

intersects[0].face.normal

A typical intersect returns the following:

{
    "distance": 511.4062319788414,
    "point": {
        "x": -49.99999999999999,
        "y": -2.3972604422461297,
        "z": -8.950476224522788
    },
    "face": {
        "a": 2,
        "b": 3,
        "c": 1,
        "normal": {
            "x": 1,
            "y": 0,
            "z": 0
        },
        "vertexNormals": [{
            "x": 1,
            "y": 0,
            "z": 0
        }, {
            "x": 1,
            "y": 0,
            "z": 0
        }, {
            "x": 1,
            "y": 0,
            "z": 0
        }],
        "color": {},
        "vertexColors": [],
        "vertexTangents": [],
        "materialIndex": 0
    },
    "faceIndex": 1,
    "object": {
        "metadata": {
            "version": 4.3,
            "type": "Object",
            "generator": "ObjectExporter"
        },
        "geometries": [{
            "uuid": "D12DB865-0BA3-4B38-BB18-92CBCFD5D630",
            "type": "BoxGeometry",
            "width": 20,
            "height": 20,
            "depth": 20
        }],
        "materials": [{
            "uuid": "B405897C-0A60-44A8-B057-683EFA53E895",
            "type": "MeshLambertMaterial",
            "color": 16716340,
            "ambient": 16777215,
            "emissive": 0
        }],
        "object": {
            "uuid": "34E07648-DA46-42B8-A1B1-7C87A67315B9",
            "type": "Mesh",
            "name": "cube1",
            "geometry": "D12DB865-0BA3-4B38-BB18-92CBCFD5D630",
            "material": "B405897C-0A60-44A8-B057-683EFA53E895",
            "matrix": [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -60, 0, 0, 1]
        }
    }
}

To convert to world Normal, where object is the picked item, use

var normalMatrix = new THREE.Matrix3().getNormalMatrix( object.matrixWorld );
console.log(normal.clone().applyMatrix3( normalMatrix ).normalize());