Использование ориентации устройства с 3D-преобразованиями

В этой статье приводятся рекомендации по использованию информации об ориентации устройства совместно с 3D-преобразованиями CSS.

Самый простой способ преобразовать данные ориентации в 3D-преобразование — это использование значений alpha, gamma, и beta в качестве значений rotateZ, rotateX и rotateY.

Однако важно помнить, что система координат ориентации устройства отличается от системы координат CSS. Иными словами, первая является правой, а ось Y направлена вверх, в то время как вторая — левой, а ось Y направлена вниз. Кроме того, повороты углов ориентации устройства всегда должны выполняться в порядке Z - X' - Y'', что не соответствует порядку некоторых преобразований CSS. Вот некоторые практические последствия этих различий:

• Порядок поворотов углов имеет значение, поэтому убедитесь, что повороты по альфа, бета и гамма применяются в этом порядке.

• rotate3d() преобразование CSS и функции DOMMatrixReadOnly.rotate() и DOMMatrix.rotateSelf() применяют повороты углов в порядке Z - Y' - X'', поэтому нельзя применить повороты по альфа, бета и гамма в правильном порядке с помощью одного вызова любой из них. Вместо этого следует поворачивать каждую ось индивидуально в правильном порядке.

• Из-за различий в системах координат, описанных выше, при взгляде на начало отсчета повороты применяются по часовой стрелке в CSS и против часовой стрелки в спецификации ориентации устройства. Это означает, что альфа и бета должны быть инвертированы (повороты вокруг Z и X), поскольку они указывают на разные направления в двух системах координат. Однако гамма (поворот вокруг Y) должна оставаться такой же.

  Вот фрагмент кода, который резюмирует это:

  const elem = document.getElementById("view3d");
  
  window.addEventListener("deviceorientation", (e) => {
    elem.style.transform = `rotateZ(${-e.alpha}deg) rotateX(${-e.beta}deg) rotateY(${
      e.gamma
    }deg)`;
  });
  

Если вам когда-нибудь понадобится преобразовать трехмерные углы поворота в углы ориентации, используемые в deviceorientation, вы можете использовать следующий алгоритм:

// convert a rotate3d axis-angle to deviceorientation angles
function orient(aa) {
  const x = aa.x,
    y = aa.y,
    z = aa.z,
    a = aa.a,
    c = Math.cos(aa.a),
    s = Math.sin(aa.a),
    t = 1 - c,
    // axis-angle to rotation matrix
    rm00 = c + x * x * t,
    rm10 = z * s + y * x * t,
    rm20 = -y * s + z * x * t,
    rm01 = -z * s + x * y * t,
    rm11 = c + y * y * t,
    rm21 = x * s + z * y * t,
    rm02 = y * s + x * z * t,
    rm12 = -x * s + y * z * t,
    rm22 = c + z * z * t,
    TO_DEG = 180 / Math.PI,
    ea = [],
    n = Math.hypot(rm22, rm20);

  // rotation matrix to Euler angles
  ea[1] = Math.atan2(-rm21, n);

  if (n > 0.001) {
    ea[0] = Math.atan2(rm01, rm11);
    ea[2] = Math.atan2(rm20, rm22);
  } else {
    ea[0] = 0;
    ea[2] = (rm21 > 0 ? 1 : -1) * Math.atan2(-rm10, rm00);
  }

  return {
    alpha: -ea[0] * TO_DEG - 180,
    beta: -ea[1] * TO_DEG,
    gamma: ea[2] * TO_DEG,
  };
}

• Использование преобразований CSS
• Обнаружение ориентации устройства