Question

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

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

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

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

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

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

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

编辑：

MISTAKE CORRECTION：

对于任何有兴趣实现类似事物的人，我发现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

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

1 个答案: