From 9be4c4c43d09c625e3afa4a8e557a200ac958ef7 Mon Sep 17 00:00:00 2001
From: kyle <me@kylebaker.io>
Date: Sat, 27 Aug 2022 00:04:55 -0600
Subject: [PATCH 01/16] 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;

---
 src/components/oculus-touch-controls.js | 238 +++++++++++++++++++-----
 1 file changed, 193 insertions(+), 45 deletions(-)

diff --git a/src/components/oculus-touch-controls.js b/src/components/oculus-touch-controls.js
index f9ef25e17c2..69d6fef72ec 100644
--- a/src/components/oculus-touch-controls.js
+++ b/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,18 +224,17 @@ 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.
-    // This only works for WebVR currently.
+    // If the developer is asking for auto-detection, use the retrieved displayName to identify the specific unit.
     if (data.controllerType === 'auto') {
       var trackedControlsSystem = this.el.sceneEl.systems['tracked-controls-webvr'];
-      // WebVR
       if (trackedControlsSystem && trackedControlsSystem.vrDisplay) {
+        // WebVR
         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'];
         }
-      } else { // WebXR
+      } else {
+        // WebXR
         controllerId = CONTROLLER_DEFAULT;
         controllerId = controller.profiles.indexOf('oculus-touch-v2') !== -1 ? 'oculus-touch-v2' : controllerId;
         controllerId = controller.profiles.indexOf('oculus-touch-v3') !== -1 ? 'oculus-touch-v3' : controllerId;
@@ -239,6 +242,7 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
       }
     }
     var modelUrl = this.displayModel[data.hand].modelUrl;
+    this.isV3 = this.displayModel === CONTROLLER_PROPERTIES['oculus-touch-v3'];
     this.el.setAttribute('gltf-model', modelUrl);
   },
 
@@ -270,48 +274,85 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
   },
 
   onButtonChanged: function (evt) {
-    var button = this.mapping[this.data.hand].buttons[evt.detail.id];
-    var buttonMeshes = this.buttonMeshes;
-    var analogValue;
-    if (!button) { return; }
+    // move the button models
+    if (this.isV3) { 
+      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 (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;
+      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);
   },
 
-  onModelLoaded: function (evt) {
-    var controllerObject3D = this.controllerObject3D = evt.detail.model;
-    var buttonMeshes;
+  clickButtons: ['xbutton','ybutton','abutton','bbutton','thumbstick'],
+  onButtonChangedV3: function (evt) {
+    var button = this.mapping[this.data.hand].buttons[evt.detail.id];
+    var buttonObjects = this.buttonObjects;
+    var analogValue;
+    if (!button) { return; }
 
-    if (!this.data.model) { return; }
+    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;
+    }
+  },  
 
-    buttonMeshes = this.buttonMeshes = {};
+  onModelLoaded: function (evt) {
+    if (this.isV3) {
+      this.onModelLoadedV3(evt);
+    } else {
+      var controllerObject3D = this.controllerObject3D = evt.detail.model;
+      var buttonMeshes;
+
+      if (!this.data.model) { return; }
+
+      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.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 (let button in this.buttonMeshes) {
+      this.multiMeshFix(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',
@@ -319,25 +360,132 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
       rayOrigin: this.displayModel[this.data.hand].rayOrigin
     });
   },
+  
+  applyOffset(model) {
+    model.position.copy(this.displayModel[this.data.hand].modelPivotOffset);
+    model.rotation.copy(this.displayModel[this.data.hand].modelPivotRotation);
+  },
+  
+  multiMeshFix(button) {
+    if (!this.buttonMeshes[button]) return;
+    this.buttonMeshes[button].traverse((node) => {
+      if (node.type != "Mesh") return;
+      let originalMaterial = node.material;
+      this.buttonMeshes[button].naturalColor = originalMaterial.color;
+      node.material = new THREE.MeshStandardMaterial(); // {color: originalMaterial.color}
+
+      // preserve details. (not iterable, so we have to use Object.keys.)
+      Object.keys(originalMaterial).forEach(key => {
+        if (originalMaterial[key] !== node.material[key]) {
+          // because A-Frame uses the same single material object for all material nodes, it also uses the
+          // same color. This means they use the same color object--we have to break that link. Other links
+          // likely also exist, but they don't matter to us, because color is the only one we change.
+          node.material[key] = key !== 'color' ? originalMaterial[key] :  originalMaterial[key].clone();
+        }
+      })
+      originalMaterial.dispose();
+    })
+  },
+
+  onModelLoadedV3(evt) {
+    let controllerObject3D = this.controllerObject3D = evt.detail.model;
+    
+    if (!this.data.model) { return; }
+    
+    let buttonObjects = this.buttonObjects = {},
+        buttonMeshes = this.buttonMeshes = {},
+        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),      
+    }
+    
+    let btn1 = this.data.hand === 'left' ? 'x' : 'a',
+        btn2 = this.data.hand === 'left' ? 'y' : 'b' ;
+    
+    buttonMeshes[btn1+"button"] = controllerObject3D.getObjectByName(btn1+'_button');
+    buttonObjects[btn1+"button"] = controllerObject3D.getObjectByName(btn1+'_button_pressed_value');
+    buttonRanges[btn1+"button"] = {
+      min: controllerObject3D.getObjectByName(btn1+'_button_pressed_min'),
+      max: controllerObject3D.getObjectByName(btn1+'_button_pressed_max'),
+    }
 
+    buttonMeshes[btn2+"button"] = controllerObject3D.getObjectByName(btn2+'_button');
+    buttonObjects[btn2+"button"] = controllerObject3D.getObjectByName(btn2+'_button_pressed_value');
+    buttonRanges[btn2+"button"] = {
+      min: controllerObject3D.getObjectByName(btn2+'_button_pressed_min'),
+      max: controllerObject3D.getObjectByName(btn2+'_button_pressed_max'),
+    }    
+    
+    buttonRanges[btn1+"button"].unpressedY = buttonObjects[btn1+"button"].position.y;
+    buttonRanges[btn1+"button"].pressedY = 
+      buttonRanges[btn1+"button"].unpressedY + Math.abs(buttonRanges[btn1+"button"].max.position.y) - Math.abs(buttonRanges[btn1+"button"].min.position.y); 
+    
+    buttonRanges[btn2+"button"].unpressedY = buttonObjects[btn2+"button"].position.y;
+    buttonRanges[btn2+"button"].pressedY = 
+      buttonRanges[btn2+"button"].unpressedY - Math.abs(buttonRanges[btn2+"button"].max.position.y) + Math.abs(buttonRanges[btn2+"button"].min.position.y); 
+  },
+  
   onAxisMoved: function (evt) {
     emitIfAxesChanged(this, this.mapping[this.data.hand].axes, evt);
   },
