Demo

Use a QR code scanner with a mobile device to scan this code, and start moving the Earth!

Putting it together

This actually was a classic case of stacking existing components like lego.

  • The DeviceOrientation event is part of the W3C standards, and while it’s still an experimental feature, many browsers already support it. The documentation even helps you out converting Euler angles (the event’s representation of the device orientation) to quaternions, which are generally useful when dealing with rotations and orientations.
  • three.js is a powerful 3D javascript library; the globe was adapted from this example.
  • PeerJS is a javascript p2p library wrapping WebRTC with a very easy-to-use API, and they even provide a default, free broker server for the initial connection.
  • I used qrcode-generator to generate the QR code.

Code

The code is available on Github: globe.html, globe.js, client.html, client.js.