javascript - 如何在 threejs 中获得正确的法线值？

Question

我不明白 threejs 中法线是如何计算的。

这是我的问题:

我创建了一个简单的平面

var plane = new THREE.PlaneGeometry(10, 100, 10, 10);
var material = new THREE.MeshBasicMaterial();
material.setValues({side: THREE.DoubleSide, color: 0xaabbcc});
var mesh = new THREE.Mesh(plane, material);
mesh.rotateY(Math.PI / 2);
scene.add(mesh);

当我读取这个平面的法线时，我得到 (0, 0, 1)。但平面平行于 z 轴，所以该值是错误的。

我尝试添加

mesh.geometry.computeFaceNormals();
mesh.geometry.computeVertexNormals();

但我仍然得到相同的结果。

我错过了什么吗？

如何从 threejs 获取法线的正确值？

谢谢。

Answer 1

几何法线在对象空间中。要将它们转换到世界空间，首先要确保对象矩阵已更新。

object.updateMatrixWorld();

(渲染器在每个渲染循环中为您完成此操作，因此您可以跳过此步骤。)

然后，计算法线矩阵:

var normalMatrix = new THREE.Matrix3().getNormalMatrix( object.matrixWorld );

现在像这样将法线转换为世界空间:

var newNormal = normal.clone().applyMatrix3( normalMatrix ).normalize();

three.js r.66