javascript - 如何更改 Three.js 中 PlaneGeometry 的法线？

Question

我正在使用 Three.js 来显示平面，但是我似乎找不到更改其法线的方法。有一个具有普通属性的 Plane 类，那么有没有办法使用它来代替 PlaneGeometry 呢？

Answer 1

PlaneGeometry 无法更改其法线，该法线实际上始终为 (0,0,1)。要使平面几何面向不同方向，需要变换其顶点。这通过将 Plane 对象转换为变换矩阵并应用该矩阵来完成PlaneGeometry 的矩阵。下面是生成变换矩阵的代码:

// Assumes that "plane" is the source THREE.Plane object.
// Normalize the plane
var normPlane=new THREE.Plane().copy(plane).normalize();
// Rotate from (0,0,1) to the plane's normal
var quaternion=new THREE.Quaternion()
  .setFromUnitVectors(new THREE.Vector3(0,0,1),normPlane.normal);
// Calculate the translation
var position=new THREE.Vector3(
  -normPlane.constant*normPlane.normal.x,
  -normPlane.constant*normPlane.normal.y,
  -normPlane.constant*normPlane.normal.z);
 // Create the matrix
var matrix=new THREE.Matrix4()
 .compose(position,quaternion,new THREE.Vector3(1,1,1));
// Transform the geometry (assumes that "geometry"
// is a THREE.PlaneGeometry or indeed any
// THREE.Geometry)
geometry.applyMatrix(matrix);