three.js相机绕Y轴旋转似乎有问题

Question

我们正在使用three.js开发一个VR / 3D立体网页应用程序，我们希望显示相机的视角。

例如： 我们有一个“房间”设置。相机位于中心，相机旋转与轨道控件绑定。

# 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轴）向上或向下的高度。（想象相机侧面的时钟。）
• Pitch是绕Z轴旋转，当从原始Z向量向下查看时。（想象相机背面的时钟。）

然而，Theta似乎始终偏离一个因素。 Phi和Pitch似乎没问题。 我们通过执行以下操作将弧度转换为度数：pitch *（180 / Math.PI）

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

通过逐个轴检查旋转并大多保持其他两个轴面向原始方向来进行这些测量。

我们错过了什么？

- Jan Klopper

Answer 1

所以，我们深入研究了这个问题。我们建造了一个数控旋转台，在手机上测量角度，并将其与我们提供给电脑控制的旋转台的输入进行比较。

结论：Chrome很差劲。它无法产生即使是接近有用的数据。也不会产生任何近似可重复的东西。

同样使用的手机上，Firefox在某些点上有一些翻转轴的问题（可能与万向锁相关或由于旋转超过360度而导致），但成功地非常接近我们的输入（偏差小于1%），而且非常可靠和可重复。

- Jan Klopper

Answer 2

您可以调用 camera.getWorldRotation() 来获取euler角度。

- Lodewijk Bogaards