在 Three.js 中获取面部全局法线

Question

假设我使用 raycaster 找到了一个相交。

intersects[0]

我如何让这张相交脸的世界正常？

希望我已经正确地制定了这个问题。换句话说：如何获得网格表面上一个点的方向？

Answer 1

正常将在脸上可用。

例如

intersects[0].face.normal

典型的相交返回以下内容：

{
    "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]
        }
    }
}

要转换为世界法线，其中对象是拾取的项目，请使用

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