如何将相机直接移动到 3D 空间中的对象上方？

Question

我正在学习 ThreeJS 并试图理解一些基本概念。

假设我在 3D 空间中有一个摄像头，正在查看一些 target（在 camera.target 属性中定义）。摄像头位于x1, y1, z1。

我想添加一个功能，当激活时，将相机直接移动到目标上方，即它应该向下看XY 平面，就好像相机在天空中向下看一样。

我的问题是，我如何在 ThreeJS 中做到这一点，以及您如何从概念上/数学上看待这一点？

Answer 1

虽然您的问题看起来很简单，但这里有一些您可能会觉得有用的提示。

位置

是的，最简单的答案是分配相机的位置，其中z 值是与目标的距离。

camera.position.set( 0, 0, distance )

但这仅在目标位于原点时才有效。如果您的目标位于( 10, 20, 30 ) 位置怎么办？

您可以使用向量数学来解决此问题，three 已为您解决此问题。

1. 创建一个Vector3，指定位置就好像目标位于原点。

let offset = new THREE.Vector3( 0, 0, distance )

1. 将此向量添加到目标的position，并将其分配给相机的位置。

camera.position.addVectors( target.position, offset )

1. 相机现在位于目标上方。

旋转

在任何一种情况下，简单地重新定位您的相机可能不足以让您的目标保持在视野范围内。移动相机后，您需要强制它看向目标。

camera.lookAt( target.position )

现在，lookAt 是一个相当简单的函数，可能不会产生您期望的相机胶卷。您将需要通过调整其up、quaternion 或其他因素来确定如何最好地弥补这一点。 （对此进行补偿超出了本问题的范围。）

全球与本地

另一个细微差别是您是否希望相机在全局意义上或局部意义上“高于”部件。

如果您的相机和目标存在于全局空间中（直接在您的 scene 中），那么上述说明将适合您的用例。

但是，如果您的目标在全局空间内侧向旋转（即其+z 轴指向全局+x 轴），但您希望相机的新方向在某种意义上“高于”目标如果它正在向下看目标的-z 轴，那么您还需要补偿目标的旋转。幸运的是，three 还提供了可以完成此任务的数学函数。

camera.position.copy( offset )
camera.position.applyMatrix4( target.matrixWorld )

第一行将相机的位置设置为“目标在原点”的位置。第二行使用目标的世界变换矩阵更新该向量，有效地将其转换到目标的空间中。

动画

从字里行间看，听起来您可能想要为这个过程设置动画。有多种动画库可用，您需要找到一个适合您的需求和目的的。也就是说，Stack Overflow 上也有很多关于动画的问题，如果你遇到任何阻力，我相信你可以找到人来回答你关于该主题的问题。