+  
+  onThumbstickMoved: function(evt) {
+    if (!this.isV3 || !this.buttonMeshes || !this.buttonMeshes.thumbstick) {return;}
+    for (let axis in evt.detail) {
+      this.buttonObjects.thumbstick.rotation[this.axisMap[axis]] = 
+        this.buttonRanges.thumbstick.originalRotation[this.axisMap[axis]] - 
+        (Math.PI*1/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);
+    if (this.data.model) {
+      this.updateButtonModel(buttonName, evtName);
+    }
   },
 
-  updateButtonModel: function (buttonName, state) {
+  updateButtonModel: function (buttonName, evtName) {
     var button;
-    var color = (state === 'up' || state === 'touchend') ? 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];
+    var color = (evtName === 'up' || evtName === 'touchend') ? this.buttonMeshes[buttonName].naturalColor || this.data.buttonColor : evtName === 'touchstart' ? this.data.buttonTouchColor : this.data.buttonHighlightColor;
+    
+    if (this.buttonMeshes && this.buttonMeshes[buttonName]) {
+      button = this.buttonMeshes[buttonName];
       button.material.color.set(color);
       this.rendererSystem.applyColorCorrection(button.material.color);
     }
-  }
+  },
 });

From 15cac45609627b799eb66ef1fa20ce692e381aca Mon Sep 17 00:00:00 2001
From: kyle <me@kylebaker.io>
Date: Sat, 27 Aug 2022 00:45:01 -0600
Subject: [PATCH 02/16] linting fixes

---
 src/components/oculus-touch-controls.js | 144 ++++++++++++------------
 1 file changed, 70 insertions(+), 74 deletions(-)

diff --git a/src/components/oculus-touch-controls.js b/src/components/oculus-touch-controls.js
index 69d6fef72ec..7d2ec05a8c1 100644
--- a/src/components/oculus-touch-controls.js
+++ b/src/components/oculus-touch-controls.js
@@ -172,7 +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;
+    this.triggerEuler = new THREE.Euler();
   },
 
   addEventListeners: function () {
@@ -275,10 +275,9 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
 
   onButtonChanged: function (evt) {
     // move the button models
-    if (this.isV3) { 
+    if (this.isV3) {
       this.onButtonChangedV3(evt);
-    }
-    else {  
+    } else {
       var button = this.mapping[this.data.hand].buttons[evt.detail.id];
       var buttonMeshes = this.buttonMeshes;
       var analogValue;
@@ -300,7 +299,7 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
     this.el.emit(button + 'changed', evt.detail.state);
   },
 
-  clickButtons: ['xbutton','ybutton','abutton','bbutton','thumbstick'],
+  clickButtons: ['xbutton', 'ybutton', 'abutton', 'bbutton', 'thumbstick'],
   onButtonChangedV3: function (evt) {
     var button = this.mapping[this.data.hand].buttons[evt.detail.id];
     var buttonObjects = this.buttonObjects;
@@ -309,22 +308,19 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
 
     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') {
+    } 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;
     }
-    else if (this.clickButtons.includes(button)) {
-      buttonObjects[button].position.y = analogValue === 0 ? 
-        this.buttonRanges[button].unpressedY : this.buttonRanges[button].pressedY;
-    }
-  },  
+  },
 
   onModelLoaded: function (evt) {
     if (this.isV3) {
@@ -352,7 +348,7 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
       this.multiMeshFix(button);
     }
 
-    this.applyOffset(evt.detail.model)
+    this.applyOffset(evt.detail.model);
 
     this.el.emit('controllermodelready', {
       name: 'oculus-touch-controls',
@@ -360,16 +356,16 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
       rayOrigin: this.displayModel[this.data.hand].rayOrigin
     });
   },
