VR Quickstart

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

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

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:


// Connect to localhost and start getting frames

// 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