Support hand controllers for Oculus, Vive, Windows Mixed Reality, Daydream, GearVR, and more by adding VRController to your existing Three.js-based WebVR project.
MIT License
Support hand controllers for Oculus, Vive, Windows Mixed Reality, Daydream,
GearVR, and more by adding VRController to your existing
Three.js-based
WebVR project.
VRController wraps the Web Gamepad API,
handles gamepad browser quirks,
emits a controller instance (an extended THREE.Object3D
) upon gamepad
discovery, handles controller updates for position and orientation—including
3DOF rigs
via the OrientationArmModel
—and watches for updates on axes and button
states—emitting corresponding events on the controller instance.
(Pretty great, right?!)
VRController includes explicit support for Oculus Rift + Touch, HTC Vive, Windows Mixed Reality motion controllers, Google Daydream, and has implicit support for Samsung GearVR and similar devices. Is your company developing new hand controllers? Send them my way and I’ll add support for it. 😉
VRController is compatible with Three.js r87 which is the first version to
use the new renderer.vr
object and was originally submitted to
Three.js as
pull request #10991
on Saturday, 11 March 2017. Note: that pull request is no longer maintained.
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.
THREE.VRController.update()
function call to your animation loop."vr controller connected"
global event. This isTHREE.Object3D
. This means you can add it to your scene, attach meshesWebGLRenderer
instance in Three.js r87 and above. This will look similar to:controller.standingMatrix = renderer.vr.getStandingMatrix()
.controller.head = camera
. There’s no penalty for providingstandingMatrix
and head
properties asTHREE.VRController.verbosity = 1
.THREE.VRController.controllers
object. To get a snapshot of allTHREE.VRController.inspect()
.For security reasons you can’t run a WebVR experience by just dragging the
index
file onto a browser tab. You have to run an actual server. The easiest
way to do this 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.
If you’re building WebVR experiences and targeting the WebVR build of Chromium you may want to read my Medium post about its quirky behavior and how VRController compensates for it: WebVR controllers and Chromium’s Gamepad API.
Looking for a more complex, fleshed out example of VRController in action?
Play Space Rocks now at
https://spacerocks.moar.io
You can read more about it on
Medium
or check out the
code repository.
Look for VRController-related bits in
/scripts/player.js
.
And for the full technical breakdown, including multi-channel haptic feedback, button handling, and attaching visuals to controllers, see Space Rocks—WebXR tech deep dive.