How to get input from VR controllers in Aframe

Hi everyone, just putting out a quick article on this because I could not find anything on how to use the joystick or touchpad on my Windows Mixed Reality controllers, so I thought I would just show you how I did It. And just a quick disclaimer that this should work for Oculus Rift and Vive controllers. So let’s get started right away:

So first we can get button presses very simply with two event listeners:

<a-scene>
    <a-entity windows-motion-controls="hand: right" id="controller"></a-entity>//you can replace this with your controller
</a-scene>
<script type="text/javascript">
  var controller = document.querySelector('a-scene').querySelector('#controller');
  var menuPressed = false;

  controller.addEventListener('menudown',function(){
      menuPressed = true;
  }
    controller.addEventListener('menuup',function(){
         menuPressed = false;
    }
</script>

But that’s not the hard part, The hard part is the touchpad:

it’s hard because there is not an event listener for when it is pressed, only for when it is touched. To actually get a value we have to tap into a different event listener.

<a-scene>
    <a-entity windows-motion-controls="hand: right" id="controller"></a-entity>//you can replace this with your controller
</a-scene>
<script type="text/javascript">
        var controller = document.querySelector('a-scene').querySelector('#controller');
        var menuPressed = false;

        controller.addEventListener('menudown',function(){
            menuPressed = true;
        });
    controller.addEventListener('menuup',function(){
         menuPressed = false;
    });

    var touchpad = {
      x:0;
      y:0;
      pressed:false;
      touching:false;
    }
    controller.addEventListener('touchpaddown',function(){
            touchpad.touched = true;
        });
        controller.addEventListener('touchpadup',function(){
            touchpad.touched = false
        });
    controller.addEventListener('touchpadchanged',function(evt){
      touchpad.pressed = evt.detail.value;//if value is 1 it is pressed, if it is 0 it is not pressed
    });
    controller.addEventListener('touchpadmoved',function(evt){
      touchpad.x = evt.detail.x;
      touchpad.x = evt.detail.y;
    });
</script>

And that’s all you need to know, but just to top our code off lets include the thumbstick

var thumbstick = {
    x:0;
    y:0;
    pressed:false;
}
controller.addEventListener('thumbstickdown',function(){
    thumbstick.pressed=true;
}
controller.addEventListener('thumbstickup',function(){
    thumbstick.pressed=false;
}
controller.addEventListener('thumbstickmoved',function(evt){
    thumbstick.x=evt.detail.x;
    thumbstick.y=evt.detail.y;
}

And there you go!

Liked it? Take a second to support WireWhiz on Patreon!