CSS cubic panoramic control with euler angles in javascript

Question

I am currently working on building a viewer to display panoramic photos. I have the images placed on the inside of a CSS cube, and am working on how to control it utilizing the deviceorientation event in javascript.

I have found and implemented an algorithm to convert the raw data from the deviceorientation event into euler angles, but I am unsure of how to hook this data up to rotate the cube using the CSS 3d rotation transforms.

My goal is to be able to allow a user to hold their phone up and look around the panorama, similar to some commercial softwares out there.

I was thinking about utilizing three.js to do this, but the size of the library to too large for this particular project. We want to keep the overhead low.

Here is a pen of the code I currently have:

[REDACTED]

Any help would be greatly appreciated! Thanks!

UPDATE

I have some basic functionality working now. Here is the updated code:

[REDACTED]

You need to have screen rotation turned off, and you have to tilt your phone into a landscape view. My new problem now is how to make this whole thing work while the phone is held in an portrait position, as well as when screen rotation is turned on.

Answer 1

So I finally managed to solve this problem, with the help of a lot of research and some very helpful articles on google- specifically this one:

http://dev.opera.com/articles/w3c-device-orientation-usage/#demo

Essentially, I ended up converting the Tait-Bryan angles from the gyroscope into a rotational matrix. This was a little tricky, as there are many different possible sequences of axis combination in creating a conversion from euler to rotation matrix. I utilized the ZYX combination, as used in the above article.

I then transformed this initial matrix by with two other matrices. The first was a rotation about the z-axis to account for the orientation of the screen. The second was an inversion of the XZ axis which fixed a problem with the direction the css cube was moving when the camera looked up; looking up moved the cube down.

Finally, I had to be a little bit hackey. The images on the inside of the cube were off from the current orientation, so I re-organized the images and rotated the faces of the cube. I tried to various rotational matrix transformations, but nothing seemed to correct it without screwing up my controls.

Hopefully this might be useful to someone else who has a similar problem.

You can find my codepen of the final solution here:

[REDACTED]