Imagine a project that aims to create a cube with sides representing different geolocations. The cube's sides for east, west, up, ground, north, and south are meant to always point in their respective directions. To gather the necessary data, the project relies on the deviceorientation API:
However, many users, including myself, are puzzled as to why this app is not functioning as expected. It should work on Firefox OS or any Android device running Firefox. Not only does the code seem convoluted and poorly styled, but the actual logic behind it is unclear.
Upon researching similar implementations on MDN, I found instructions on how to achieve a comparable effect using device orientation events and 3D transforms: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Using_device_orientation_with_3D_transforms
Both approaches appear flawed, as they assume a simple inversion of device orientation through basic rotations along X, Y, and Z axes.
The correct methodology involves utilizing the alpha, beta, and gamma angles provided by the deviceorientation event, each corresponding to specific rotation axes within the device frame. By sequentially rotating around these axes, one can accurately represent the directional changes.
var b = e.beta,
g = -e.gamma,
a = e.alpha,
axis_y = Array(0,1,0),
axis_x = rotate(Array(1,0,0), axis_y, g),
axis_z = rotate(rotate(Array(0,0,1), axis_y, g), axis_x, b);
Subsequently, applying CSS transforms based on these calculations yields the desired results:
document.getElementById("cube").style.transform =
"rotate3d(" + axis_z[0] + ", " + axis_z[1] + ", " + axis_z[2] + ", " + a + "deg) " +
"rotate3d(" + axis_x[0] + ", " + axis_x[1] + ", " + axis_x[2] + ", " + b + "deg) " +
"rotate3d(" + axis_y[0] + ", " + axis_y[1] + ", " + axis_y[2] + ", " + g + "deg)";
The key difference lies in the direction of rotation; while CSS transformations follow a clockwise convention, the alpha-beta-gamma values utilize a counter-clockwise notation. Taking this into consideration, adjustments are made, such as inverting the gamma angle.
If you're interested, you can check out my rendition of this concept here:
To conclude, my question remains: Is this approach the most efficient method for achieving the desired outcome, or is there a way to simplify the process without multiple rotations?