如何在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);

Answer 2

还有另一种可能适合您的选择。 您可以使用Mesh类中的lookAt方法。 此方法从Object3D类继承。 您只需要指定平面的外观即可。 这样，您可以将PlaneGeometry重复用于其他Mesh实例。

var geometry = new THREE.PlaneGeometry( 12, 12 );
var material = new THREE.MeshBasicMaterial( { color: 0x005E99 } );
var plane = new THREE.Mesh( geometry, material );
plane.lookAt(new THREE.Vector3(0.7, 0.7, 0.7));