WebGL/OpenGL:根据设备方向旋转相机 [英] WebGL/OpenGL: Rotate camera according to device orientation
问题描述
我有一个Web应用程序，试图在3D空间中显示一幅地图图像图块.
I have a web application I am trying to show a plane of map image tiles in a 3D space.
I want the plane to be always horizontal however the device rotate, the final effect is similar to this marine compass demo.
我现在可以通过针对移动设备的W3C设备方向API捕获设备方向，并且成功渲染了地图图像图块.
I can now capture device orientation through the W3C device orientation API for mobile devices, and I successfully rendered the map image tiles.
我的问题是我缺乏必要的数学知识，无法根据设备方向正确旋转相机.
My problem is me lacking of essential math knowledge of how to rotate the camera correctly according to the device orientation.
我正在使用Three.js库.我试图直接通过alpha/beta/gamma(转换为弧度)设置相机对象的旋转.但这是行不通的，因为相机似乎总是按照openGL/webGL使用的世界轴旋转，而不是按照其本地轴旋转.
I am using the Three.js library. I tried to set rotation of the camera object directly by the alpha/beta/gamma (converted to radian). But it's not working since the camera seems to always rotate according to the world axis used by openGL/webGL not according to its local axis.
我想到了在摄像头前面旋转一个点100单位，并相对于摄像头位置旋转点的想法，该角度由设备方向API提供.但是我也不知道该怎么实现.
I came across the idea of rotate a point 100 unit in front the camera and rotate the point relatively to the camera position by angles supplied by the device orientation API. But I don't know how to implement this either.
有人可以帮助我实现我想要的目标吗?
Can anyone help me with what I want to achieve?
错误纠正:
对于任何对实现类似事情感兴趣的人，我发现Three.js对象默认情况下使用局部空间轴，而不是世界空间轴，这是错误的.尽管官方文档指出，通过设置"object.matrixAutoUpdate = false"然后修改"object.matrixWorld"并调用"object.updateWorldMatrix()"，您可以在世界轴上手动移动/旋转/缩放对象.但是，当对象具有父对象时，它将不起作用；当对象具有父对象时，将始终使用局部轴矩阵.
For anyone interested in implementing similar things, I found out that Three.js objects uses local space axis by default, not world space axis, I was wrong. Though the official document stated that by setting "object.matrixAutoUpdate = false" and then modify "object.matrixWorld" and call "object.updateWorldMatrix()" you can manually move/rotate/scale the object in world axis. However it does not work when the object has a parent, the local axis matrix will always be used when the object has a parent.
推荐答案
根据W3C设备方向事件规范，角度alpha，beta和gamma形成一组固有的Tait-Bryan角度类型Z-X'-Y''.
According to the W3C Device Orientation Event Specification, the angles alpha, beta and gamma form a set of intrinsic Tait-Bryan angles of type Z-X'-Y''.
Three.js相机也根据固有角度旋转.但是，应用旋转的默认顺序为:
The Three.js camera also rotates according to intrinsic angles. However the default order in which the rotations are applied is:
camera.rotation.order = 'XYZ'.
那么，您需要做的是设置:
What you need to do, then, is to set:
camera.rotation.order = 'ZXY'; // or whatever order is appropriate for your device
然后您像这样设置摄像机的旋转角度:
You then set the camera rotation like so:
camera.rotation.x = beta * Math.PI / 180;
camera.rotation.y = gamma * Math.PI / 180;
camera.rotation.z = alpha * Math.PI / 180;
免责声明:我没有您的设备类型.根据我对three.js的了解，这是有根据的猜测.
Disclaimer: I do not have your device type. This is an educated guess based on my knowledge of three.js.
已针对three.js r.65更新
Updated for three.js r.65
这篇关于WebGL/OpenGL:根据设备方向旋转相机的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
