如何将相机直接移动到 3D 空间中的对象上方? [英] How do you move a camera directly above an object in 3D space?

问题描述

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

I am learning ThreeJS and trying to understand some fundamental concepts.

假设我在 3D 空间中有一个相机，看着一些 target(在 camera.target 属性中定义).相机位于x1, y1, z1.

Suppose I have a camera in 3D space, looking at some target (defined in the camera.target property). The camera is located at x1, y1, z1.

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

I want to add a feature that when activated, moves the camera directly above the target, i.e. it should be looking down at the XY plane, as though the camera is in the sky looking STRAIGHT down.

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

My question is, how do I do this in ThreeJS, and also how do you think of this conceptually/mathematically?

推荐答案

虽然您的问题看起来很简单，但这里有一些细微的技巧，您可能会觉得有用.

While your question seems simple, here is a nuanced take with some tips that you might find helpful.

是的，最简单的答案是指定相机的位置，其中 z 值是与目标的距离.

Yes, the simplest answer is to assign the camera's position where the z value is the distance from the target.

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

但这仅适用于目标位于原点的情况.如果你的目标在 ( 10, 20, 30 ) 位置怎么办?

But this only works if the target is positioned at the origin. What if you target is at position ( 10, 20, 30 )?

您可以使用矢量数学来解决这个问题，three 已经为您准备好了.

You can use vector math to fix this, and three has this baked in for you.

1. 创建一个 Vector3，其位置分配就好像目标在原点一样.

1. Create a Vector3 with the position assigned as if the target was at the origin.

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

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

1. Add this vector to the target's position, and assign it to the camera's position.

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

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

旋转

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

Rotation

In either case, simply repositioning you camera may not be enough to keep your target in view. After moving your camera, you will need to force it to look at the target.

camera.lookAt( target.position )

现在，lookAt 是一个相当简单的函数，可能不会产生您期望的相机胶卷.您需要通过调整其up、quaternion 或其他因素来找出最好的补偿方法.(对此进行补偿超出了本问题的范围.)

Now, lookAt is a fairly simple function, and may not result in the camera roll that you expect. You will need to figure out how best to compensate for this, by adjusting its up, quaternion, or other factors. (Compensating for this is outside the scope of this question.)

另一个细微差别是您是否希望相机位于上方"位置.全局意义上的部分，或局部意义上的部分.

Another nuance is whether you want the camera to be "above" the part in a global sense, or in a local sense.

如果您的相机和目标存在于全局空间中(直接在您的场景中)，那么上述说明将适合您的用例.

If your camera and target exist in a global space (directly in your scene), then the directions above will suit your use-case.

但是如果您的目标在全局空间中侧向旋转(即它的 +z 轴指向全局 +x 轴)，但您想要相机的高于"的新方向目标是俯视目标的 -z 轴，那么您还需要补偿目标的旋转.幸运的是，three 还提供了可以完成此操作的数学函数.

But if your target is rotated on its side within the global space (i.e. its +z axis points along the global +x axis), yet you want the camera's new orientation to be "above" the target in the sense that it is looking down the target's -z axis, then you will need to compensate for the target's rotation as well. Luckily, three also provides math functions that can accomplish this.

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

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

This first line sets the camera's position to that of the "target at the origin" position. The second line updates that vector using the target's world transformation matrix, effectively translating it into the target's space.

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

Reading between the lines, it sounds like you might want to animate this process. There are a variety of animation libraries available, and you'll need to find one that suits your needs and purpose. That said, there are also many questions about animation on Stack Overflow, and I'm sure you can find someone to answer your questions on that topic, should you hit any resistance.

这篇关于如何将相机直接移动到 3D 空间中的对象上方?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！