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

Question

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

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

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

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

有什么建议吗？

谢谢!

Answer 1

一些解决方案:

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 交集和 trigger down。您还可以免费获得所有 Controller 支持。