three.js 围绕 Y 轴的相机旋转似乎关闭答案

【问题标题】：three.js rotation of camera around Y Axis seems offthree.js 围绕 Y 轴的相机旋转似乎关闭
【发布时间】：2017-10-01 11:49:03
【问题描述】：

我们正在使用 three.js 制作一个 VR / 立体 Web 应用程序，我们希望在其中显示相机的观察角度。

示例：我们有一个“房间”设置。摄像头位于中心，此时摄像头的旋转与轨道控制相关联。

# create a camera and place it in the scene
camera = new THREE.PerspectiveCamera(90, 1, 0.1, 2000);
camera.position.set(0, 35, 60);
# Attach Orbital controls
controls = new THREE.OrbitControls(camera, element);
controls.target.set(camera.position.x + 0.1, camera.position.y, camera.position.z);
controls.enableZoom = true;
controls.enablePan = true;
# Attach DeviceOrientationControls
controls = new THREE.DeviceOrientationControls(camera, true);
controls.connect();
controls.update();

现在在每个 animationFrame 调用期间，我们检查相机的矢量：

vector = camera.getWorldDirection();
theta = Math.atan2(vector.x, vector.z);
phi = Math.sqrt((vector.x * vector.x) + (vector.z * vector.z));
pitch = Math.atan2(phi, vector.y);

期望以下弧度：

theta 是远离原始视图方向 (Z) 的旋转，就像您从 (Y) 轴向下看一样。（想想相机下方地面上的时钟）
Phi 是从原始视图方向 (z) 向上或向下的高度。（想想相机侧面的时钟。）
当俯视原始 Z 向量时，俯仰将是围绕 Z 轴的旋转。（想想相机背面的时钟。）

但是，Theta 似乎始终偏离了一个因素。 Phi 和 Pitch 似乎还可以。我们将弧度转换为度数，例如：pitch * (180/Math.PI)

世界和相机本身似乎可以很好地更新和旋转，向左或向右旋转手机/VR眼镜似乎会产生自然的“环顾房间”运动。

通过一次检查一个轴上的旋转来完成这些测量，并且大部分保持其他两个朝向原始方向。

我们缺少什么？

【问题讨论】：

标签： javascript math three.js rotation

【解决方案1】：

您可以致电camera.getWorldRotation() 获取euler 角度。

【讨论】：

【解决方案2】：

因此，我们设法深入研究了这一点。我们搭建了一个 cnc 旋转台，并在手机上测量角度，并与我们提供给计算机控制的旋转台的输入进行比较。

结论：Chrome 是垃圾。它不能也不会产生甚至几乎有用的数据。它也不会产生任何远近可重复的东西。

同一部手机上的 Firefox 在某些点翻转轴存在一些问题（可能与万向节锁定相关或由于旋转溢出超过 360 度），但设法非常接近我们的输入（低于 1%）并且是超级可靠且可重复。

【讨论】：