Quest 2 controller fixes (fixes issue #5607) (#5103)

* moved onButtonChanged to bindMethods; added onThumbstickMoved to support thumbstick model updates; added recycled euler for trigger updates, which are performed as a multi-dimensional rotation for v3 controller model; added thumbstickMoved event listener, and matching remove handler; slight comment cleanup in a few places; added onButtonChangedV3 and onModelLoadedV3 for handling non-conforming model cleanly while maintaining backwards compatibility unambiguously; added multiMeshFix to fix issue that all oculus controlers have had, where all buttons light up if any button is pressed; update to use model default color as button color when not being touched;

* linting fixes

* minor cleanup

* diego request es5 changes

* linter

* add symmetrical comment to match the comment for onButtonChanged

* requested fixes

* most recent requested changes

* adding removed condition

* rename natural to original as requested

* add a word to a comment

* requested changes to comments

* undo argument name correction as requested

* Align comment with block

* Change function name

* Add missing comment

Co-authored-by: Diego Marcos Segura <diego.marcos@gmail.com>

Author: kylebakerio

src/components/oculus-touch-controls.js

@@ -153,6 +153,8 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
   mapping: INPUT_MAPPING,
 
   bindMethods: function () {
+    this.onButtonChanged = bind(this.onButtonChanged, this);
+    this.onThumbstickMoved = bind(this.onThumbstickMoved, this);
     this.onModelLoaded = bind(this.onModelLoaded, this);
     this.onControllersUpdate = bind(this.onControllersUpdate, this);
     this.checkIfControllerPresent = bind(this.checkIfControllerPresent, this);
@@ -161,7 +163,6 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
 
   init: function () {
     var self = this;
-    this.onButtonChanged = bind(this.onButtonChanged, this);
     this.onButtonDown = function (evt) { onButtonEvent(evt.detail.id, 'down', self, self.data.hand); };
     this.onButtonUp = function (evt) { onButtonEvent(evt.detail.id, 'up', self, self.data.hand); };
     this.onButtonTouchStart = function (evt) { onButtonEvent(evt.detail.id, 'touchstart', self, self.data.hand); };
@@ -171,6 +172,7 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
     this.previousButtonValues = {};
     this.rendererSystem = this.el.sceneEl.systems.renderer;
     this.bindMethods();
+    this.triggerEuler = new THREE.Euler();
   },
 
   addEventListeners: function () {
@@ -182,6 +184,7 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
     el.addEventListener('touchend', this.onButtonTouchEnd);
     el.addEventListener('axismove', this.onAxisMoved);
     el.addEventListener('model-loaded', this.onModelLoaded);
+    el.addEventListener('thumbstickmoved', this.onThumbstickMoved);
     this.controllerEventsActive = true;
   },
 
@@ -194,6 +197,7 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
     el.removeEventListener('touchend', this.onButtonTouchEnd);
     el.removeEventListener('axismove', this.onAxisMoved);
     el.removeEventListener('model-loaded', this.onModelLoaded);
+    el.removeEventListener('thumbstickmoved', this.onThumbstickMoved);
     this.controllerEventsActive = false;
   },
 
@@ -220,14 +224,13 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
     if (!data.model) { 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, see if the displayName can be retrieved to identify the specific unit.
+    // If the developer is asking for auto-detection, use the retrieved displayName to identify the specific unit.
     // This only works for WebVR currently.
     if (data.controllerType === 'auto') {
       var trackedControlsSystem = this.el.sceneEl.systems['tracked-controls-webvr'];
       // WebVR
       if (trackedControlsSystem && trackedControlsSystem.vrDisplay) {
         var displayName = trackedControlsSystem.vrDisplay.displayName;
-        // The Oculus Quest uses the updated generation 2 inside-out tracked controllers so update the displayModel.
         if (/^Oculus Quest$/.test(displayName)) {
           this.displayModel = CONTROLLER_PROPERTIES['oculus-touch-v2'];
         }
@@ -239,6 +242,7 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
       }
     }
     var modelUrl = this.displayModel[data.hand].modelUrl;
+    this.isOculusTouchV3 = this.displayModel === CONTROLLER_PROPERTIES['oculus-touch-v3'];
     this.el.setAttribute('gltf-model', modelUrl);
   },
 
@@ -270,48 +274,84 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
   },
 
   onButtonChanged: function (evt) {
+    // move the button meshes
+    if (this.isOculusTouchV3) {
+      this.onButtonChangedV3(evt);
+    } else {
+      var button = this.mapping[this.data.hand].buttons[evt.detail.id];
+      var buttonMeshes = this.buttonMeshes;
+      var analogValue;
+      if (!button) { return; }
+
+      if (button === 'trigger' || button === 'grip') { analogValue = evt.detail.state.value; }
+
+      if (buttonMeshes) {
+        if (button === 'trigger' && buttonMeshes.trigger) {
+          buttonMeshes.trigger.rotation.x = this.originalXRotationTrigger - analogValue * (Math.PI / 26);
+        }
+        if (button === 'grip' && buttonMeshes.grip) {
+          analogValue *= this.data.hand === 'left' ? -1 : 1;
+          buttonMeshes.grip.position.x = this.originalXPositionGrip + analogValue * 0.004;
+        }
+      }
+    }
+    // Pass along changed event with button state, using the buttom mapping for convenience.
+    this.el.emit(button + 'changed', evt.detail.state);
+  },
+
+  clickButtons: ['xbutton', 'ybutton', 'abutton', 'bbutton', 'thumbstick'],
+  onButtonChangedV3: function (evt) {
     var button = this.mapping[this.data.hand].buttons[evt.detail.id];
-    var buttonMeshes = this.buttonMeshes;
+    var buttonObjects = this.buttonObjects;
     var analogValue;
     if (!button) { return; }
 
-    if (button === 'trigger' || button === 'grip') { analogValue = evt.detail.state.value; }
-
-    // Update trigger and/or grip meshes, if any.
-    if (buttonMeshes) {
-      if (button === 'trigger' && buttonMeshes.trigger) {
-        buttonMeshes.trigger.rotation.x = this.originalXRotationTrigger - analogValue * (Math.PI / 26);
-      }
-      if (button === 'grip' && buttonMeshes.grip) {
-        buttonMeshes.grip.position.x = this.originalXPositionGrip + (this.data.hand === 'left' ? -1 : 1) * analogValue * 0.004;
-      }
+    analogValue = evt.detail.state.value;
+    analogValue *= this.data.hand === 'left' ? -1 : 1;
+
+    if (button === 'trigger') {
+      this.triggerEuler.copy(this.buttonRanges.trigger.min.rotation);
+      this.triggerEuler.x += analogValue * this.buttonRanges.trigger.diff.x;
+      this.triggerEuler.y += analogValue * this.buttonRanges.trigger.diff.y;
+      this.triggerEuler.z += analogValue * this.buttonRanges.trigger.diff.z;
+      buttonObjects.trigger.setRotationFromEuler(this.triggerEuler);
+    } else if (button === 'grip') {
+      buttonObjects.grip.position.x = buttonObjects.grip.minX + analogValue * 0.004;
+    } else if (this.clickButtons.includes(button)) {
+      buttonObjects[button].position.y = analogValue === 0 ? this.buttonRanges[button].unpressedY : this.buttonRanges[button].pressedY;
     }
-
-    // Pass along changed event with button state, using the buttom mapping for convenience.
-    this.el.emit(button + 'changed', evt.detail.state);
   },
 
   onModelLoaded: function (evt) {
-    var controllerObject3D = this.controllerObject3D = evt.detail.model;
-    var buttonMeshes;
-
     if (!this.data.model) { return; }
+    if (this.isOculusTouchV3) {
+      this.onOculusTouchV3ModelLoaded(evt);
+    } else {
+      // All oculus headset controller models prior to the Quest 2 (i.e., Oculus Touch V3)
+      // used a consistent format that is handled here
+      var controllerObject3D = this.controllerObject3D = evt.detail.model;
+      var buttonMeshes;
+
+      buttonMeshes = this.buttonMeshes = {};
+
+      buttonMeshes.grip = controllerObject3D.getObjectByName('buttonHand');
+      this.originalXPositionGrip = buttonMeshes.grip && buttonMeshes.grip.position.x;
+      buttonMeshes.trigger = controllerObject3D.getObjectByName('buttonTrigger');
+      this.originalXRotationTrigger = buttonMeshes.trigger && buttonMeshes.trigger.rotation.x;
+      buttonMeshes.thumbstick = controllerObject3D.getObjectByName('stick');
+      buttonMeshes.xbutton = controllerObject3D.getObjectByName('buttonX');
+      buttonMeshes.abutton = controllerObject3D.getObjectByName('buttonA');
+      buttonMeshes.ybutton = controllerObject3D.getObjectByName('buttonY');
+      buttonMeshes.bbutton = controllerObject3D.getObjectByName('buttonB');
+    }
 
-    buttonMeshes = this.buttonMeshes = {};
-
-    buttonMeshes.grip = controllerObject3D.getObjectByName('buttonHand');
-    this.originalXPositionGrip = buttonMeshes.grip && buttonMeshes.grip.position.x;
-    buttonMeshes.thumbstick = controllerObject3D.getObjectByName('stick');
-    buttonMeshes.trigger = controllerObject3D.getObjectByName('buttonTrigger');
-    this.originalXRotationTrigger = buttonMeshes.trigger && buttonMeshes.trigger.rotation.x;
-    buttonMeshes.xbutton = controllerObject3D.getObjectByName('buttonX');
-    buttonMeshes.abutton = controllerObject3D.getObjectByName('buttonA');
-    buttonMeshes.ybutton = controllerObject3D.getObjectByName('buttonY');
-    buttonMeshes.bbutton = controllerObject3D.getObjectByName('buttonB');
+    for (var button in this.buttonMeshes) {
+      if (this.buttonMeshes[button]) {
+        cloneMeshMaterial(this.buttonMeshes[button]);
+      }
+    }
 
-    // Offset pivot point
-    controllerObject3D.position.copy(this.displayModel[this.data.hand].modelPivotOffset);
-    controllerObject3D.rotation.copy(this.displayModel[this.data.hand].modelPivotRotation);
+    this.applyOffset(evt.detail.model);
 
     this.el.emit('controllermodelready', {
       name: 'oculus-touch-controls',
@@ -320,24 +360,125 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
     });
   },
 
+  applyOffset: function (model) {
+    model.position.copy(this.displayModel[this.data.hand].modelPivotOffset);
+    model.rotation.copy(this.displayModel[this.data.hand].modelPivotRotation);
+  },
+
+  onOculusTouchV3ModelLoaded: function (evt) {
+    var controllerObject3D = this.controllerObject3D = evt.detail.model;
+
+    var buttonObjects = this.buttonObjects = {};
+    var buttonMeshes = this.buttonMeshes = {};
+    var buttonRanges = this.buttonRanges = {};
+
+    buttonMeshes.grip = controllerObject3D.getObjectByName('squeeze');
+    buttonObjects.grip = controllerObject3D.getObjectByName('xr_standard_squeeze_pressed_value');
+    buttonRanges.grip = {
+      min: controllerObject3D.getObjectByName('xr_standard_squeeze_pressed_min'),
+      max: controllerObject3D.getObjectByName('xr_standard_squeeze_pressed_max')
+    };
+    buttonObjects.grip.minX = buttonObjects.grip.position.x;
+
+    buttonMeshes.thumbstick = controllerObject3D.getObjectByName('thumbstick');
+    buttonObjects.thumbstick = controllerObject3D.getObjectByName('xr_standard_thumbstick_pressed_value');
+    buttonRanges.thumbstick = {
+      min: controllerObject3D.getObjectByName('xr_standard_thumbstick_pressed_min'),
+      max: controllerObject3D.getObjectByName('xr_standard_thumbstick_pressed_max'),
+      originalRotation: this.buttonObjects.thumbstick.rotation.clone()
+    };
+    buttonRanges.thumbstick.pressedY = buttonObjects.thumbstick.position.y;
+    buttonRanges.thumbstick.unpressedY =
+      buttonRanges.thumbstick.pressedY + Math.abs(buttonRanges.thumbstick.max.position.y) - Math.abs(buttonRanges.thumbstick.min.position.y);
+
+    buttonMeshes.trigger = controllerObject3D.getObjectByName('trigger');
+    buttonObjects.trigger = controllerObject3D.getObjectByName('xr_standard_trigger_pressed_value');
+    buttonRanges.trigger = {
+      min: controllerObject3D.getObjectByName('xr_standard_trigger_pressed_min'),
+      max: controllerObject3D.getObjectByName('xr_standard_trigger_pressed_max')
+    };
+    buttonRanges.trigger.diff = {
+      x: Math.abs(buttonRanges.trigger.max.rotation.x) - Math.abs(buttonRanges.trigger.min.rotation.x),
+      y: Math.abs(buttonRanges.trigger.max.rotation.y) - Math.abs(buttonRanges.trigger.min.rotation.y),
+      z: Math.abs(buttonRanges.trigger.max.rotation.z) - Math.abs(buttonRanges.trigger.min.rotation.z)
+    };
+
+    var button1 = this.data.hand === 'left' ? 'x' : 'a';
+    var button2 = this.data.hand === 'left' ? 'y' : 'b';
+    var button1id = button1 + 'button';
+    var button2id = button2 + 'button';
+
+    buttonMeshes[button1id] = controllerObject3D.getObjectByName(button1 + '_button');
+    buttonObjects[button1id] = controllerObject3D.getObjectByName(button1 + '_button_pressed_value');
+    buttonRanges[button1id] = {
+      min: controllerObject3D.getObjectByName(button1 + '_button_pressed_min'),
+      max: controllerObject3D.getObjectByName(button1 + '_button_pressed_max')
+    };
+
+    buttonMeshes[button2id] = controllerObject3D.getObjectByName(button2 + '_button');
+    buttonObjects[button2id] = controllerObject3D.getObjectByName(button2 + '_button_pressed_value');
+    buttonRanges[button2id] = {
+      min: controllerObject3D.getObjectByName(button2 + '_button_pressed_min'),
+      max: controllerObject3D.getObjectByName(button2 + '_button_pressed_max')
+    };
+
+    buttonRanges[button1id].unpressedY = buttonObjects[button1id].position.y;
+    buttonRanges[button1id].pressedY =
+      buttonRanges[button1id].unpressedY + Math.abs(buttonRanges[button1id].max.position.y) - Math.abs(buttonRanges[button1id].min.position.y);
+
+    buttonRanges[button2id].unpressedY = buttonObjects[button2id].position.y;
+    buttonRanges[button2id].pressedY =
+      buttonRanges[button2id].unpressedY - Math.abs(buttonRanges[button2id].max.position.y) + Math.abs(buttonRanges[button2id].min.position.y);
+  },
+
   onAxisMoved: function (evt) {
     emitIfAxesChanged(this, this.mapping[this.data.hand].axes, evt);
   },
 
+  onThumbstickMoved: function (evt) {
+    if (!this.isOculusTouchV3 || !this.buttonMeshes || !this.buttonMeshes.thumbstick) { return; }
+    for (var axis in evt.detail) {
+      this.buttonObjects.thumbstick.rotation[this.axisMap[axis]] =
+        this.buttonRanges.thumbstick.originalRotation[this.axisMap[axis]] -
+        (Math.PI / 8) *
+        evt.detail[axis] *
+        (axis === 'y' || this.data.hand === 'right' ? -1 : 1);
+    }
+  },
+  axisMap: {
+    y: 'x',
+    x: 'z'
+  },
+
   updateModel: function (buttonName, evtName) {
     if (!this.data.model) { return; }
     this.updateButtonModel(buttonName, evtName);
   },
 
   updateButtonModel: function (buttonName, state) {
+    // update the button mesh colors
     var button;
-    var color = (state === 'up' || state === 'touchend') ? this.data.buttonColor : state === 'touchstart' ? this.data.buttonTouchColor : this.data.buttonHighlightColor;
+    var color = (state === 'up' || state === 'touchend') ? this.buttonMeshes[buttonName].originalColor || this.data.buttonColor : state === 'touchstart' ? this.data.buttonTouchColor : this.data.buttonHighlightColor;
     var buttonMeshes = this.buttonMeshes;
-    if (!this.data.model) { return; }
+
     if (buttonMeshes && buttonMeshes[buttonName]) {
       button = buttonMeshes[buttonName];
       button.material.color.set(color);
       this.rendererSystem.applyColorCorrection(button.material.color);
     }
   }
 });
+
+/**
+ * Some of the controller models share the same material for different parts (buttons, triggers...).
+ * In order to change their color independently we have to create separate materials.
+ */
+function cloneMeshMaterial (object3d) {
+  object3d.traverse(function (node) {
+    if (node.type !== 'Mesh') return;
+    let newMaterial = node.material.clone();
+    object3d.originalColor = node.material.color;
+    node.material.dispose();
+    node.material = newMaterial;
+  });
+}