Finger trigger, firing gun simulation

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?

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

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)

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 < {
        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">

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

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