diffrentiate between type and id of a button

src/Cameras/XR/features/WebXRControllerTeleportation.ts

@@ -318,7 +318,7 @@ export class WebXRMotionControllerTeleportation extends WebXRAbstractFeature {
         // motion controller support
         xrController.onMotionControllerProfileLoaded.addOnce(() => {
             if (xrController.motionController) {
-                const movementController = xrController.motionController.getComponent(WebXRControllerComponent.THUMBSTICK) || xrController.motionController.getComponent(WebXRControllerComponent.TOUCHPAD);
+                const movementController = xrController.motionController.getComponentOfType(WebXRControllerComponent.THUMBSTICK) || xrController.motionController.getComponentOfType(WebXRControllerComponent.TOUCHPAD);
                 if (!movementController || this._options.useMainComponentOnly) {
                     // use trigger to move on long press
                     const mainComponent = xrController.motionController.getMainComponent();

src/Cameras/XR/motionController/webXRAbstractController.ts

@@ -297,7 +297,7 @@ export abstract class WebXRAbstractMotionController implements IDisposable {
      * @param xrFrame the current xr frame to use and update the model
      */
     public updateFromXRFrame(xrFrame: XRFrame): void {
-        this.getComponentTypes().forEach((id) => this.getComponent(id).update(this.gamepadObject));
+        this.getComponentIds().forEach((id) => this.getComponent(id).update(this.gamepadObject));
         this.updateModel(xrFrame);
     }
 
@@ -305,7 +305,7 @@ export abstract class WebXRAbstractMotionController implements IDisposable {
      * Get the list of components available in this motion controller
      * @returns an array of strings correlating to available components
      */
-    public getComponentTypes(): string[] {
+    public getComponentIds(): string[] {
         return Object.keys(this.components);
     }
 
@@ -327,6 +327,24 @@ export abstract class WebXRAbstractMotionController implements IDisposable {
     }
 
     /**
+     * Get the first component of specific type
+     * @param type type of component to find
+     * @return a controller component or null if not found
+     */
+    public getComponentOfType(type: MotionControllerComponentType): Nullable<WebXRControllerComponent> {
+        return this.getAllComponentsOfType(type)[0] || null;
+    }
+
+    /**
+     * Returns all components of specific type
+     * @param type the type to search for
+     * @return an array of components with this type
+     */
+    public getAllComponentsOfType(type: MotionControllerComponentType): WebXRControllerComponent[] {
+        return this.getComponentIds().map((id) => this.components[id]).filter((component) => component.type === type);
+    }
+
+    /**
      * Loads the model correlating to this controller
      * When the mesh is loaded, the onModelLoadedObservable will be triggered
      * @returns A promise fulfilled with the result of the model loading
@@ -461,7 +479,7 @@ export abstract class WebXRAbstractMotionController implements IDisposable {
      * Dispose this controller, the model mesh and all its components
      */
     public dispose(): void {
-        this.getComponentTypes().forEach((id) => this.getComponent(id).dispose());
+        this.getComponentIds().forEach((id) => this.getComponent(id).dispose());
         if (this.rootMesh) {
             this.rootMesh.dispose();
         }

src/Cameras/XR/motionController/webXRControllerComponent.ts

@@ -59,19 +59,23 @@ export class WebXRControllerComponent implements IDisposable {
     /**
      * Thumbstick component type
      */
-    public static THUMBSTICK = "xr-standard-thumbstick";
+    public static THUMBSTICK: MotionControllerComponentType = "thumbstick";
     /**
      * Touchpad component type
      */
-    public static TOUCHPAD = "xr-standard-touchpad";
+    public static TOUCHPAD: MotionControllerComponentType = "touchpad";
     /**
      * trigger component type
      */
-    public static TRIGGER = "xr-standard-trigger";
+    public static TRIGGER: MotionControllerComponentType = "trigger";
     /**
      * squeeze component type
      */
-    public static SQUEEZE = "xr-standard-squeeze";
+    public static SQUEEZE: MotionControllerComponentType = "squeeze";
+    /**
+     * squeeze component type
+     */
+    public static BUTTON: MotionControllerComponentType = "button";
     /**
      * Observers registered here will be triggered when the state of a button changes
      * State change is either pressed / touched / value

src/Cameras/XR/motionController/webXRHTCViveMotionController.ts

@@ -40,14 +40,14 @@ export class WebXRHTCViveMotionController extends WebXRAbstractMotionController
     }
 
     protected _processLoadedModel(_meshes: AbstractMesh[]): void {
-        this.getComponentTypes().forEach((type) => {
-            const comp = type && this.getComponent(type);
+        this.getComponentIds().forEach((id) => {
+            const comp = id && this.getComponent(id);
             if (comp) {
                 comp.onButtonStateChanged.add((component) => {
 
                     if (!this.rootMesh || this.disableAnimation) { return; }
 
-                    switch (type) {
+                    switch (id) {
                         case "xr-standard-trigger":
                             (<AbstractMesh>(this._modelRootNode.getChildren()[6])).rotation.x = -component.value * 0.15;
                             return;

src/Cameras/XR/motionController/webXRMicrosoftMixedRealityController.ts

@@ -93,15 +93,15 @@ export class WebXRMicrosoftMixedRealityController extends WebXRAbstractMotionCon
         if (!this.rootMesh) { return; }
 
         // Button Meshes
-        this.getComponentTypes().forEach((buttonName, i) => {
+        this.getComponentIds().forEach((id, i) => {
             if (this.disableAnimation) {
                 return;
             }
-            if (buttonName && this.rootMesh) {
-                const buttonMap = (<any>this._mapping.buttons)[buttonName];
+            if (id && this.rootMesh) {
+                const buttonMap = (<any>this._mapping.buttons)[id];
                 const buttonMeshName = buttonMap.rootNodeName;
                 if (!buttonMeshName) {
-                    Logger.Log('Skipping unknown button at index: ' + i + ' with mapped name: ' + buttonName);
+                    Logger.Log('Skipping unknown button at index: ' + i + ' with mapped name: ' + id);
                     return;
                 }
 
@@ -116,7 +116,7 @@ export class WebXRMicrosoftMixedRealityController extends WebXRAbstractMotionCon
                 buttonMap.unpressedMesh = this._getImmediateChildByName(buttonMesh, this._mapping.defaultButton.unpressedNodeName);
 
                 if (buttonMap.valueMesh && buttonMap.pressedMesh && buttonMap.unpressedMesh) {
-                    const comp = this.getComponent(buttonName);
+                    const comp = this.getComponent(id);
                     if (comp) {
                         comp.onButtonStateChanged.add((component) => {
                             this._lerpTransform(buttonMap, component.value);
@@ -131,15 +131,15 @@ export class WebXRMicrosoftMixedRealityController extends WebXRAbstractMotionCon
         });
 
         // Axis Meshes
-        this.getComponentTypes().forEach((type, i) => {
-            const comp = this.getComponent(type);
+        this.getComponentIds().forEach((id, i) => {
+            const comp = this.getComponent(id);
             if (!comp.isAxes()) {
                 return;
             }
 
             ["x-axis", "y-axis"].forEach((axis) => {
                 if (!this.rootMesh) { return; }
-                const axisMap = (<any>this._mapping.axes)[type][axis];
+                const axisMap = (<any>this._mapping.axes)[id][axis];
 
                 var axisMesh = this._getChildByName(this.rootMesh, axisMap.rootNodeName);
                 if (!axisMesh) {

src/Cameras/XR/motionController/webXROculusTouchMotionController.ts

@@ -50,14 +50,14 @@ export class WebXROculusTouchMotionController extends WebXRAbstractMotionControl
         const isQuest = this._isQuest();
         const triggerDirection = this.handness === 'right' ? -1 : 1;
 
-        this.getComponentTypes().forEach((buttonName) => {
-            const comp = buttonName && this.getComponent(buttonName);
+        this.getComponentIds().forEach((id) => {
+            const comp = id && this.getComponent(id);
             if (comp) {
                 comp.onButtonStateChanged.add((component) => {
 
                     if (!this.rootMesh || this.disableAnimation) { return; }
 
-                    switch (buttonName) {
+                    switch (id) {
                         case "xr-standard-trigger": // index trigger
                             if (!isQuest) {
                                 (<AbstractMesh>(this._modelRootNode.getChildren()[3])).rotation.x = -component.value * 0.20;

src/Cameras/XR/motionController/webXRProfiledMotionController.ts

@@ -41,7 +41,7 @@ export class WebXRProfiledMotionController extends WebXRAbstractMotionController
     private _touchDots: { [visKey: string]: AbstractMesh } = {};
 
     protected _processLoadedModel(_meshes: AbstractMesh[]): void {
-        this.getComponentTypes().forEach((type) => {
+        this.getComponentIds().forEach((type) => {
             const componentInLayout = this.layout.components[type];
             this._buttonMeshMapping[type] = {
                 mainMesh: this._getChildByName(this.rootMesh!, componentInLayout.rootNodeName),
@@ -62,7 +62,7 @@ export class WebXRProfiledMotionController extends WebXRAbstractMotionController
                     this._buttonMeshMapping[type].states[visualResponseKey] = {
                         valueMesh: this._getChildByName(this.rootMesh!, nameOfMesh)
                     };
-                    if (type === WebXRControllerComponent.TOUCHPAD && !this._touchDots[visualResponseKey]) {
+                    if (componentInLayout.type === WebXRControllerComponent.TOUCHPAD && !this._touchDots[visualResponseKey]) {
                         const dot = SphereBuilder.CreateSphere(visualResponseKey + 'dot', {
                             diameter: 0.0015,
                             segments: 8
@@ -104,11 +104,11 @@ export class WebXRProfiledMotionController extends WebXRAbstractMotionController
         if (this.disableAnimation) {
             return;
         }
-        this.getComponentTypes().forEach((type) => {
-            const component = this.getComponent(type);
+        this.getComponentIds().forEach((id) => {
+            const component = this.getComponent(id);
             if (!component.hasChanges) { return; }
-            const meshes = this._buttonMeshMapping[type];
-            const componentInLayout = this.layout.components[type];
+            const meshes = this._buttonMeshMapping[id];
+            const componentInLayout = this.layout.components[id];
             Object.keys(componentInLayout.visualResponses).forEach((visualResponseKey) => {
                 const visResponse = componentInLayout.visualResponses[visualResponseKey];
                 let value = component.value;