HTML截取陀螺儀轉存至THREE.js

來源：http://w3c.github.io/deviceorientation/spec-source-orientation.html
其實似乎直接用四元素的公式就可以使用了，但因為實作上需要對應實際地標方向，需要做一些旋轉，在測試期間換成矩陣去儲存，後來就沒有改回四元素。

var alpha = 0;
var beta = 0;
var gamma = 0;
var gyroscopeQuaternion = new THREE.Quaternion();
gyroscopeQuaternion.setFromEuler(new THREE.Euler(0,0,0));

if (window.DeviceMotionEvent==undefined) {
}
else {
window.ondeviceorientation = function(event) {
alpha = event.alpha;
beta = event.beta;
gamma = event.gamma;
}

setInterval(function() {

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 );
var cY = Math.cos( _y );
var cZ = Math.cos( _z );
var sX = Math.sin( _x );
var sY = Math.sin( _y );
var sZ = Math.sin( _z );

//
// ZXY rotation matrix construction.
//

var m11 = cZ * cY - sZ * sX * sY;
var m12 = - cX * sZ;
var m13 = cY * sZ * sX + cZ * sY;

var m21 = cY * sZ + cZ * sX * sY;
var m22 = cZ * cX;
var m23 = sZ * sY - cZ * cY * sX;

var m31 = - cX * sY;
var m32 = sX;
var m33 = cX * cY;

var rotationMatrix = new THREE.Matrix4(
m11,    m12,    m13,    0,
m21,    m22,    m23,    0,
m31,    m32,    m33,    0,
 0,      0,      0,    1
);

gyroscopeQuaternion = new THREE.Quaternion();
gyroscopeQuaternion.setFromRotationMatrix(rotationMatrix);

}, 100);
}