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

Async interactions between A-Frame components

我目前正在尝试生成一个对象,以防激光对象和可碰撞对象之间存在交集。我正在使用 raycaster 来检测碰撞。

要生成对象,我只想在发生碰撞并且用户按下触发按钮的情况下执行此操作。

我正在考虑在 triggerdown 事件侦听器被按下时创建一个全局变量 pressed 并且在 raycaster-intersection 事件侦听器中仅当此变量设置为 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
    });
  }
})

我不喜欢使用全局变量,但我不知道在这种情况下如果没有它们我该如何解决这个问题。

有什么建议吗?

谢谢!

部分解决方案:

  1. this.el.addState('pressed')this.el.removeState('pressed')更新状态,用this.el.is('pressed')检查。

  2. 将组件组合在一起并存储为this.pressed

  3. A-Frame master build,即将发布 0.6.0,有一个激光控制组件,你可以使用 https://aframe.io/docs/master/components/laser-controls.html 所以你所要做的就是听 click 而不是而不是必须同时监听 raycaster 交集和触发。您还可以免费获得所有控制器支持。