WebGL/OpenGL:根据设备方向旋转摄像头

Question

我有一个web应用程序，我试图在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’型的固有泰特-布赖恩角。

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更新