Exploring the possibilities of device orientation in combination with 3D transforms

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?

Answer №1

When I dabbled with the Device Orientation API, I found that I was just scratching the surface. I experimented with the beta and gamma values independently, using them to control a ball's velocity in a game demo called Cyber Orb. This demo was created using the Phaser framework and rendered on Canvas. More information can be found in the MDN article and Mozilla Hacks post.

Although CSS 3D transforms are not my strongest suit, I believe in keeping things simple when it comes to coding. If a solution works effectively, then why complicate it? However, I am open to learning more efficient ways of achieving the same results from others who may have different perspectives.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a visually appealing Django filter form with custom styling in HTML

Currently, this is how my django filter form appears: Below is the html code I am using: <form action="" method="get" class="form-inline"> {{myfilter.form|bootstrap}} <button class="btn btn-primary&q ...

Adjust the text placement on the toggle switch to turn it On or Off

I am looking to create a toggle switch with a small size. I found some code on Stack Overflow that I tried but it didn't work as expected. The code snippet I attempted to use is from another helpful post. My goal is to have the "on" text align to th ...

Is it possible to turn off wrapping behavior within a div using CSS3 or Bootstrap?

Currently, I am working with code that utilizes Bootstrap 2. <div class="row-fluid"> <div class="span4">Some text 1</div> <div class="span4">Some text 2</div> <div class="span4 ...

Select the top row of a table when the checkbox is ticked to emphasize it

Previously, I tackled a challenge on a webpage using jQuery where checkboxes in a table needed to be selected based on specific data attributes. Essentially, if one checkbox in a row was selected, the rest of the checkboxes would be disabled if their data ...

What is the best way to align an InputAdornment IconButton with an OutlinedInput in Material-UI?

Struggling to replicate a text input from a mockup using Material-UI components. Initially tried rendering a button next to the input, but it didn't match. Moving on to InputAdornments, getting closer but can't get the button flush with the input ...

How can I generate a bounding box with CSS?

I am a newcomer to vue.js and I have a question about creating a bounding box for any element. This bounding box resembles a view box in svg. For example, I have created a checkbox like this one: checkbox Below is the code to style the checkbox: /* checkb ...

Eliminate the unnecessary gap below the image

I have noticed that there is too much space beneath an image on my website. I have tried checking for extra tags, but I suspect that it might be controlled in a css file. Could someone please help me identify which part of the css is causing this extra ...

Using Jquery and CSS to add a class with a 1-second delay when the mouse enters

I have successfully implemented the addClass function in my code, but I'm encountering issues when attempting to use delay or setTimeout functions. It's important to note that I'm avoiding the use of webkit attributes in CSS. If anyone has ...

I'm wondering why my element is aligning itself with its sibling. It seems that when the parent has overflow set to hidden, it causes the children's

Let me break down the diagram below for you: The main box is marked in yellow and serves as the parent element. Within this parent box, there are two child elements, one in black and one in cyan. To hide any excess content of the cyan box that overfl ...

Adjacent components

I have a query regarding the utilization of Angular. I aim to align the sentences side by side. These are two distinct components that I developed. I wish for recipe-list and recipes-details to function properly, with both statements displayed alongside ...

css based on the current time in the United States

I have a working code that currently reads the user's computer time, but I specifically need to get the hours from the USA regardless of the user's location. The CSS should be applied based on USA time. <script type="text/javascript"> dat ...

Elegant CSS background image fade effect

Having a small JS script that functions properly, but encountering an issue when quickly hovering over buttons causing the smooth transition effect to not work as desired. This abrupt change in image is quite unappealing. Any help would be greatly appreci ...

Struggling with applying mixins

Is it possible to select only the top border using this mixin? Currently, I only need a top border but would like to have the option to use others in the future. Using separate mixins for each side of the border seems inefficient. .bordered(@top-width: 1 ...

Eliminate gaps created by grid rows by incorporating elements of varying heights

This is the standard format of the page: * { margin: 0; padding: 0; } img { width: 100%; float: left; } #grid { display: grid; grid-template-columns: repeat(3, 1fr); } #test-one { grid-column-start: 1; grid-column-end: 2; width: 100 ...

I seem to be having trouble getting my CSS to load properly on Internet Explorer 11 and Firefox, as it only seems

Currently, I am in the process of developing a basic webpage. Oddly enough, my CSS styling seems to be functional only in Chrome, with no success when it comes to both Firefox and IE11. Here is a snippet of my HTML code: <html> <head> < ...

Adding additional images to the left side of the slide

My goal is to display multiple images in two rows. The alignment works well for up to 9 images, but beyond that, the additional images appear on a third row instead of staying within the two rows. I want to ensure they are contained within 2 rows only. How ...

What is the best way to switch the visibility of a div on click from another div?

My goal is to make a div toggle visible or hidden when another div is clicked. The only connection between the two divs is that they are both nested within the same parent div. There's a DIV element with the class of "comment" which contains a DIV ele ...

Unique CSS design with an accentuated border

I was experimenting with creating a corner using CSS and managed to achieve something like this: .left-corner { width: 0; height: 0; border-top: 100px solid powderblue; border-left: 100px solid transparent; } <div class="left-corner"></ ...

The navigation bar is showing my logo in a blurry and small format when viewed on a desktop

Currently, Twitter Bootstrap is being utilized on my website and a high-resolution logo has been successfully uploaded. The dimensions of the logo are 529 x 100 pixels, and here is the relevant CSS: .navbar-brand { float: left; padding: 12px 15p ...

My intention is to ensure that the page is printed with the Background graphics checkbox pre-checked

When using the print button, I typically include the following code: onclick="window.print();" I also came across this code snippet to set a checkbox as checked by default: <style type="text/css" media="print"> * { -webkit-print-color- ...