JSFiddle - React, Tailwind, and code Playground

by Valentin Sarychev

HTML

<div id="view3d">
  Привет!
</div>

CSS

#view3d {
/*   width: 100px;
  height: 100px;
  left: 20px;
  top: 20px;
  position: absolute;
  background: #f99; */
}

JavaScript

var elem = document.getElementById("view3d");

var degtorad = Math.PI / 180; // Degree-to-Radian conversion

function getRotationMatrix(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);
  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;

  return [
    m11, m12, m13,
    m21, m22, m23,
    m31, m32, m33
  ];

};

const p = [0, 20, 0];

window.addEventListener("deviceorientation", function(e) {
  const [a, b, g] = [e.alpha, e.beta, e.gamma];
  const m = getRotationMatrix(a, b, g);
  const [x, y, z] = [
    m[0] * p[0] + m[1] * p[1] + m[2] * p[2],
    m[3] * p[0] + m[4] * p[1] + m[5] * p[2],
    m[6] * p[0] + m[7] * p[1] + m[8] * p[2],
  ]
  elem.innerHTML = [x, y, z].join(', ');// + ' | ' + [a, b, g].join(', ')
});