如何更改动画A-Frame对象的旋转轴?

时间:2017-03-16 15:35:23

标签: html5 rotation aframe webvr

this question有些相关,我似乎无法找到一种“框架内”的方式来改变A-Frame对象的旋转轴(例如地球的倾斜轴)。

链接问题是指通过将对象包装在将抵消子实体的父实体中来更改旋转轴点(见下文):

<a-entity rotation="0 45 0">        <!-- Parent entity -->
  <a-box position="0 1 0"></a-box>  <!-- Child entity -->
</a-entity>

我采用了类似的方法但不是偏移枢轴点,我试图改变旋转轴。向父项添加动画时,旋转始终沿着全局Y轴,而不是本地(父项)旋转的Y轴:

<a-entity rotation="0 0 25">       <!-- Parent entity -->
  <a-animation
    attribute="rotation"
    easing="linear"
    dur="60000"
    to="0 360 0"
    repeat="indefinite">
  </a-animation>                   <!-- Animates parent -->
  <a-box position="0 0 0></a-box>  <!-- Child entity -->
<a-entity rotation="0 0 25">

有没有人知道如何最好地将轴从全局空间更改为局部空间,或者是否有方法围绕倾斜轴进行动画处理?

1 个答案:

答案 0 :(得分:2)

我认为您可以在所有内容周围添加额外的父实体并旋转它。

<a-entity>  <!-- Grandparent entity -->
  <a-animation
    attribute="rotation"
    easing="linear"
    dur="60000"
    to="0 360 0"
    repeat="indefinite">
  </a-animation>           
  <a-entity rotation="0 0 25">        <!-- Parent entity --> 
    <a-box position="0 0 0></a-box>  <!-- Child entity -->
  </a-entity>
</a-entity>

打开A-Frame Inspector(ctrl + alt + i)并播放旋转以查看要旋转的方向。