如何將js onclick事件添加到框架動畫

Question

我有一個要模擬起飛的太空飛船模型。 我希望這樣可以使動畫在我用光標單擊飛船后立即激活。 我正在使用動畫，但是我希望它在發生光標單擊事件時激活。 以下是我的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);
});
}
});

Answer 1

我會嘗試將'begin'屬性添加到動畫標簽： 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>