javascript - 如何使 THREE.Plane 始终面向相机？

Question

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

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() 获取平面位置的副本，将其反转到原点，然后对其进行标准化。这具有创建指向相机的法线的效果，因为相机位于其自己空间的原点。这就是为什么在将所有内容转换为世界坐标后需要通过相机位置调整法线的原因。