我有一个 Web 应用程序，我试图在 3D 空间中显示 map 图像图 block 的平面。
我希望平面始终保持水平，但设备旋转，最终效果类似于 this marine compass demo .
我现在可以通过用于移动设备的 W3C 设备方向 API 捕获设备方向，并且我成功地渲染了 map 图像图 block 。
我的问题是我缺乏如何根据设备方向正确旋转相机的基本数学知识。
我正在使用 Three.js 库。我尝试直接通过 alpha/beta/gamma(转换为弧度)设置相机对象的旋转。但它不起作用，因为相机似乎总是根据 openGL/webGL 使用的世界轴而不是根据其本地轴旋转。
我遇到了在相机前面旋转一个点 100 单位并通过设备方向 API 提供的角度相对于相机位置旋转该点的想法。但我也不知道如何实现这一点。
任何人都可以帮助我实现我想要实现的目标吗？
编辑:
错误更正:
对于任何有兴趣实现类似事情的人，我发现 Three.js 对象默认使用本地空间轴，而不是世界空间轴，我错了。虽然官方文档声明通过设置“object.matrixAutoUpdate = false”然后修改“object.matrixWorld”并调用“object.updateWorldMatrix()”，您可以手动移动/旋转/缩放世界轴上的对象。但是当对象有父对象时它不起作用，当对象有父对象时将始终使用局部轴矩阵。
最佳答案
根据 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
关于opengl-es - WebGL/OpenGL : Rotate camera according to device orientation，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11814488/