Need help with THREE.VRController?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

217 Stars 37 Forks MIT License 50 Commits 13 Opened issues


Support hand controllers for Oculus, Vive, Windows Mixed Reality, Daydream, GearVR, and more by adding VRController to your existing Three.js-based WebVR project.

Services available


Need anything else?

Contributors list

# 61,334
43 commits
# 2,299
2 commits
# 240,747
1 commit



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

) upon gamepad discovery, handles controller updates for position and orientation—including 3DOF rigs via the
—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

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.


  1. Virtual Reality rig with 3DOF or 6DOF controllers such as the Oculus Rift + Touch, HTC Vive, a Windows Mixed Reality rig, Google Daydream, Samsung GearVR, 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 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
    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 an extended
    . 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
    instance in Three.js r87 and above. This will look similar to:
    controller.standingMatrix = renderer.vr.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
    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
    object. To get a snapshot of all controller data try

Run locally

For security reasons you can’t run a WebVR experience by just dragging the

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.

Notes on Chromium’s Gamepad API

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.

Space Rocks!

Space Rocks

Looking for a more complex, fleshed out example of VRController in action? Play Space Rocks now at You can read more about it on Medium or check out the code repository. Look for VRController-related bits in


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.

Space Rocks technical deep dive

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.