我有一个 Web 应用程序，我试图在 3D 空间中显示地图图像图块的平面。
我希望无论设备如何旋转，平面始终保持水平，最终效果类似于这个航海罗盘演示 http://people.opera.com/richt/release/demos/orientation/marinecompass/.
现在，我可以通过移动设备的 W3C 设备方向 API 捕获设备方向，并且成功渲染了地图图像图块。
我的问题是我缺乏如何根据设备方向正确旋转相机的基本数学知识。
我正在使用 Three.js 库。我尝试直接通过 alpha/beta/gamma（转换为弧度）设置相机对象的旋转。但它不起作用，因为相机似乎总是根据 openGL/webGL 使用的世界轴而不是根据其本地轴旋转。
我想到了在相机前面旋转一个点 100 个单位，并按照设备方向 API 提供的角度相对于相机位置旋转该点。但我也不知道如何实现这一点。
谁能帮助我实现我想要实现的目标？
EDIT:
错误更正：
对于任何有兴趣实现类似事情的人，我发现 Three.js 对象默认使用本地空间轴，而不是世界空间轴，我错了。虽然官方文档指出，通过设置“object.matrixAutoUpdate = false”，然后修改“object.matrixWorld”并调用“object.updateWorldMatrix()”，您可以在世界轴上手动移动/旋转/缩放对象。然而，当对象有父对象时它不起作用，当对象有父对象时将始终使用局部轴矩阵。
根据 W3C 设备方向事件规范，角度alpha, beta and 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
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
