Consider both hand and index when querying Vive controllers.

src/components/hand-controls.js

@@ -77,6 +77,8 @@ module.exports.Component = registerComponent('hand-controls', {
     this.onBorYTouchEnd = function () { self.handleButton('BorY', 'touchend'); };
     this.onSurfaceTouchStart = function () { self.handleButton('surface', 'touchstart'); };
     this.onSurfaceTouchEnd = function () { self.handleButton('surface', 'touchend'); };
+    this.onControllerConnected = this.onControllerConnected.bind(this);
+    this.onControllerDisconnected = this.onControllerDisconnected.bind(this);
 
     el.addEventListener('controllerconnected', this.onControllerConnected);
     el.addEventListener('controllerdisconnected', this.onControllerDisconnected);
@@ -101,6 +103,14 @@ module.exports.Component = registerComponent('hand-controls', {
     mesh.mixer.update(delta / 1000);
   },
 
+  onControllerConnected: function () {
+    this.el.object3D.visible = true;
+  },
+
+  onControllerDisconnected: function () {
+    this.el.object3D.visible = false;
+  },
+
   addEventListeners: function () {
     var el = this.el;
     el.addEventListener('gripdown', this.onGripDown);
@@ -387,7 +397,10 @@ function getGestureEventName (gesture, active) {
 }
 
 function isViveController (trackedControls) {
-  var controllerId = trackedControls && trackedControls.controller &&
-                     trackedControls.controller.id;
-  return controllerId && controllerId.indexOf('OpenVR ') === 0;
+  var controller = trackedControls && trackedControls.controller;
+  var isVive = controller && (controller.id && controller.id.indexOf('OpenVR ') === 0 ||
+    (controller.profiles &&
+     controller.profiles[0] &&
+     controller.profiles[0] === 'htc-vive-controller-mv'));
+  return isVive;
 }

src/components/tracked-controls-webxr.js

@@ -13,7 +13,8 @@ var EVENTS = {
 module.exports.Component = registerComponent('tracked-controls-webxr', {
   schema: {
     id: {type: 'string', default: ''},
-    hand: {type: 'string', default: ''}
+    hand: {type: 'string', default: ''},
+    index: {type: 'int', default: 0}
   },
 
   init: function () {
@@ -84,7 +85,8 @@ module.exports.Component = registerComponent('tracked-controls-webxr', {
     this.controller = controllerUtils.findMatchingControllerWebXR(
       this.system.controllers,
       this.data.id,
-      this.data.hand
+      this.data.hand,
+      this.data.index
     );
     // Legacy handle to the controller for old components.
     this.el.components['tracked-controls'].controller = this.controller;

src/components/tracked-controls.js

@@ -27,7 +27,11 @@ module.exports.Component = registerComponent('tracked-controls', {
     var data = this.data;
     var el = this.el;
     if (el.sceneEl.hasWebXR) {
-      el.setAttribute('tracked-controls-webxr', data);
+      el.setAttribute('tracked-controls-webxr', {
+        id: data.id,
+        hand: data.hand,
+        index: data.controller
+      });
     } else {
       el.setAttribute('tracked-controls-webvr', data);
     }

src/components/vive-controls.js

@@ -11,7 +11,7 @@ var VIVE_CONTROLLER_MODEL_OBJ_MTL = 'https://cdn.aframe.io/controllers/vive/vr_c
 
 var isWebXRAvailable = require('../utils/').device.isWebXRAvailable;
 
-var GAMEPAD_ID_WEBXR = 'htc-vive';
+var GAMEPAD_ID_WEBXR = 'htc-vive-controller-mv';
 var GAMEPAD_ID_WEBVR = 'OpenVR ';
 
 // Prefix for Gen1 and Gen2 Oculus Touch Controllers.
@@ -133,7 +133,7 @@ module.exports.Component = registerComponent('vive-controls', {
   checkIfControllerPresent: function () {
     var data = this.data;
     var controllerIndex = data.hand === 'right' ? 0 : data.hand === 'left' ? 1 : 2;
-    checkControllerPresentAndSetup(this, GAMEPAD_ID_PREFIX, {index: controllerIndex});
+    checkControllerPresentAndSetup(this, GAMEPAD_ID_PREFIX, {index: controllerIndex, hand: data.hand});
   },
 
   injectTrackedControls: function () {
@@ -143,6 +143,7 @@ module.exports.Component = registerComponent('vive-controls', {
     // If we have an OpenVR Gamepad, use the fixed mapping.
     el.setAttribute('tracked-controls', {
       idPrefix: GAMEPAD_ID_PREFIX,
+      hand: data.hand,
       // Hand IDs: 1 = right, 0 = left, 2 = anything else.
       controller: data.hand === 'right' ? 1 : data.hand === 'left' ? 0 : 2,
       orientationOffset: data.orientationOffset

src/utils/tracked-controls.js

@@ -83,7 +83,7 @@ function isControllerPresentWebXR (component, id, queryObject) {
   controllers = trackedControlsSystem.controllers;
   if (!controllers || !controllers.length) { return false; }
 
-  return findMatchingControllerWebXR(controllers, id, queryObject.hand);
+  return findMatchingControllerWebXR(controllers, id, queryObject.hand, queryObject.index);
 }
 
 module.exports.isControllerPresentWebVR = isControllerPresentWebVR;
@@ -148,7 +148,7 @@ function findMatchingControllerWebVR (controllers, filterIdExact, filterIdPrefix
   return undefined;
 }
 
-function findMatchingControllerWebXR (controllers, idPrefix, handedness) {
+function findMatchingControllerWebXR (controllers, idPrefix, handedness, index) {
   var i;
   var j;
   var controller;
@@ -164,8 +164,9 @@ function findMatchingControllerWebXR (controllers, idPrefix, handedness) {
     }
     if (!controllerMatch) { continue; }
     controllerHandedness = controller.handedness;
-    if (!handedness || (controllerHandedness === '' && handedness === 'right') ||
-        controller.handedness === handedness) {
+    if ((controller.handedness === handedness) ||
+        (i === index) ||
+        (controllerHandedness === '' && handedness === 'right')) {
       return controllers[i];
     }
   }

tests/components/tracked-controls-webxr.test.js

@@ -22,6 +22,7 @@ suite('tracked-controls-webxr', function () {
         system.controllers = [controller];
         el.setAttribute('tracked-controls-webxr', {'hand': 'right'});
         component = el.components['tracked-controls-webxr'];
+        component.controller = undefined;
         done();
       });
     });
@@ -30,7 +31,7 @@ suite('tracked-controls-webxr', function () {
   suite('updateGamepad', function () {
     test('matches controller with same hand', function () {
       assert.strictEqual(component.controller, undefined);
-      el.setAttribute('tracked-controls-webxr', {hand: 'left'});
+      el.setAttribute('tracked-controls-webxr', {id: 'test', hand: 'left'});
       component.updateController();
       assert.equal(component.controller, controller);
     });