VR Quickstart

This minimal demo show how to get started with Leap Motion Virtual Reality on the web.

• Press f to go to fullscreen.
• Firefox or Chromium WebVR builds. See http://www.mozvr.com or Chromium Google Drive
• THREE.js
• LeapJS 0.6.4+, LeapJS Plugins 0.1.11pre+

The code is in a single file, broken down in to sections:

• create the scene
• add cubes
• add leap motion
• add virtual reality
• make it go

There are the following features:

• Position & Orientation Tracking
• LeapMotion HMD Tracking and Transformation

Notes on setup:

• It is recommended to lock your oculus display to 60Hz, as that is what Firefox currently supports. (Mac: do this in the Displays System Preferences)
• Units are all converted to meters. This is quite important for correct eye positioning.
• The position tracking in VRControls.js won't be in THREE.js until r72+
• Each browser requires a flag set. In Chrome, this is chrome://flags "WebVR", which you can confirm with this test page. In firefox, it is dom.vr.enabled.

The Leap Motion part of this demo:

//
// ADD LEAP MOTION
//
//

// Connect to localhost and start getting frames
Leap.loop();

// Docs: http://leapmotion.github.io/leapjs-plugins/main/transform/
Leap.loopController.use('transform', {

  // This matrix flips the x, y, and z axis, scales to meters, and offsets the hands by -8cm.
  vr: true,

  // This causes the camera's matrix transforms (position, rotation, scale) to be applied to the hands themselves
  // The parent of the bones remain the scene, allowing the data to remain in easy-to-work-with world space.
  // (As the hands will usually interact with multiple objects in the scene.)
  effectiveParent: camera

});

// Docs: http://leapmotion.github.io/leapjs-plugins/main/bone-hand/
Leap.loopController.use('boneHand', {

  // If you already have a scene or want to create it yourself, you can pass it in here
  // Alternatively, you can pass it in whenever you want by doing
  // Leap.loopController.plugins.boneHand.scene = myScene.
  scene: scene,

  // Display the arm
  arm: true

});