好的。首先简单解释一下设备方向输入：
绝对坐标系，(X, Y, Z)是这样的X是东方，Y是北和Z起来了。设备相对坐标系，(x, y, z)是这样的x是对的，y是顶部并且z起来了。然后是方向角，(alpha, beta, gamma)是描述连续变化的三个简单旋转的角度(X, Y, Z) to (x, y, z) as so:
- 旋转
Z by alpha度，这会改变(X, Y, Z) to (X', Y', Z') with Z' = Z
- 旋转
X' by beta度，这会改变(X', Y', Z') to (X'', Y'', Z'') with X'' = X'
- 旋转
Y'' by gamma度，这会改变(X'', Y'', Z'') to (x, y, z) with y = Y''
（它们被称为类型的固有泰特-布赖恩角Z-X'-Y'')
现在我们可以通过组成简单的旋转矩阵来得到相应的旋转矩阵，每个旋转矩阵对应于三个旋转之一。
[ cC 0 sC ] [ 1 0 0 ] [ cA -sA 0 ]
R(A, B, C) = Ry(C)*Rx(B)*Rz(A) = | 0 1 0 |*| 0 cB -sB |*[ sA cA 0 ]
[ -sC 0 cC ] [ 0 sB cB ] [ 0 0 1 ]
where A, B, C是缩写alpha, beta, gamma and s, c for sin, cos.
现在，我们感兴趣的是左右的角度（y轴）和自上而下（xaxis) 两个位置之间的旋转增量(x, y, z) and (x', y', z')对应于方向(A, B, C) and (A', B', C')
的坐标(x', y', z')在...方面(x, y, z)由以下给出R(A', B', C') * R(A, B, C)^-1 = R(A', B', C') * R(A, B, C)^T因为逆矩阵是正交（旋转）矩阵的转置。最后，如果z' = p*x + q*y + r*z，这些旋转的角度是p绕左右轴并且q围绕自上而下的角度（这对于小角度来说是正确的，假设频繁的方向更新，否则asin(p) and asin(r)更接近事实）
下面是一些获取旋转矩阵的 JavaScript：
/*
* gl-matrix is a nice library that handles rotation stuff efficiently
* The 3x3 matrix is a 9 element array
* such that indexes 0-2 correspond to the first column, 3-5 to the second column and 6-8 to the third
*/
import {mat3} from 'gl-matrix';
let _x, _y, _z;
let cX, cY, cZ, sX, sY, sZ;
/*
* return the rotation matrix corresponding to the orientation angles
*/
const fromOrientation = function(out, alpha, beta, gamma) {
_z = alpha;
_x = beta;
_y = gamma;
cX = Math.cos( _x );
cY = Math.cos( _y );
cZ = Math.cos( _z );
sX = Math.sin( _x );
sY = Math.sin( _y );
sZ = Math.sin( _z );
out[0] = cZ * cY + sZ * sX * sY, // row 1, col 1
out[1] = cX * sZ, // row 2, col 1
out[2] = - cZ * sY + sZ * sX * cY , // row 3, col 1
out[3] = - cY * sZ + cZ * sX * sY, // row 1, col 2
out[4] = cZ * cX, // row 2, col 2
out[5] = sZ * sY + cZ * cY * sX, // row 3, col 2
out[6] = cX * sY, // row 1, col 3
out[7] = - sX, // row 2, col 3
out[8] = cX * cY // row 3, col 3
};
现在我们得到角度增量：
const deg2rad = Math.PI / 180; // Degree-to-Radian conversion
let currentRotMat, previousRotMat, inverseMat, relativeRotationDelta,
totalRightAngularMovement=0, totalTopAngularMovement=0;
window.addEventListener('deviceorientation', ({alpha, beta, gamma}) => {
// init values if necessary
if (!previousRotMat) {
previousRotMat = mat3.create();
currentRotMat = mat3.create();
relativeRotationDelta = mat3.create();
fromOrientation(currentRotMat, alpha * deg2rad, beta * deg2rad, gamma * deg2rad);
}
// save last orientation
mat3.copy(previousRotMat, currentRotMat);
// get rotation in the previous orientation coordinate
fromOrientation(currentRotMat, alpha * deg2rad, beta * deg2rad, gamma * deg2rad);
mat3.transpose(inverseMat, previousRotMat); // for rotation matrix, inverse is transpose
mat3.multiply(relativeRotationDelta, currentRotMat, inverseMat);
// add the angular deltas to the cummulative rotation
totalRightAngularMovement += Math.asin(relativeRotationDelta[6]) / deg2rad;
totalTopAngularMovement += Math.asin(relativeRotationDelta[7]) / deg2rad;
}
最后，为了考虑屏幕方向，我们必须替换
_z = alpha;
_x = beta;
_y = gamma;
by
const screen = window.screen;
const getScreenOrientation = () => {
const oriented = screen && (screen.orientation || screen.mozOrientation);
if (oriented) switch (oriented.type || oriented) {
case 'landscape-primary':
return 90;
case 'landscape-secondary':
return -90;
case 'portrait-secondary':
return 180;
case 'portrait-primary':
return 0;
}
return window.orientation|0; // defaults to zero if orientation is unsupported
};
const screenOrientation = getScreenOrientation();
_z = alpha;
if (screenOrientation === 90) {
_x = - gamma;
_y = beta;
}
else if (screenOrientation === -90) {
_x = gamma;
_y = - beta;
}
else if (screenOrientation === 180) {
_x = - beta;
_y = - gamma;
}
else if (screenOrientation === 0) {
_x = beta;
_y = gamma;
}
请注意，累积的左右角度和上下角度将取决于用户选择的路径，并且不能直接从设备方向推断，而是必须通过移动进行跟踪。您可以通过不同的动作到达相同的位置：
-
方法一：
- 保持手机水平并顺时针旋转 90 度。 （这既不是左右旋转，也不是上下旋转）
- 将手机保持横向模式并向您旋转 90 度。 （这既不是左右90度旋转）
- 将手机面向您并旋转 90 度，使其向上。 （这既不是左右90度旋转）
-
方法2：
- 将手机旋转 90 度，使其面向您且垂直（这是 90 度上下旋转）
