WebGL/OpenGL：根据设备方向旋转相机

Question

我有一个网络应用程序，我试图在 3D 空间中显示地图图像平铺平面。

我希望平面始终保持水平，但设备旋转，最终效果类似于this marine compass demo。

我现在可以通过用于移动设备的 W3C 设备方向 API 捕获设备方向，并且我成功地渲染了地图图像图块。

我的问题是我缺乏如何根据设备方向正确旋转相机的基本数学知识。

我正在使用 Three.js 库。我试图直接通过 alpha/beta/gamma（转换为弧度）设置相机对象的旋转。但它不起作用，因为相机似乎总是根据 openGL/webGL 使用的世界轴而不是根据其本地轴旋转。

我想到了将相机前面的点旋转 100 个单位，并通过设备方向 API 提供的角度相对于相机位置旋转该点。但我也不知道如何实现。

谁能帮我实现我想要实现的目标？

编辑：

错误更正：

对于任何有兴趣实现类似事情的人，我发现 Three.js 对象默认使用本地空间轴，而不是世界空间轴，我错了。虽然官方文档声明通过设置“object.matrixAutoUpdate = false”然后修改“object.matrixWorld”并调用“object.updateWorldMatrix()”，您可以手动移动/旋转/缩放世界轴上的对象。但是当对象有父对象时它不起作用，当对象有父对象时将始终使用局部轴矩阵。

Answer 1

根据 W3C 设备方向事件规范，角度 alpha、beta 和 gamma 形成一组 Z-X'-Y'' 类型的固有 Tait-Bryan 角度。

Three.js 相机也会根据固有角度旋转。然而，应用旋转的默认顺序是：

camera.rotation.order = 'XYZ'.

那么，你需要做的是设置：

camera.rotation.order = 'ZXY'; // or whatever order is appropriate for your device

然后您可以像这样设置相机旋转：

camera.rotation.x = beta * Math.PI / 180;
camera.rotation.y = gamma * Math.PI / 180;
camera.rotation.z = alpha * Math.PI / 180;

免责声明：我没有您的设备类型。这是基于我对 three.js 的了解的有根据的猜测。

编辑：更新为 three.js r.65