javascript - three.js 相机绕 Y 轴的旋转似乎关闭

Question

我们正在使用 three.js 开发一个 VR/Stereoscopic Web 应用程序，我们希望在其中显示相机的观看 Angular 。

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

# 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 是远离原始 View 方向 (Z) 的旋转，就像您从 (Y) 轴向下看一样。 (想想相机下方地面上的时钟)
• Phi 是从原始 View 方向 (z) 向上或向下的高度。 (想想相机侧面的时钟。)
• 当俯视原始 Z 向量时，俯仰将是围绕 Z 轴的旋转。 (想想相机背面的时钟。)

但是，Theta 似乎始终存在一个因素。 Phi 和 Pitch 看起来还不错。 我们将弧度转换为度数，例如:pitch * (180/Math.PI)

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

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

我们缺少什么？

Answer 1

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

结论:Chrome 是一坨屎。它不能也不会产生几乎有用的数据。它也不会产生任何接近可重复的东西。

同一手机上的 Firefox 在某些点翻转轴存在一些问题(可能与万向节锁定相关或由于旋转超过 360 度而导致的某些问题)但设法非常接近我们的输入(不到 1% 关闭)并且是 super 可靠且可重复。