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
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
pull request #10991
on Saturday, 11 March 2017.
- Virtual Reality rig with controllers such as the HTC Vive, Oculus Rift, Google Daydream, or similar devices.
- WebVR-capable browser. For the latest list of browsers that support WebVR — as well as download and setup instructions — see WebVR Rocks.
- 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
- 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.
- Add a
THREE.VRController.update()function call to your animation loop.
- 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.
- 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
VRControlsinstance. (Note that
VRControllermay 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 = cameraThere’s no penalty for providing the controller instance with both
headproperties as we do in the example.
- Explore the available touch, press, and trackpad events by assigning
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 -m SimpleHTTPServer 8000
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.