Fix issues when laser-controls mix with other controller components (fix

 #5373)

src/components/generic-tracked-controller-controls.js

@@ -70,7 +70,7 @@ module.exports.Component = registerComponent('generic-tracked-controller-control
     this.bindMethods();
 
     // generic-tracked-controller-controls has the lowest precedence.
-    // We must diable this component if there are more specialized controls components.
+    // Disable this component if there are more specialized controls components.
     this.el.addEventListener('controllerconnected', function (evt) {
       if (evt.detail.name === self.name) { return; }
       self.wasControllerConnected = true;
@@ -149,6 +149,7 @@ module.exports.Component = registerComponent('generic-tracked-controller-control
   },
 
   onControllersUpdate: function () {
+    if (!this.wasControllerConnected) { return; }
     this.checkIfControllerPresent();
   },
 
@@ -171,5 +172,10 @@ module.exports.Component = registerComponent('generic-tracked-controller-control
     });
     modelEl.setAttribute('material', {color: this.data.color});
     this.el.appendChild(modelEl);
+    this.el.emit('controllermodelready', {
+      name: 'generic-tracked-controller-controls',
+      model: this.modelEl,
+      rayOrigin: {origin: {x: 0, y: 0, z: -0.01}, direction: {x: 0, y: 0, z: -1}}
+    });
   }
 });

src/components/hand-tracking-controls.js

@@ -1,4 +1,4 @@
-/* global THREE */
+/* global THREE, XRHand */
 var registerComponent = require('../core/component').registerComponent;
 var bind = require('../utils/bind');
 
@@ -184,7 +184,6 @@ module.exports.Component = registerComponent('hand-tracking-controls', {
       var jointPoses = this.jointPoses;
       var controller = this.el.components['tracked-controls'] && this.el.components['tracked-controls'].controller;
       var i = 0;
-
       if (!controller || !this.mesh) { return; }
       this.mesh.visible = false;
       if (!this.hasPoses) { return; }
@@ -263,10 +262,18 @@ module.exports.Component = registerComponent('hand-tracking-controls', {
     var el = this.el;
     var data = this.data;
     el.setAttribute('tracked-controls', {
+      id: '',
       hand: data.hand,
       iterateControllerProfiles: true,
       handTrackingEnabled: true
     });
+
+    if (this.mesh) {
+      if (this.mesh !== el.getObject3D('mesh')) {
+        el.setObject3D('mesh', this.mesh);
+      }
+      return;
+    }
     this.initDefaultModel();
   },
 
@@ -279,22 +286,23 @@ module.exports.Component = registerComponent('hand-tracking-controls', {
   },
 
   onControllersUpdate: function () {
+    var el = this.el;
     var controller;
     this.checkIfControllerPresent();
-    controller = this.el.components['tracked-controls'] && this.el.components['tracked-controls'].controller;
-    if (!this.el.getObject3D('mesh')) { return; }
-    if (!controller || !controller.hand || !controller.hand[0]) {
-      this.el.getObject3D('mesh').visible = false;
+    controller = el.components['tracked-controls'] && el.components['tracked-controls'].controller;
+    if (!this.mesh) { return; }
+    if (controller && controller.hand && (controller.hand instanceof XRHand)) {
+      el.setObject3D('mesh', this.mesh);
     }
   },
 
   initDefaultModel: function () {
-    if (this.el.getObject3D('mesh')) { return; }
-    if (this.data.modelStyle === 'dots') {
+    var data = this.data;
+    if (data.modelStyle === 'dots') {
       this.initDotsModel();
     }
 
-    if (this.data.modelStyle === 'mesh') {
+    if (data.modelStyle === 'mesh') {
       this.initMeshHandModel();
     }
   },

src/components/laser-controls.js

@@ -16,7 +16,6 @@ registerComponent('laser-controls', {
     var controlsConfiguration = {hand: data.hand, model: data.model};
 
     // Set all controller models.
-    el.setAttribute('gearvr-controls', controlsConfiguration);
     el.setAttribute('hp-mixed-reality-controls', controlsConfiguration);
     el.setAttribute('magicleap-controls', controlsConfiguration);
     el.setAttribute('oculus-go-controls', controlsConfiguration);
@@ -68,7 +67,9 @@ registerComponent('laser-controls', {
       }, controllerConfig.cursor));
     }
 
-    function hideRay () {
+    function hideRay (evt) {
+      var controllerConfig = config[evt.detail.name];
+      if (!controllerConfig) { return; }
       el.setAttribute('raycaster', 'showLine', false);
     }
   },

src/components/oculus-touch-controls.js

@@ -270,6 +270,12 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
     var controllerId;
 
     if (!data.model) { return; }
+    // If model has been already loaded
+    if (this.controllerObject3D) {
+      this.el.setObject3D('mesh', this.controllerObject3D);
+      return;
+    }
+
     // Set the controller display model based on the data passed in.
     this.displayModel = CONTROLLER_PROPERTIES[data.controllerType] || CONTROLLER_PROPERTIES[CONTROLLER_DEFAULT];
     // If the developer is asking for auto-detection, use the retrieved displayName to identify the specific unit.

src/components/windows-motion-controls.js

@@ -477,6 +477,7 @@ module.exports.Component = registerComponent('windows-motion-controls', {
 
   setModelVisibility: function (visible) {
     var model = this.el.getObject3D('mesh');
+    if (!this.controllerPresent) { return; }
     visible = visible !== undefined ? visible : this.modelVisible;
     this.modelVisible = visible;
     if (!model) { return; }

tests/components/windows-motion-controls.test.js

@@ -514,6 +514,7 @@ suite('windows-motion-controls', function () {
       var component = el.components['windows-motion-controls'];
       var model = new THREE.Object3D();
       model.visible = false;
+      component.controllerPresent = true;
       el.setObject3D('mesh', model);
       component.setModelVisibility(true);
       assert.ok(model.visible);
@@ -523,6 +524,7 @@ suite('windows-motion-controls', function () {
       var component = el.components['windows-motion-controls'];
       var model = new THREE.Object3D();
       model.visible = true;
+      component.controllerPresent = true;
       el.setObject3D('mesh', model);
       component.setModelVisibility(false);
       assert.notOk(model.visible);