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

See also how this works in a video of the demonstration.

Under the hood

The movements of the second device are captured using W3C DeviceOrientation Events, sent to a proxy server built using node.js, and then dispatched 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.>

The code for this demonstration is available on github.

Dominique Hazael-Massieux (@dontcallmedom)