Finger trigger, firing gun simulation

🧑‍💻 Technical Support
1

I’m makin an old time radar game where the user holds a light gun and tries to hit object on an old monitor. Right now I have a button on the page that fires the gun, but was wondering if anyone had made anything similar where they detect finger trigger motion to fire a gun?

2

Is this a 8th Wall hand tracking project? Or are you using HMD device?

3

Hey Ian,

I’m using the 8thwall hand tracking demo where you can wear a watch or ring, I have to so you can hold an old light gun and the object will be to point it to towards blinking dots on a screen.

Below is link to image of what it used to look like. I believe it’s the grand parent to the old duck hunt game…

Basically would like the app to detect my trigger finger motion to fire gun rather then have to click a button on the screen with other hand (hard to hold and aim phone and click button at same time)

https://www.google.com/imgres?q=sage%20light%20gun%20green%20monitor%20graphics&imgurl=https%3A%2F%2Fhackaday.com%2Fwp-content%2Fuploads%2F2023%2F03%2Fgun.png&imgrefurl=https%3A%2F%2Fhackaday.com%2F2023%2F03%2F09%2Fthe-first-gui-volscan-controls-the-air%2F&docid=35Kyszz3AWVRsM&tbnid=evR1OGLeKuVG9M&vet=12ahUKEwiR-4m06MaFAxXkjYkEHa98AfgQM3oECGwQAA..i&w=1113&h=969&hcb=2&ved=2ahUKEwiR-4m06MaFAxXkjYkEHa98AfgQM3oECGwQAA

4

Here is a component I wrote to check the proximity between the index finger and thumb then log this. You can update or change this to check other finger proximity if you want.

AFRAME.registerComponent('finger-tips-proximity', {
  schema: {
    threshold: {type: 'number', default: 0.035}, // Default threshold set to 0.035 meters
  },
  init() {
    this.el.sceneEl.addEventListener('xrhandfound', this.checkProximity.bind(this));
    this.el.sceneEl.addEventListener('xrhandupdated', this.checkProximity.bind(this));
  },
  checkProximity({detail}) {
    const indexTipAttachment = detail.attachmentPoints.indexTip;
    const thumbTipAttachment = detail.attachmentPoints.thumbTip;

    if (indexTipAttachment && thumbTipAttachment) {
      // Extracting positions
      const indexTipPosition = new THREE.Vector3().copy(indexTipAttachment.position);
      const thumbTipPosition = new THREE.Vector3().copy(thumbTipAttachment.position);

      // Calculating the distance
      const distance = indexTipPosition.distanceTo(thumbTipPosition);

      // Log to console if fingers are close
      if (distance < this.data.threshold) {
        console.log('Index finger and thumb are in proximity');
      }
    }
  }
});

Then you can add this to your body.html

<xrextras-hand-attachment finger-tips-proximity lock-wrist="false" point="thumbTip">

5

I would start super simple to better understand the component then add in more complexity.

6

OOOOHHHH def I will, making some fun stuff, I even got it so i don’t need to use the react 2d menu any more and use the 3d elements in the scene for switching scenes and it’s working in iphone as well.

1 Like