-  
-  applyOffset(model) {
+
+  applyOffset (model) {
     model.position.copy(this.displayModel[this.data.hand].modelPivotOffset);
     model.rotation.copy(this.displayModel[this.data.hand].modelPivotRotation);
   },
-  
-  multiMeshFix(button) {
+
+  multiMeshFix (button) {
     if (!this.buttonMeshes[button]) return;
     this.buttonMeshes[button].traverse((node) => {
-      if (node.type != "Mesh") return;
+      if (node.type !== 'Mesh') return;
       let originalMaterial = node.material;
       this.buttonMeshes[button].naturalColor = originalMaterial.color;
       node.material = new THREE.MeshStandardMaterial(); // {color: originalMaterial.color}
@@ -380,37 +376,37 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
           // because A-Frame uses the same single material object for all material nodes, it also uses the
           // same color. This means they use the same color object--we have to break that link. Other links
           // likely also exist, but they don't matter to us, because color is the only one we change.
-          node.material[key] = key !== 'color' ? originalMaterial[key] :  originalMaterial[key].clone();
+          node.material[key] = key !== 'color' ? originalMaterial[key] : originalMaterial[key].clone();
         }
-      })
+      });
       originalMaterial.dispose();
-    })
+    });
   },
 
-  onModelLoadedV3(evt) {
+  onModelLoadedV3 (evt) {
     let controllerObject3D = this.controllerObject3D = evt.detail.model;
-    
+
     if (!this.data.model) { return; }
-    
-    let buttonObjects = this.buttonObjects = {},
-        buttonMeshes = this.buttonMeshes = {},
-        buttonRanges = this.buttonRanges = {};
-    
+
+    let buttonObjects = this.buttonObjects = {};
+    let buttonMeshes = this.buttonMeshes = {};
+    let 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'),
-    }
+      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(),
-    }
+      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);
@@ -419,57 +415,57 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
     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'),
-    }
+      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),      
-    }
-    
-    let btn1 = this.data.hand === 'left' ? 'x' : 'a',
-        btn2 = this.data.hand === 'left' ? 'y' : 'b' ;
-    
-    buttonMeshes[btn1+"button"] = controllerObject3D.getObjectByName(btn1+'_button');
-    buttonObjects[btn1+"button"] = controllerObject3D.getObjectByName(btn1+'_button_pressed_value');
-    buttonRanges[btn1+"button"] = {
-      min: controllerObject3D.getObjectByName(btn1+'_button_pressed_min'),
-      max: controllerObject3D.getObjectByName(btn1+'_button_pressed_max'),
-    }
-
-    buttonMeshes[btn2+"button"] = controllerObject3D.getObjectByName(btn2+'_button');
-    buttonObjects[btn2+"button"] = controllerObject3D.getObjectByName(btn2+'_button_pressed_value');
-    buttonRanges[btn2+"button"] = {
-      min: controllerObject3D.getObjectByName(btn2+'_button_pressed_min'),
-      max: controllerObject3D.getObjectByName(btn2+'_button_pressed_max'),
-    }    
-    
-    buttonRanges[btn1+"button"].unpressedY = buttonObjects[btn1+"button"].position.y;
-    buttonRanges[btn1+"button"].pressedY = 
-      buttonRanges[btn1+"button"].unpressedY + Math.abs(buttonRanges[btn1+"button"].max.position.y) - Math.abs(buttonRanges[btn1+"button"].min.position.y); 
-    
-    buttonRanges[btn2+"button"].unpressedY = buttonObjects[btn2+"button"].position.y;
-    buttonRanges[btn2+"button"].pressedY = 
-      buttonRanges[btn2+"button"].unpressedY - Math.abs(buttonRanges[btn2+"button"].max.position.y) + Math.abs(buttonRanges[btn2+"button"].min.position.y); 
+      z: Math.abs(buttonRanges.trigger.max.rotation.z) - Math.abs(buttonRanges.trigger.min.rotation.z)
+    };
+
+    let btn1 = this.data.hand === 'left' ? 'x' : 'a';
+    let btn2 = this.data.hand === 'left' ? 'y' : 'b';
+
+    buttonMeshes[btn1 + 'button'] = controllerObject3D.getObjectByName(btn1 + '_button');
+    buttonObjects[btn1 + 'button'] = controllerObject3D.getObjectByName(btn1 + '_button_pressed_value');
+    buttonRanges[btn1 + 'button'] = {
+      min: controllerObject3D.getObjectByName(btn1 + '_button_pressed_min'),
+      max: controllerObject3D.getObjectByName(btn1 + '_button_pressed_max')
+    };
+
+    buttonMeshes[btn2 + 'button'] = controllerObject3D.getObjectByName(btn2 + '_button');
+    buttonObjects[btn2 + 'button'] = controllerObject3D.getObjectByName(btn2 + '_button_pressed_value');
+    buttonRanges[btn2 + 'button'] = {
+      min: controllerObject3D.getObjectByName(btn2 + '_button_pressed_min'),
+      max: controllerObject3D.getObjectByName(btn2 + '_button_pressed_max')
+    };
+
+    buttonRanges[btn1 + 'button'].unpressedY = buttonObjects[btn1 + 'button'].position.y;
+    buttonRanges[btn1 + 'button'].pressedY =
+      buttonRanges[btn1 + 'button'].unpressedY + Math.abs(buttonRanges[btn1 + 'button'].max.position.y) - Math.abs(buttonRanges[btn1 + 'button'].min.position.y);
+
+    buttonRanges[btn2 + 'button'].unpressedY = buttonObjects[btn2 + 'button'].position.y;
+    buttonRanges[btn2 + 'button'].pressedY =
+      buttonRanges[btn2 + 'button'].unpressedY - Math.abs(buttonRanges[btn2 + 'button'].max.position.y) + Math.abs(buttonRanges[btn2 + 'button'].min.position.y);
   },
-  
+
   onAxisMoved: function (evt) {
     emitIfAxesChanged(this, this.mapping[this.data.hand].axes, evt);
   },
