Fixing iOS Safari Javascript 'deviceorientation' event irregularity?

Question

I\'ve been using \'deviceorientation\' for my project and when testing on iPhone/iPad, it behaves normally in landscape mode, but has an irregularity in portrait mode.

Answer 1

this is a 'gimbal lock' problem of Euler angles. It happens when two of the rotation rings get too close in angle(this case, gamma and alpha), the gyroscope returns value in Euler angles, in some situation though the 3d azimuth data stays relatively correct, one single gamma could get far away, and it would come back at another axis, so you find gamma and alpha changing just at same time but their sum stays still.

one way to solve it is to make a vector and set the rotation order just same as the gyroscope, track the vector and get rid of the dimensions you don't need, thus you get the correct gamma.

the idea is don't just focus on gamma itself, the 3d data is after all not wrong, the presenting form causes the problem, you can hardly skip or change the return form of DeviceOrienationEvent, the only way left is to recalculate the correct value in respect of the other two dimensions.

forgive my poor English, hope can help you.