Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Code of a demo showing how to use accelerometer-enabled browsers to animate a 3D object on a separate device

branch: master
README.md

3D Explorer

Introduction

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.

Instructions

  • 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.

Something went wrong with that request. Please try again.