Estoy desarrollando un juego WebGL en el que el usuario usaría la orientación del dispositivo para controlar la cámara, es decir, mirar alrededor. De las tres rotaciones del evento de orientación del dispositivo, las convertí en cuaterniones.

El problema comienza aquí: necesito que el usuario sostenga el dispositivo horizontalmente. En esta posición, el ángulo beta se utilizará para girar alrededor del eje vertical y desde la perspectiva del usuario.

Sin embargo, el ángulo beta solo va de -180 a 180, cualquier número fuera hará que los otros ejes cambien para obtener una rotación válida. Debido a cómo se maneja mi cámara WebGL (estoy usando Unity Engine), necesito separar los ejes para reasignarlos a la coordenada de la cámara en consecuencia, y compensar los ángulos de la pose horizontal (agregando 90 grados al eje Y para ejemplo, porque el dispositivo se revierte). Tengo que volver a convertir el cuaternión a 3 ángulos de Euler y controlar cada eje de la cámara a través de ellos.

¿Hay una manera de resolver esto?

Esto es lo que uso para obtener la orientación del dispositivo desde la web:

 var degtorad = Math.PI / 180; // Degree-to-Radian conversion function getQuaternion(alpha, beta, gamma) { var _x = beta ? beta * degtorad : 0; // beta value var _y = gamma ? gamma * degtorad : 0; // gamma value var _z = alpha ? alpha * degtorad : 0; // alpha value var cX = Math.cos(_x / 2); var cY = Math.cos(_y / 2); var cZ = Math.cos(_z / 2); var sX = Math.sin(_x / 2); var sY = Math.sin(_y / 2); var sZ = Math.sin(_z / 2); // // ZXY quaternion construction. // var w = cX * cY * cZ - sX * sY * sZ; var x = sX * cY * cZ - cX * sY * sZ; var y = cX * sY * cZ + sX * cY * sZ; var z = cX * cY * sZ + sX * sY * cZ; return [w, x, y, z]; } function GyroEvent(e) { var quat = getQuaternion(e.alpha, e.beta, e.gamma + 90); // w unityInstance.SendMessage("Main Camera", "GetGyroW", quat[0]); // x unityInstance.SendMessage("Main Camera", "GetGyroX", quat[1]); // y unityInstance.SendMessage("Main Camera", "GetGyroY", quat[2]); // z unityInstance.SendMessage("Main Camera", "GetGyroZ", quat[3]); } window.addEventListener("deviceorientation", GyroEvent);