如何将js onclick事件添加到aframe动画答案

【问题标题】：How to add js onclick event to aframe animation如何将js onclick事件添加到aframe动画
【发布时间】：2018-03-18 12:01:07
【问题描述】：

我有一个宇宙飞船模型，我想制作起飞动画。我希望它是这样的，一旦我用光标单击宇宙飞船，动画就会激活。我正在使用动画，但我希望它在光标单击事件时激活。下面是我的 HTML 以及我被 JS 卡住的地方

<a-entity id="spaceship" cursor-animator gltf-model="models/spaceship.gltf" position="-20 -0.855 -5.259" scale="2 2 2" rotation="0 180 0">
  <a-animation attribute="position" from="-20 0 -5" to="-20 0 -25" dur="10000"></a-animation>
  <a-animation attribute="position" from="-20 0 -25" to="-20 1000 -200" delay="9000" dur="9000"></a-animation>
</a-entity>


// Component to activate spaceship animation on click
AFRAME.registerComponent('cursor-animator', {
init: function () {
this.el.addEventListener('click', function (evt) {
    //Code
  console.log('I was clicked at: ', evt.detail.intersection.point);
});
}
});

【问题讨论】：

标签： javascript html animation onclick aframe

【解决方案1】：

我会尝试将“开始”属性添加到动画标签： https://aframe.io/docs/0.8.0/core/animations.html#begin

<a-entity id="camera" camera look-controls cursor="rayOrigin: mouse"></a-entity>
<a-entity id="spaceship" cursor-animator gltf-model="models/spaceship.gltf" position="-20 -0.855 -5.259" scale="2 2 2" rotation="0 180 0">
  <a-animation begin="click" attribute="position" from="-20 0 -5" to="-20 0 -25" dur="10000"></a-animation>
  <a-animation begin="click" attribute="position" from="-20 0 -25" to="-20 1000 -200" delay="9000" dur="9000"></a-animation>
</a-entity>

【讨论】：

试过还是不行，我的主要问题是创建JavaScript函数来触发动画
这是一个带有鼠标单击的基本框示例，不明显的一件事是您需要将光标属性添加到相机，这可能会有所帮助（更新答案以反映这一点）。 glitch.com/edit/#!/a-frame-click-animate
您的解决方案有效，但似乎不适用于我的 gltf 模型。使用 box 原语 onclick 动画效果很好。我切换到它只是失败的模型。我认为这与 Aframe 本身有关。谢谢
我明白了，也许这个也有帮助：stackoverflow.com/questions/47032056/…
完美解决了我的问题，我会将这个问题标记为重复