Feature to press the keyboard buttons using hand-tracking-controls component

[addy1997]

Hi @avasconcelos114,

Currently, the project supports clicking the keys on the keyboard with raycaster (in VR) and mouse (in the browser). I think it would be quite useful to add support/feature to enable users to press the keys using the hand-tracking-controls.

I have pressable component ready to be integrated (please see the code below) with you keyboard-button component.

AFRAME.registerComponent("pressable", {
        schema: {
          pressDistance: {
            default: 0.06,
          },
        },

        init: function() {
          this.worldPosition = new THREE.Vector3();
          this.handEls = document.querySelectorAll("[hand-tracking-controls]");
          this.pressed = false;
        },

        tick: function() {
          var handEls = this.handEls;
          var handEl;
          var distance;
          for (var i = 0; i < handEls.length; i++) {
            handEl = handEls[i];
            distance = this.calculateFingerDistance(
              handEl.components["hand-tracking-controls"].indexTipPosition
            );
            if (distance < this.data.pressDistance) {
              if (!this.pressed) {
                this.el.emit("pressedstarted");
              }
              this.pressed = true;
              return;
            }
          }
          if (this.pressed) {
            this.el.emit("pressedended");
          }
          this.pressed = false;
        },

        calculateFingerDistance: function(fingerPosition) {
          var el = this.el;
          var worldPosition = this.worldPosition;

          worldPosition.copy(el.object3D.position);
          el.object3D.parent.updateMatrixWorld();
          el.object3D.parent.localToWorld(worldPosition);

          return worldPosition.distanceTo(fingerPosition);
        },
      });

I was unable to compile your project locally due to dependency issues. This feature would be really useful. Can you help? Thanks