Question

我正在使用一个框架在WebVR上创建一个项目，其中我已经加载了一个横幅和一个盒子元素的collada模型。我想在点击模型时围绕其轴旋转框。我使用了javascript而不是动画，它只是直接旋转盒子，这与我们使用a-frame的动画标签时发生的情况非常不同。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

您需要使用＆lt; a-animation＆gt;＆lt; / a-animation＆gt;。定义动画：＆LT;一个实体＆GT; ＆lt; a-entity position =“5 0 0”＆gt;＆lt; / a-entity＆gt; ＆lt; a-animation attribute =“rotation” DUR = “10000” 填=“向前” to =“0 360 0” 开始= “startAnimation” 重复= “不定” ＆GT;＆LT; /一个动画＆GT; ＆LT; / A-实体GT; 然后像这样发出（）begin事件： function changeView（）{ var view = document.getElementById（“float”）; view.emit（ “startAnimation”）; } 还可以通过将脚本附加到您的实体来尝试使用组件系统： AFRAME.registerComponent（ '富'，{ INIT：函数（）{ var view = document.getElementById（“float”）; this.el.addEventListener（ '点击'，函数（）{ view.emit（ “startAnimation”）; }）; } }）;

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

1 个答案: