Async interactions between A-Frame components

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!

ngokevin · Accepted Answer · 2017-06-20 06:57:57Z

2

Some solutions:

Do this.el.addState('pressed') and this.el.removeState('pressed') to update the state, and use this.el.is('pressed') to check it.
Combine the components together and store it as this.pressed.
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.

answered Jun 20, 2017 at 6:57

ngokevin

13.3k5 gold badges46 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Async interactions between A-Frame components

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related