如何在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 )?
您可以使用向量数学来解决此问题， 3 为您提供了此解决方案.
You can use vector math to fix this, and three has this baked in for you.
- 创建一个
Vector3，其位置分配为，就像目标位于原点一样.
let offset = new THREE.Vector3( 0, 0, distance )
- 将此向量添加到目标的
位置，并将其分配给摄像机的位置.
- Add this vector to the target's
position, and assign it to the camera's position.
camera.position.addVectors( target.position, offset )
- 摄像头现在位于目标上方.
旋转
在任何一种情况下，仅重新定位相机都不足以使目标保持在视野中.移动相机后，您需要强制其对准目标.
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.)
另一个细微差别是您是否希望相机位于上方"位置? global 或 local 的意思.
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 轴的角度来看，那么您还需要补偿目标的旋转.幸运的是， 3 还提供了可以完成此操作的数学函数.
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屋！
