A-Frame组件之间的异步交互

Question

I'm currently trying to spawn an object in case there's an intersection between a laser object and a collidable object. I'm using a raycaster to detect the collision.

To spawn the object I want to do it only in the case there's a collision and also the user has pressed the trigger button.

I was thinking on creating a global variable pressed when the triggerdown event listener was pressed and in the raycaster-intersection event listener spawn an object only if this variable was set to true.

const pressed = false

AFRAME.registerComponent('laser', {
  init: function () {
    const laser = this.el.sceneEl.querySelector('#laser');
    laser.addEventListener('raycaster-intersection', function(event) {
      console.log('raycaster-intersection', event.detail.intersections[0].point)
      if (pressed) {
        console.log('spawn')
      }
    });
  }
})

AFRAME.registerComponent('spawner', {
  init: function () {
    const blockHand = this.el.sceneEl.querySelector('#blockHand');
    blockHand.addEventListener('triggerdown', function(event) {
      pressed = true
    });
    blockHand.addEventListener('triggerup', function(event) {
      pressed = false
    });
  }
})

I don't like to use global variables but I don't know how could I tackle this problem without them in this case.

Any suggestions?

Thanks!

Answer 1

Some solutions:

1. Do this.el.addState('pressed') and this.el.removeState('pressed') to update the state, and use this.el.is('pressed') to check it.

2. Combine the components together and store it as this.pressed .

3. A-Frame master build, soon 0.6.0, has a laser-controls component you can use https://aframe.io/docs/master/components/laser-controls.html so all you have to do is listen for click rather than having to listen for both raycaster intersection and trigger down. And you get all controller support for free.