-  
-  onThumbstickMoved: function(evt) {
-    if (!this.isV3 || !this.buttonMeshes || !this.buttonMeshes.thumbstick) {return;}
+
+  onThumbstickMoved: function (evt) {
+    if (!this.isV3 || !this.buttonMeshes || !this.buttonMeshes.thumbstick) { return; }
     for (let axis in evt.detail) {
-      this.buttonObjects.thumbstick.rotation[this.axisMap[axis]] = 
-        this.buttonRanges.thumbstick.originalRotation[this.axisMap[axis]] - 
-        (Math.PI*1/8) *
-        evt.detail[axis] * 
+      this.buttonObjects.thumbstick.rotation[this.axisMap[axis]] =
+        this.buttonRanges.thumbstick.originalRotation[this.axisMap[axis]] -
+        (Math.PI * 1 / 8) *
+        evt.detail[axis] *
         (axis === 'y' || this.data.hand === 'right' ? -1 : 1);
     }
   },
   axisMap: {
     y: 'x',
-    x: 'z',
+    x: 'z'
   },
 
   updateModel: function (buttonName, evtName) {
@@ -481,11 +477,11 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
   updateButtonModel: function (buttonName, evtName) {
     var button;
     var color = (evtName === 'up' || evtName === 'touchend') ? this.buttonMeshes[buttonName].naturalColor || this.data.buttonColor : evtName === 'touchstart' ? this.data.buttonTouchColor : this.data.buttonHighlightColor;
-    
+
     if (this.buttonMeshes && this.buttonMeshes[buttonName]) {
       button = this.buttonMeshes[buttonName];
       button.material.color.set(color);
       this.rendererSystem.applyColorCorrection(button.material.color);
     }
-  },
+  }
 });

From 9f92db2e3d8fc8b5453282bc307ba8ec1141dd9e Mon Sep 17 00:00:00 2001
From: kyle <me@kylebaker.io>
Date: Sat, 27 Aug 2022 11:56:35 -0600
Subject: [PATCH 03/16] minor cleanup

---
 src/components/oculus-touch-controls.js | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/oculus-touch-controls.js b/src/components/oculus-touch-controls.js
