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

Question

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

<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");
     });
  }
});