html5 – 以相对坐标获取设备方向旋转

绝对坐标系(X,Y,Z)是X是东,Y是北,Z是向上的.设备相对坐标系(x,y,z)使得x是正确的,y是顶部而z是向上的.然后,方向角(α,β,γ)是描述三个简单旋转连续的角度,这三个简单旋转将(X,Z)变为(x,z),如下所示：

>绕Z旋转α度,将(X,Z)转换为(X’,Y’,Z’),Z’= Z
>以β度旋转X’,将(X’,Z’)转换为(X”,Y”,Z”),X”= X’
>用γ度旋转Y”,将(X”,Z”)变换为(x,y = Y”

(它们被称为Z-X’-Y’型的内在Tait-Bryan角)

现在我们可以通过组合简单的旋转矩阵来获得相应的旋转矩阵,每个旋转矩阵对应于三个旋转中的一个.

[   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  ]

其中A,C是α,γ和s的缩写,c是sin,cos.

现在,我们感兴趣的是两个位置(x,z)和(x’,y’,z’)之间的右 – 左(y轴)和自上而下(x轴)旋转增量的角度到方向(A,C)和(A’,B’,C’)

(x’,z’)的坐标(x’,z’)由R(A’,C’)给出* R(A,C)^ – 1 = R(A’,C’)* R(A,C)^ T,因为逆是正交(旋转)矩阵的转置.最后,如果z’= p * xq * yr * z,那些旋转的角度是围绕左右轴的p和围绕自上而下的q的角度(对于小角度,这是假的,这假设频繁的方向更新,否则asin(p)和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,col 2
  out[4] = cZ * cX,col 2
  out[5] = sZ * sY + cZ * cY * sX,col 2

  out[6] = cX * sY,col 3
  out[7] = - sX,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,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,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;

通过

const getScreenorientation = () => {
  switch (window.screen.orientation || window.screen.mozOrientation) {
    case 'landscape-primary':
      return 90;
    case 'landscape-secondary':
      return -90;
    case 'portrait-secondary':
      return 180;
    case 'portrait-primary':
      return 0;
  }
  if (window.orientation !== undefined)
    return window.orientation;
};

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;
}

请注意,累积的左右和上下角度将取决于用户选择的路径,并且无法直接从设备方向推断,但必须通过移动进行跟踪.您可以通过不同的动作到达相同的位置：

>方法1：

>保持手机水平并顺时针旋转90度. (这既不是左右也不是上下旋转)
>将手机置于横向模式,然后向您旋转90度. (这不是90度左右旋转)
>让手机朝向你,然后旋转90度,这样就可以了. (这不是90度左右旋转)

>方法2：

>将手机旋转90度,使其面向您并垂直(这是一个90度的上下旋转)