Javascript Three.js:获取相机正在看的方向

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/14813902/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-24 18:00:52  来源:igfitidea点击:

Three.js: Get the Direction in which the Camera is Looking

javascripthtmlvectorthree.js

提问by AlexMorley-Finch

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

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

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

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

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.

使用此欧拉顺序,camera.rotation 中的 z 属性未使用(始终为 0)。x 用于以弧度指定间距或纬度,y 用于描述经度。

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.

我有许多目标以球形方式围绕用户移动,相机始终位于该球体的中心。假设球体的半径为 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;

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

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

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

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

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

我查看了 Vector3.applyProjection 和 applyEuler 方法,并进行了尝试,但仍然无法获得任何好的结果。

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.

我相信在进行任何预测之前,必须首先将欧拉顺序改回“XYZ”?我试过了,但我不知道该怎么做,文档很难理解。

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.

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

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

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

回答by WestLangley

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

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

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 );


EDIT: 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 );

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

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

Updated to three.js r.107

更新到three.js r.107

回答by fluffybunny

I spent a long time trying to figure out captain obvious's question.

我花了很长时间试图弄清楚船长明显的问题。

This is how it finally worked for me:

这就是它最终对我有用的方式:

    vector = camera.getWorldDirection();
    theta = Math.atan2(vector.x,vector.z);

theta is in radians. This is how I orient my game's character to face the same way the camera is facing. The getWorldDirection() is a fairly new option on camera.

theta 是弧度。这就是我如何将我的游戏角色定位为与相机面对的方式相同。getWorldDirection() 是相机上的一个相当新的选项。

回答by pwhitt

I can't comment but fluffybunny's answer works perfectly. getWorldDirection()and then changing that vector to radians is the way to go.

我无法发表评论,但 fluffybunny 的回答完美无缺。getWorldDirection()然后将该向量更改为弧度是可行的方法。

回答by JohnyWind

fluffybunny nailed it. With a small change to his awesome idea, you can get the rotation in degrees:

蓬松的兔子钉了它。对他的绝妙想法稍作改动,您就可以获得度数的旋转:

var vector = camera.getWorldDirection();
angle = THREE.Math.radToDeg( Math.atan2(vector.x,vector.z) );