挂钩 aframe-alongpath-component 事件和状态答案

【问题标题】：Hooking into aframe-alongpath-component events and state挂钩 aframe-alongpath-component 事件和状态
【发布时间】：2018-02-18 21:51:39
【问题描述】：

在aframe-alongpath-component 的文档中，它有一个关于事件和状态的部分。

其中一个状态是“moveonpath” - 当前沿路径移动的实体。

我将如何挂钩，以便在实体移动时播放特定的声音？

从文档中我也不清楚如何触发沿路径的移动以从其他地方开始代码。它似乎有一个您可以收听“movingstarted”的事件，但没有我可以在组件上调用的播放方法。

我要达到的最终目标是从弹射器中扔出一块石头。

当弹射器动画完成时，我想触发以跟随它的轨迹沿着路径摇动，并在移动时触发声音，当它到达路径末端（将在海洋中）时触发另一个声音。

【问题讨论】：

标签： aframe webvr

【解决方案1】：

检查状态非常简单：

element.is("state");

获得“结束”事件更简单：

element.addEventListener("movingended", (e)=>{})

现在在init函数中添加事件监听器，并在组件的tick函数中检查状态：

AFRAME.registerComponent('foo', {
  init: function() {
    this.el.addEventListener("movingended", (e) => {
      console.log("moving ended")
    })
  },
  tick: function() {
    console.log(this.el.is("moveonpath"));
  }
})

并附加组件：

<a-box foo></a-box>

现场观看here。

【讨论】：

谢谢。在您回答之前，我设法将“movingended”事件侦听器排除在外，但不知道 A-Frame 实体具有可以通过 el.is(“state”) 访问的本地状态。我还通过查看组件代码发现它确实有一个播放方法，我可以通过 element.components.alongpath.play() 访问我现在唯一的问题是它在加载时自动播放而不是等待播放但我可以分叉组件并添加一个 isPaused 状态，滴答声也会监听，因此在我将其设置为 false 之前它不会移动。