index 7d2ec05a8c1..8a48fe649cd 100644
--- a/src/components/oculus-touch-controls.js
+++ b/src/components/oculus-touch-controls.js
@@ -274,7 +274,7 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
   },
 
   onButtonChanged: function (evt) {
-    // move the button models
+    // move the button meshes
     if (this.isV3) {
       this.onButtonChangedV3(evt);
     } else {
@@ -368,9 +368,9 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
       if (node.type !== 'Mesh') return;
       let originalMaterial = node.material;
       this.buttonMeshes[button].naturalColor = originalMaterial.color;
-      node.material = new THREE.MeshStandardMaterial(); // {color: originalMaterial.color}
+      node.material = new THREE.MeshStandardMaterial();
 
-      // preserve details. (not iterable, so we have to use Object.keys.)
+      // preserve details; not iterable, so we have to use Object.keys()
       Object.keys(originalMaterial).forEach(key => {
         if (originalMaterial[key] !== node.material[key]) {
           // because A-Frame uses the same single material object for all material nodes, it also uses the
@@ -458,7 +458,7 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
     for (let axis in evt.detail) {
       this.buttonObjects.thumbstick.rotation[this.axisMap[axis]] =
         this.buttonRanges.thumbstick.originalRotation[this.axisMap[axis]] -
-        (Math.PI * 1 / 8) *
+        (Math.PI / 8) *
         evt.detail[axis] *
         (axis === 'y' || this.data.hand === 'right' ? -1 : 1);
     }
@@ -477,9 +477,10 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
   updateButtonModel: function (buttonName, evtName) {
     var button;
     var color = (evtName === 'up' || evtName === 'touchend') ? this.buttonMeshes[buttonName].naturalColor || this.data.buttonColor : evtName === 'touchstart' ? this.data.buttonTouchColor : this.data.buttonHighlightColor;
+    var buttonMeshes = this.buttonMeshes;
 
-    if (this.buttonMeshes && this.buttonMeshes[buttonName]) {
-      button = this.buttonMeshes[buttonName];
+    if (buttonMeshes && buttonMeshes[buttonName]) {
+      button = buttonMeshes[buttonName];
       button.material.color.set(color);
       this.rendererSystem.applyColorCorrection(button.material.color);
     }

From c0cbd7f6cada35818f739ba695ce77df9395153f Mon Sep 17 00:00:00 2001
From: kyle <me@kylebaker.io>
Date: Sun, 28 Aug 2022 21:27:28 -0600
Subject: [PATCH 04/16] diego request es5 changes

---
 src/components/oculus-touch-controls.js | 58 +++++++++++++------------
 1 file changed, 30 insertions(+), 28 deletions(-)

diff --git a/src/components/oculus-touch-controls.js b/src/components/oculus-touch-controls.js
index 8a48fe649cd..63f904ba636 100644
--- a/src/components/oculus-touch-controls.js
+++ b/src/components/oculus-touch-controls.js
@@ -344,7 +344,7 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
       buttonMeshes.bbutton = controllerObject3D.getObjectByName('buttonB');
     }
 
-    for (let button in this.buttonMeshes) {
+    for (var button in this.buttonMeshes) {
       this.multiMeshFix(button);
     }
 
@@ -357,16 +357,16 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
     });
   },
 
-  applyOffset (model) {
+  applyOffset: function (model) {
     model.position.copy(this.displayModel[this.data.hand].modelPivotOffset);
     model.rotation.copy(this.displayModel[this.data.hand].modelPivotRotation);
   },
 
-  multiMeshFix (button) {
+  multiMeshFix: function (button) {
     if (!this.buttonMeshes[button]) return;
     this.buttonMeshes[button].traverse((node) => {
       if (node.type !== 'Mesh') return;
-      let originalMaterial = node.material;
+      var originalMaterial = node.material;
       this.buttonMeshes[button].naturalColor = originalMaterial.color;
       node.material = new THREE.MeshStandardMaterial();
 
@@ -383,14 +383,14 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
     });
   },
 
-  onModelLoadedV3 (evt) {
-    let controllerObject3D = this.controllerObject3D = evt.detail.model;
+  onModelLoadedV3: function (evt) {
+    var controllerObject3D = this.controllerObject3D = evt.detail.model;
 
     if (!this.data.model) { return; }
 
-    let buttonObjects = this.buttonObjects = {};
-    let buttonMeshes = this.buttonMeshes = {};
-    let buttonRanges = this.buttonRanges = {};
+    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');
@@ -423,30 +423,32 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
       z: Math.abs(buttonRanges.trigger.max.rotation.z) - Math.abs(buttonRanges.trigger.min.rotation.z)
     };
 
-    let btn1 = this.data.hand === 'left' ? 'x' : 'a';
-    let btn2 = this.data.hand === 'left' ? 'y' : 'b';
+    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[btn1 + 'button'] = controllerObject3D.getObjectByName(btn1 + '_button');
-    buttonObjects[btn1 + 'button'] = controllerObject3D.getObjectByName(btn1 + '_button_pressed_value');
-    buttonRanges[btn1 + 'button'] = {
-      min: controllerObject3D.getObjectByName(btn1 + '_button_pressed_min'),
-      max: controllerObject3D.getObjectByName(btn1 + '_button_pressed_max')
+    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[btn2 + 'button'] = controllerObject3D.getObjectByName(btn2 + '_button');
-    buttonObjects[btn2 + 'button'] = controllerObject3D.getObjectByName(btn2 + '_button_pressed_value');
-    buttonRanges[btn2 + 'button'] = {
-      min: controllerObject3D.getObjectByName(btn2 + '_button_pressed_min'),
-      max: controllerObject3D.getObjectByName(btn2 + '_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[btn1 + 'button'].unpressedY = buttonObjects[btn1 + 'button'].position.y;
-    buttonRanges[btn1 + 'button'].pressedY =
-      buttonRanges[btn1 + 'button'].unpressedY + Math.abs(buttonRanges[btn1 + 'button'].max.position.y) - Math.abs(buttonRanges[btn1 + 'button'].min.position.y);
+    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[btn2 + 'button'].unpressedY = buttonObjects[btn2 + 'button'].position.y;
-    buttonRanges[btn2 + 'button'].pressedY =
-      buttonRanges[btn2 + 'button'].unpressedY - Math.abs(buttonRanges[btn2 + 'button'].max.position.y) + Math.abs(buttonRanges[btn2 + 'button'].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) {
@@ -455,7 +457,7 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
 
   onThumbstickMoved: function (evt) {
     if (!this.isV3 || !this.buttonMeshes || !this.buttonMeshes.thumbstick) { return; }
-    for (let axis in evt.detail) {
+    for (var axis in evt.detail) {
       this.buttonObjects.thumbstick.rotation[this.axisMap[axis]] =
         this.buttonRanges.thumbstick.originalRotation[this.axisMap[axis]] -
         (Math.PI / 8) *

From 5beffda4aef1bc6dc718eeebf3d4111195eda6fb Mon Sep 17 00:00:00 2001
From: kyle <me@kylebaker.io>
Date: Tue, 30 Aug 2022 12:38:01 -0600
Subject: [PATCH 05/16] linter

---
 src/components/oculus-touch-controls.js | 18 ++++--------------
 1 file changed, 4 insertions(+), 14 deletions(-)

diff --git a/src/components/oculus-touch-controls.js b/src/components/oculus-touch-controls.js
index 63f904ba636..eb39f1d24b3 100644
--- a/src/components/oculus-touch-controls.js
+++ b/src/components/oculus-touch-controls.js
@@ -366,20 +366,10 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
     if (!this.buttonMeshes[button]) return;
     this.buttonMeshes[button].traverse((node) => {
       if (node.type !== 'Mesh') return;
-      var originalMaterial = node.material;
-      this.buttonMeshes[button].naturalColor = originalMaterial.color;
-      node.material = new THREE.MeshStandardMaterial();
-
-      // preserve details; not iterable, so we have to use Object.keys()
-      Object.keys(originalMaterial).forEach(key => {
-        if (originalMaterial[key] !== node.material[key]) {
-          // because A-Frame uses the same single material object for all material nodes, it also uses the
-          // same color. This means they use the same color object--we have to break that link. Other links
-          // likely also exist, but they don't matter to us, because color is the only one we change.
-          node.material[key] = key !== 'color' ? originalMaterial[key] : originalMaterial[key].clone();
-        }
-      });
-      originalMaterial.dispose();
+      let newMaterial = node.material.clone();
+      this.buttonMeshes[button].naturalColor = node.material.color;
+      node.material.dispose();
+      node.material = newMaterial;
     });
   },
 

From eaa42d59a6f6f74dd520f1354f08eb60b2759570 Mon Sep 17 00:00:00 2001
From: kyle <me@kylebaker.io>
Date: Tue, 30 Aug 2022 12:57:11 -0600
Subject: [PATCH 06/16] add symmetrical comment to match the comment for
 onButtonChanged

---
 src/components/oculus-touch-controls.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/oculus-touch-controls.js b/src/components/oculus-touch-controls.js
index eb39f1d24b3..42f2a136d9c 100644
--- a/src/components/oculus-touch-controls.js
+++ b/src/components/oculus-touch-controls.js
@@ -467,6 +467,7 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
   },
 
   updateButtonModel: function (buttonName, evtName) {
+    // update the button mesh colors
     var button;
     var color = (evtName === 'up' || evtName === 'touchend') ? this.buttonMeshes[buttonName].naturalColor || this.data.buttonColor : evtName === 'touchstart' ? this.data.buttonTouchColor : this.data.buttonHighlightColor;
     var buttonMeshes = this.buttonMeshes;

From c16ad9f313671886954589e43ba016858b56ef1e Mon Sep 17 00:00:00 2001
From: kyle <me@kylebaker.io>
Date: Wed, 7 Sep 2022 11:02:35 -0600
Subject: [PATCH 07/16] requested fixes

---
 src/components/oculus-touch-controls.js | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/components/oculus-touch-controls.js b/src/components/oculus-touch-controls.js
index 42f2a136d9c..44ec535d95a 100644
--- a/src/components/oculus-touch-controls.js
+++ b/src/components/oculus-touch-controls.js
@@ -242,7 +242,7 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
       }
     }
     var modelUrl = this.displayModel[data.hand].modelUrl;
-    this.isV3 = this.displayModel === CONTROLLER_PROPERTIES['oculus-touch-v3'];
+    this.isOculusTouchV3 = this.displayModel === CONTROLLER_PROPERTIES['oculus-touch-v3'];
     this.el.setAttribute('gltf-model', modelUrl);
   },
 
@@ -275,7 +275,7 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
 
   onButtonChanged: function (evt) {
     // move the button meshes
-    if (this.isV3) {
+    if (this.isOculusTouchV3) {
       this.onButtonChangedV3(evt);
     } else {
       var button = this.mapping[this.data.hand].buttons[evt.detail.id];
@@ -323,8 +323,8 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
   },
 
   onModelLoaded: function (evt) {
-    if (this.isV3) {
-      this.onModelLoadedV3(evt);
+    if (this.isOculusTouchV3) {
+      this.onOculusTouchV3ModelLoaded(evt);
     } else {
       var controllerObject3D = this.controllerObject3D = evt.detail.model;
       var buttonMeshes;
@@ -364,16 +364,17 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
 
   multiMeshFix: function (button) {
     if (!this.buttonMeshes[button]) return;
-    this.buttonMeshes[button].traverse((node) => {
+    var self = this;
+    this.buttonMeshes[button].traverse(function (node) {
       if (node.type !== 'Mesh') return;
       let newMaterial = node.material.clone();
-      this.buttonMeshes[button].naturalColor = node.material.color;
+      self.buttonMeshes[button].naturalColor = node.material.color;
       node.material.dispose();
       node.material = newMaterial;
     });
   },
 
-  onModelLoadedV3: function (evt) {
+  onOculusTouchV3ModelLoaded: function (evt) {
     var controllerObject3D = this.controllerObject3D = evt.detail.model;
 
     if (!this.data.model) { return; }
@@ -446,7 +447,7 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
   },
 
   onThumbstickMoved: function (evt) {
-    if (!this.isV3 || !this.buttonMeshes || !this.buttonMeshes.thumbstick) { return; }
+    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]] -

From a350cab4623af5d51ede1854260688916f45b227 Mon Sep 17 00:00:00 2001
From: kyle <me@kylebaker.io>
Date: Sat, 10 Sep 2022 17:54:39 -0600
Subject: [PATCH 08/16] most recent requested changes

---
 src/components/oculus-touch-controls.js | 43 +++++++++++++------------
 1 file changed, 23 insertions(+), 20 deletions(-)

diff --git a/src/components/oculus-touch-controls.js b/src/components/oculus-touch-controls.js
index 44ec535d95a..8776e6fd4c9 100644
--- a/src/components/oculus-touch-controls.js
+++ b/src/components/oculus-touch-controls.js
@@ -323,14 +323,15 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
   },
 
   onModelLoaded: function (evt) {
+    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;
 
-      if (!this.data.model) { return; }
-
       buttonMeshes = this.buttonMeshes = {};
 
       buttonMeshes.grip = controllerObject3D.getObjectByName('buttonHand');
@@ -345,7 +346,7 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
     }
 
     for (var button in this.buttonMeshes) {
-      this.multiMeshFix(button);
+      cloneMaterialToTHREE(this.buttonMeshes[button]);
     }
 
     this.applyOffset(evt.detail.model);
@@ -362,23 +363,9 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
     model.rotation.copy(this.displayModel[this.data.hand].modelPivotRotation);
   },
 
-  multiMeshFix: function (button) {
-    if (!this.buttonMeshes[button]) return;
-    var self = this;
-    this.buttonMeshes[button].traverse(function (node) {
-      if (node.type !== 'Mesh') return;
-      let newMaterial = node.material.clone();
-      self.buttonMeshes[button].naturalColor = node.material.color;
-      node.material.dispose();
-      node.material = newMaterial;
-    });
-  },
-
   onOculusTouchV3ModelLoaded: function (evt) {
     var controllerObject3D = this.controllerObject3D = evt.detail.model;
 
-    if (!this.data.model) { return; }
-
     var buttonObjects = this.buttonObjects = {};
     var buttonMeshes = this.buttonMeshes = {};
     var buttonRanges = this.buttonRanges = {};
@@ -462,9 +449,8 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
   },
 
   updateModel: function (buttonName, evtName) {
-    if (this.data.model) {
-      this.updateButtonModel(buttonName, evtName);
-    }
+    if (!this.data.model) { return; }
+    this.updateButtonModel(buttonName, evtName);
   },
 
   updateButtonModel: function (buttonName, evtName) {
@@ -480,3 +466,20 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
     }
   }
 });
+
+/*
+  A-Frame's material component makes a single unified shared material for all meshes.
+  In order to be able to color individual buttons, we need to give each sub-mesh its own
+  THREE material. Without this, changing the color on any individual button mesh changes
+  the color on every button mesh.
+*/
+
+function cloneMaterialToTHREE (object3d) {
+  object3d.traverse(function (node) {
+    if (node.type !== 'Mesh') return;
+    let newMaterial = node.material.clone();
+    object3d.naturalColor = node.material.color;
+    node.material.dispose();
+    node.material = newMaterial;
+  });
+}

From f74e3445c6d6ed438e297345f7eb99cc45c58e56 Mon Sep 17 00:00:00 2001
From: kyle <me@kylebaker.io>
Date: Sat, 10 Sep 2022 18:41:21 -0600
Subject: [PATCH 09/16] adding removed condition

---
 src/components/oculus-touch-controls.js | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/components/oculus-touch-controls.js b/src/components/oculus-touch-controls.js
index 8776e6fd4c9..3ea72f09428 100644
--- a/src/components/oculus-touch-controls.js
+++ b/src/components/oculus-touch-controls.js
@@ -346,7 +346,9 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
     }
 
     for (var button in this.buttonMeshes) {
-      cloneMaterialToTHREE(this.buttonMeshes[button]);
+      if (this.buttonMeshes[button]) {
+        cloneMaterialToTHREE(this.buttonMeshes[button]);
+      }
     }
 
     this.applyOffset(evt.detail.model);
@@ -467,12 +469,12 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
   }
 });
 
-/*
-  A-Frame's material component makes a single unified shared material for all meshes.
-  In order to be able to color individual buttons, we need to give each sub-mesh its own
-  THREE material. Without this, changing the color on any individual button mesh changes
-  the color on every button mesh.
-*/
+/**
+ * A-Frame's material component makes a single unified shared material for all meshes.
+ * In order to be able to color individual buttons, we need to give each sub-mesh its own
+ * THREE material. Without this, changing the color on any individual button mesh changes
+ * the color on every button mesh.
+ */
 
 function cloneMaterialToTHREE (object3d) {
   object3d.traverse(function (node) {

From b5f37fa9a291b381d60441fcb0d421cd8ee57683 Mon Sep 17 00:00:00 2001
From: kyle <me@kylebaker.io>
Date: Mon, 12 Sep 2022 19:49:16 -0600
Subject: [PATCH 10/16] rename natural to original as requested

---
 src/components/oculus-touch-controls.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/oculus-touch-controls.js b/src/components/oculus-touch-controls.js
index 3ea72f09428..c88fe642fe9 100644
--- a/src/components/oculus-touch-controls.js
+++ b/src/components/oculus-touch-controls.js
@@ -458,7 +458,7 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
   updateButtonModel: function (buttonName, evtName) {
     // update the button mesh colors
     var button;
-    var color = (evtName === 'up' || evtName === 'touchend') ? this.buttonMeshes[buttonName].naturalColor || this.data.buttonColor : evtName === 'touchstart' ? this.data.buttonTouchColor : this.data.buttonHighlightColor;
+    var color = (evtName === 'up' || evtName === 'touchend') ? this.buttonMeshes[buttonName].originalColor || this.data.buttonColor : evtName === 'touchstart' ? this.data.buttonTouchColor : this.data.buttonHighlightColor;
     var buttonMeshes = this.buttonMeshes;
 
     if (buttonMeshes && buttonMeshes[buttonName]) {
@@ -480,7 +480,7 @@ function cloneMaterialToTHREE (object3d) {
   object3d.traverse(function (node) {
     if (node.type !== 'Mesh') return;
     let newMaterial = node.material.clone();
-    object3d.naturalColor = node.material.color;
+    object3d.originalColor = node.material.color;
     node.material.dispose();
     node.material = newMaterial;
   });

From a504d40a0f8f4bc11bf3b7793fd12c3f43c09e99 Mon Sep 17 00:00:00 2001
From: kyle <me@kylebaker.io>
Date: Mon, 12 Sep 2022 19:51:43 -0600
Subject: [PATCH 11/16] add a word to a comment

---
 src/components/oculus-touch-controls.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/oculus-touch-controls.js b/src/components/oculus-touch-controls.js
index c88fe642fe9..5a5ee447258 100644
--- a/src/components/oculus-touch-controls.js
+++ b/src/components/oculus-touch-controls.js
@@ -470,7 +470,7 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
 });
 
 /**
- * A-Frame's material component makes a single unified shared material for all meshes.
+ * A-Frame's material component makes a single unified shared material for all child meshes.
  * In order to be able to color individual buttons, we need to give each sub-mesh its own
  * THREE material. Without this, changing the color on any individual button mesh changes
  * the color on every button mesh.

From 536b354540dd2cb43ffca59c403f8780c628c6a7 Mon Sep 17 00:00:00 2001
From: kyle <me@kylebaker.io>
Date: Tue, 13 Sep 2022 15:39:52 -0600
Subject: [PATCH 12/16] requested changes to comments

---
 src/components/oculus-touch-controls.js | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/components/oculus-touch-controls.js b/src/components/oculus-touch-controls.js
index 5a5ee447258..165a9f23a91 100644
--- a/src/components/oculus-touch-controls.js
+++ b/src/components/oculus-touch-controls.js
@@ -347,7 +347,7 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
 
     for (var button in this.buttonMeshes) {
       if (this.buttonMeshes[button]) {
-        cloneMaterialToTHREE(this.buttonMeshes[button]);
+        cloneMeshMaterials(this.buttonMeshes[button]);
       }
     }
 
@@ -470,13 +470,10 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
 });
 
 /**
- * A-Frame's material component makes a single unified shared material for all child meshes.
- * In order to be able to color individual buttons, we need to give each sub-mesh its own
- * THREE material. Without this, changing the color on any individual button mesh changes
- * the color on every button mesh.
+ * 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 cloneMaterialToTHREE (object3d) {
+function cloneMeshMaterials (object3d) {
   object3d.traverse(function (node) {
     if (node.type !== 'Mesh') return;
     let newMaterial = node.material.clone();

From eac05337c99893ab410b45087af6dca21d9ab8aa Mon Sep 17 00:00:00 2001
From: kyle <me@kylebaker.io>
Date: Wed, 14 Sep 2022 15:35:59 -0600
Subject: [PATCH 13/16] undo argument name correction as requested

---
 src/components/oculus-touch-controls.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/oculus-touch-controls.js b/src/components/oculus-touch-controls.js
index 165a9f23a91..e703f273b4c 100644
--- a/src/components/oculus-touch-controls.js
+++ b/src/components/oculus-touch-controls.js
@@ -455,10 +455,10 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
     this.updateButtonModel(buttonName, evtName);
   },
 
-  updateButtonModel: function (buttonName, evtName) {
+  updateButtonModel: function (buttonName, state) {
     // update the button mesh colors
     var button;
-    var color = (evtName === 'up' || evtName === 'touchend') ? this.buttonMeshes[buttonName].originalColor || this.data.buttonColor : evtName === '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 (buttonMeshes && buttonMeshes[buttonName]) {

From f76958b51da376bdd7ad8613e7e56e0b0b7b2401 Mon Sep 17 00:00:00 2001
From: Diego Marcos Segura <diego.marcos@gmail.com>
Date: Wed, 14 Sep 2022 17:09:00 -0700
Subject: [PATCH 14/16] Align comment with block

---
 src/components/oculus-touch-controls.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/oculus-touch-controls.js b/src/components/oculus-touch-controls.js
index e703f273b4c..8971bb46271 100644
--- a/src/components/oculus-touch-controls.js
+++ b/src/components/oculus-touch-controls.js
@@ -227,14 +227,13 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
     // If the developer is asking for auto-detection, use the retrieved displayName to identify the specific unit.
     if (data.controllerType === 'auto') {
       var trackedControlsSystem = this.el.sceneEl.systems['tracked-controls-webvr'];
+      // WebVR
       if (trackedControlsSystem && trackedControlsSystem.vrDisplay) {
-        // WebVR
         var displayName = trackedControlsSystem.vrDisplay.displayName;
         if (/^Oculus Quest$/.test(displayName)) {
           this.displayModel = CONTROLLER_PROPERTIES['oculus-touch-v2'];
         }
-      } else {
-        // WebXR
+      } else { // WebXR
         controllerId = CONTROLLER_DEFAULT;
         controllerId = controller.profiles.indexOf('oculus-touch-v2') !== -1 ? 'oculus-touch-v2' : controllerId;
         controllerId = controller.profiles.indexOf('oculus-touch-v3') !== -1 ? 'oculus-touch-v3' : controllerId;

From 73a235d8eea63ff40769829124da6b108f6d9685 Mon Sep 17 00:00:00 2001
From: Diego Marcos Segura <diego.marcos@gmail.com>
Date: Wed, 14 Sep 2022 17:09:44 -0700
Subject: [PATCH 15/16] Change function name

---
 src/components/oculus-touch-controls.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/oculus-touch-controls.js b/src/components/oculus-touch-controls.js
index 8971bb46271..b8a6c65c814 100644
--- a/src/components/oculus-touch-controls.js
+++ b/src/components/oculus-touch-controls.js
@@ -346,7 +346,7 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
 
     for (var button in this.buttonMeshes) {
       if (this.buttonMeshes[button]) {
-        cloneMeshMaterials(this.buttonMeshes[button]);
+        cloneMeshMaterial(this.buttonMeshes[button]);
       }
     }
 
@@ -472,7 +472,7 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
  * 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 cloneMeshMaterials (object3d) {
+function cloneMeshMaterial (object3d) {
   object3d.traverse(function (node) {
     if (node.type !== 'Mesh') return;
     let newMaterial = node.material.clone();

From a384aa4d2ed166971ae51bb4c80cacf0d322cfc9 Mon Sep 17 00:00:00 2001
From: Diego Marcos Segura <diego.marcos@gmail.com>
Date: Wed, 14 Sep 2022 17:14:14 -0700
Subject: [PATCH 16/16] Add missing comment

---
 src/components/oculus-touch-controls.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/oculus-touch-controls.js b/src/components/oculus-touch-controls.js
index b8a6c65c814..25614ddf375 100644
--- a/src/components/oculus-touch-controls.js
+++ b/src/components/oculus-touch-controls.js
@@ -225,6 +225,7 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
     // 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.
+    // This only works for WebVR currently.
     if (data.controllerType === 'auto') {
       var trackedControlsSystem = this.el.sceneEl.systems['tracked-controls-webvr'];
       // WebVR