Device Orientation - 3d

Overview

This is the third post in a series of four posts on experiments with the JavaScript deviceorientation event:

• One: Device Orientation - Vertical
• Two: Device Orientation - 360
• Three: Device Orientation - 3d
• Four: Device Orientation - websockets

This lab is an example of displaying a 3d representation of a device’s current orientation using the deviceorientation event reported by mobile devices.

The logic behind the event values is explained by these Dev.Opera and MDN articles.

Three values are returned by the event - alpha (α), beta (β) and gamma (γ) - that relate to the orientation of the device.

1
2
3
4
window.addEventListener('deviceorientation', handleOrientationEvent);
function handleOrientationEvent(event) {
  console.log(event.alpha, event.beta, event.gamma);
}

For this lab, the three values are used as rotation values for the X, Y and Z coordinates of the on-screen device.

The JavaScript file contains plenty of comments to describe the logic that calculates these values.

This is a basic implementation that doesn’t use Euler angles or Quaternions (etc) and therefore suffers from Gimbal Lock. (Read More Here).

Example video