如何让THREE.Plane始终面对摄像头？

Question

Plane没有lookAt方法，所以我不能只做lookAt(camera.position)。相反，它是用表示为Vector3的normal定义的。我怎么才能让这架飞机始终面对相机？

Answer 1

可以使用Plane.setFromNormalAndCoplanarPoint来实现这一点。

举个简单的例子，让我们假设你的相机正在环绕原点。在这种情况下，您可以非常轻松地将平面设置为面对摄影机：

// assume plane is a THREE.Plane
plane.setFromNormalAndCoplanarPoint( camera.position.clone().normalize(), scene.position )

这使用摄影机的(规格化)位置作为平面的法线，在这种情况下工作。

如果你的相机在自由空间的某处，朝任意方向看，这会有点困难，但它主要是可视化的。

请记住，相机生活在它自己的“空间”中，它位于原点，并向下看-Z轴。现在想象一下，您的平面需要在该空间中的什么位置创建。这么说吧，它可以放在( 10, 10, -10 )。我们可以再次使用一些简单的操作来计算法线。“困难”的部分是将所有东西都移动到世界空间中，但three.js也有方便的功能。

// in camera space...
let planePosition = new THREE.Vector3( 10, 10, -10 )
let normal = planePosition.clone().inverse().normalize()

// convert to world space...
camera.localToWorld( planePosition )
camera.localToWorld( normal )
normal.sub( camera.position ) // fix the normal based on the camera position

plane.setFromNormalAndCoplanarPoint( normal, planePosition )

关于上面的代码，需要注意的一点是，planePosition.clone().inverse().normalize()获取平面位置的副本，跨原点对其进行反转，然后对其进行归一化。这具有创建法线的效果，该法线将指向相机，因为相机位于其自身空间中的原点。这就是为什么在将所有内容转换为世界坐标后，您需要通过摄影机的位置来调整法线。