代码之家  ›  专栏  ›  技术社区  ›  deecobbk

如何将js onclick事件添加到帧动画

  •  0
  • deecobbk  · 技术社区  · 7 年前

    我有一个太空船模型,我想为它的起飞制作动画。我希望这样,一旦我用光标点击宇宙飞船,动画就会激活。我有动画工作使用,但我想它激活后,光标点击事件。下面是我的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);
    });
    }
    });
    
    1 回复  |  直到 7 年前
        1
  •  0
  •   Noam Almosnino    7 年前

    我会尝试将“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>