如何在单击帧中的另一个对象时在对象上启动动画？

Question

我正在使用 a-frame 在 WebVR 上制作一个项目，其中我加载了一个横幅和 a-box 元素的 collada 模型。单击模型时，我想围绕其轴旋转框。我使用了 javascript 但它没有设置动画，而是直接旋转了盒子，这与我们使用一帧动画标签时发生的情况非常不同。

<script>

    function changeView() {
        var view = document.getElementById("float");
        view.setAttribute("rotation",
        {
            x: 0,
            y: 360,
            z: 0      
        });
    }
</script>

<a-scene>
  
  <a-assets>
    <a-asset-item id="floatingbanner" src="models/floatingbanner.dae"></a-asset-item>
  </a-assets>
  
  <a-entity id="float" collada-model="#floatingbanner" position="-2 2 0" scale="0.3 0.3 0.3" onclick="loaddoc()">
  </a-entity>

  <a-box id="box" position="-1 1.5 0" onclick="changeView()" height=".3" depth=".3" width=".3"></a-box>
 
  <a-camera id="view" position="0 0 0">
          <a-cursor color="black"/>
  </a-camera>

<a-scene>

Answer 1

您需要使用 <a-animation></a-animation>.

定义动画：

<a-entity>
  <a-entity position="5 0 0"></a-entity>
  <a-animation attribute="rotation"
               dur="10000"
               fill="forwards"
               to="0 360 0"
               begin="startAnimation"
               repeat="indefinite"></a-animation>
</a-entity>

然后 emit() begin 事件如下：

function changeView() {
    var view = document.getElementById("float");
    view.emit("startAnimation");
}

还可以通过将脚本附加到您的实体来尝试使用组件系统：

AFRAME.registerComponent('foo',{
  init:function(){
  var view = document.getElementById("float");
     this.el.addEventListener('click',function(){
         view.emit("startAnimation");
     });
  }
});

如何在单击帧中的另一个对象时在对象上启动动画？

How to start an animation on an object on clicking another object in a-frame?

html

javascript

three.js

webvr

aframe