Three.js:获取相机正在看的方向 [英] Three.js: Get the Direction in which the Camera is Looking

问题描述

我正在使用 html5 和 THREE.js 创建游戏，并且我有一个以YXZ"的欧拉顺序旋转的相机.

I'm creating game in using html5 and THREE.js, and I have a camera that rotates with the euler order of 'YXZ'.

这就是相机像头部一样上下左右旋转.如同第一人称视角.

This is so the camera rotation up, down, left and right like a head. As in first person view.

在这个欧拉顺序中，camera.rotation 中的 z 属性没有被使用(总是 0).x 用于指定以弧度为单位的俯仰或纬度，y 用于描述经度.

With this euler order, the z property in camera.rotation is not used (always 0). x is used to specify pitch or latitude in radians, and y is used depict the longitude.

我有许多目标以球形方式围绕用户移动，相机始终位于该球体的中心.假设球体的半径为 1000.

I have a number of targets moving around the user in a spherical manner, with the camera constantly at the center of this sphere. Lets say the sphere has a radius of 1000.

我的目标是计算相机正在寻找的位置与目标所在位置之间的角度.

My aim is calculate the angle between where the camera is LOOKING, and where the target is.

我写了这段代码来计算两个向量之间的角度:

I wrote this code that calculates the angle between 2 vectors:

var A = new THREE.Vector3(1,0,0);
var B = new THREE.Vector3(0,1,0);

var theta = Math.acos( A.dot(B) / A.length() / B.length() );

// theta = PI/2;

我有目标的向量(targets[0].position).

I have the vector of the target (targets[0].position).

问题是我无法找到一种方法来获取相机正在寻找的位置的向量.

The thing is I cannot figure out a way to get the vector of where the camera is looking.

我查看了 Vector3.applyProjection 和 applyEuler 方法，并尝试了一下，但仍然没有得到任何好的结果.

I've looked at Vector3.applyProjection and applyEuler methods, and played around but still cannot get any good results.

我认为在进行任何预测之前必须首先将欧拉顺序改回XYZ"?我试过了，但不知道该怎么做，文档很难理解.

I believe that the euler order must first be changed back to 'XYZ' before any projections are made? I've tried, and I'm not sure how to do this, the documentation is pretty hard to understand.

假设相机直视正确，那么我需要得到一个向量，该向量在当前旋转方向上距中心 RADIUS 距离.

Say if the camera is looking directly right, then I need to get a vector that is RADIUS distance away from the center in the direction of the current rotation.

所以我最终会得到 2 个向量，我可以对其进行计算！

So I will end up with 2 vectors, which I can do calculations on!

推荐答案

相机正向下看其内部负 z 轴.所以创建一个指向负 z 轴的向量:

The camera is looking down its internal negative z-axis. So create a vector pointing down the negative z-axis:

var vector = new THREE.Vector3( 0, 0, - 1 );

现在，对应用于相机的向量应用相同的旋转:

Now, apply the same rotation to the vector that is applied to the camera:

vector.applyQuaternion( camera.quaternion );

您可以像这样获得以弧度为单位的目标角度:

You can get the angle in radians to the target like so:

angle = vector.angleTo( target.position );

<小时>

您现在可以获得相机的方向，如下所示:

---

You can now get the direction in which the camera is looking like so:

var vector = new THREE.Vector3(); // create once and reuse it!
...
camera.getWorldDirection( vector );

注意:通过传入存储结果的vector，该方法不必在每次调用该方法时实例化一个新的THREE.Vector3.

Note: By passing in the vector in which to store the result, the method will not have to instantiate a new THREE.Vector3 every time the method is called.

更新到three.js r.107

Updated to three.js r.107

这篇关于Three.js:获取相机正在看的方向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！