I'm trying to convert physical orientation of a mobile device got from deviceorientation
event to a series of camera rotations in my sort of 3D viewer. The problem is that I need to do spatial rotation relative to the first orientation taken from deviceorientation
i.e. the orientation on page load. So I need to save the first orientation and then somehow do spatial rotation corresponding to orientation change from the saved one to the current.
How do I do that?
Note that I use glMatrix's quaternions to do spatial rotation but I'm not quite familiar with this topic.
Currently my rotation function looks like this:
function rotate(aX, aY, aZ) {
var rotation = quat.create();
quat.rotateX(rotation, rotation, aX);
quat.rotateY(rotation, rotation, aY);
quat.rotateZ(rotation, rotation, aZ);
quat.normalize(rotation, rotation);
...
}
And my deviceorientation
listener looks like this (sure it's not finished yet):
var aInitial = null;
window.addEventListener('deviceorientation', function (event) {
var alpha = e.alpha, beta = e.beta, gamma = e.gamma;
if (!aInitial) aInitial = [alpha, beta, gamma];
// somehow get angles aX, aY, aZ from alpha, beta, gamma and aInitial
rotate(aX, aY, aZ);
});
I guess that it's quite hard to find explicit formula to get needed angles (aX, aY, aZ
). I guess that I need to do quaternion transformations instead but I don't know how exactly.