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

标签 javascript html vector three.js

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

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

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

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

我的目标是计算相机正在寻找的位置与目标所在位置之间的 Angular 。

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

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

问题是我想不出一种方法来获取相机所看位置的矢量。

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

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

假设相机直接向右看,那么我需要获得一个在当前旋转方向上距中心 RADIUS 距离的矢量。

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

最佳答案

相机向下看其内部负 z 轴。因此,创建一个指向负 z 轴的矢量:

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

现在,对应用于相机的矢量应用相同的旋转:

vector.applyQuaternion( camera.quaternion );

您可以像这样获得目标的弧度 Angular :

angle = vector.angleTo( target.position );

编辑:你现在可以得到相机看起来像这样的方向:

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

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

更新到 three.js r.107

关于javascript - Three.js: 获取相机正在看的方向,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14813902/

相关文章:

javascript - 客户互动矢量图

javascript - jQuery - 多选问卷之间的后退和下一个

jquery - 隐藏的 HTML 元素不会消失

javascript - 从服务器获取一张图片,存入localStorage,并显示出来

javascript - 打开/关闭包含 div 和图像

javascript - 从 ionic 警报中获取值(value)

javascript - 结合滚动提要推特风格

c++ - EASTL vector <vector <int >>是否连续

C++ enable_if 模板类方法,如果它是 std::vector<std::vector<Type>>

c++ - 为什么在初始化和调整对象 vector 大小时调用析构函数?