Code of a demo showing how to use accelerometer-enabled browsers to animate a 3D object on a separate device
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

3D Explorer


This demo shows how to use one device (equipped with an accelerometer) to explore in 3 dimensions an object shown on the screen of another device, using only off-the-shelf Web technologies.


  • Load the 3D object (html5logo.html) on a given device, typically a regular computer browser that supports Server-Sent events.
  • Load the 3D-explorer (3D.html) page on a device with an accelerometer and a browser supporting the accelerometer API (e.g. iPhone > 4, iPad, Firefox on Android, Android browser > 3.0)
  • Move the second device and see how the object is animated on the first screen in sync

This code can be used live and can be seen recorded in video.

Under the hood

The movements of the second device are captured using W3C DeviceOrientation Events, sent to a server built using node.js that acts as a relay, dispatching them to the first device via Server-Sent events.

The HTML5 3D logo is built using HTML5’s canvas element.

The HTML5 3D logo animation itself comes from Kevin Roast’s 3D demos, using the canvas K3D library.