2

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

我希望飞机始终保持水平，但设备旋转，最终效果类似于这个航海指南针演示。

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

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

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

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

任何人都可以帮助我实现我想要实现的目标吗？

编辑：

错误更正：

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

4

1 回答 1

4

根据 W3C 设备定向事件规范，角 alpha和 beta 形成 gamma 一组 ZX'-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

于 2012-08-05T16:12:43.280 回答