Skip to content
Web browser gamepad controller handler for Oculus, Vive, Windows MR, Daydream, GearVR, XBox, and more
Branch: master
Clone or download
Pull request Compare This branch is 58 commits ahead, 36 commits behind stewdio:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
models
LICENSE
README.md
VRController.jpg
VRController.js
VREffect.js
index-new-webvr.html
index.html
models.html
windows-mr.html

README.md

THREE.VRController

THREE.VRController

Generic VR controller handler for building WebVR experiences with THREE.js. Wraps the Web Gamepad API to handle gamepad discovery, emits a controller (THREE.Object3D) instance upon discovery, handles controller updates for position and orientation (including 3DOF rigs via the OrientationArmModel). Watches for updates on axes and button states and emits corresponding events on the controller instance. Good for HTC Vive, Oculus Rift, Google Daydream, and beyond. Submitted to Three.js as pull request #10991 on Saturday, 11 March 2017.

Requirements

  1. Virtual Reality rig with controllers such as the HTC Vive, Oculus Rift, Google Daydream, or similar devices.
  2. WebVR-capable browser. For the latest list of browsers that support WebVR — as well as download and setup instructions — see WebVR Rocks.
  3. Working knowledge of THREE.js.

Try it now!

Already on a VR rig with a WebVR-capable browser? Just point your browser to https://stewdio.github.io/THREE.VRController/ to experience this code in action.

Do it yourself

  1. Add our VRController.js file to your existing Three.js project and use our index.html example file as your guide for the following steps.
  2. Add a THREE.VRController.update() function call to your animation loop.
  3. Add a listener for the "vr controller connected" global event. This is how you will receive the controller object instance—which is a THREE.Object3D. This means you can add it to your scene, attach meshes to it, and so on.
  4. When you receive the controller object instance you must give it some additional information depending on the type of controller. For 6DOF (room scale) rigs you must provide a standing matrix, easily obtained from your VRControls instance. (Note that VRControls and VRController may have similar names but are entirely different things.) This will look similar to: controller.standingMatrix = controls.getStandingMatrix() For 3DOF (seated) rigs you must provide a reference to the camera so the controller can use the headset’s live position and orientation to guess where it ought to be: controller.head = camera There’s no penalty for providing the controller instance with both standingMatrix and head properties as we do in the example.
  5. Explore the available touch, press, and trackpad events by assigning THREE.VRController.verbosity = 1. You’ll now see a flood of verbose comments in the JavaScript console as you interact with your controller. To access controllers directly from the console explore the THREE.VRController.controllers object.

Run locally

The easiest way to fire this up on your own desktop machine is to start a simple Python server. Open up a command line prompt, navigate to wherever you’ve stored this code package, then type the following command depending on the version of Python you have installed.

Python 2: python -m SimpleHTTPServer 8000
Python 3: py -m http.server 8000

In your browser you can now navigate to http://localhost:8000/ to see the demo running locally. You can shutdown the local server by returning to the command line and hitting Control + C.

You can’t perform that action at this time.