A-Frame 0.6.1 - 相机旋转动画

我正在尝试在场景中为相机的旋转设置动画 . 观看圆圈1秒钟后应该进行动画 .

问题是在动画之后场景的底部似乎无法到达，因为它是在动画发生之前 .

我先尝试动画相机，然后是相机的容器 . 第二个选项产生了另一个问题，似乎所有的天空都被取代了，我不明白如何“纠正”那个 .

Video of the problem when the animation is on the camera

这是两个代码：

• Animation on the camera

<script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-animation-component/dist/aframe-animation-component.min.js"></script>
<a-scene>
  <a-assets>
        <img id="city" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/city.jpg" data-position="0 0 0" alt="Table de conférence">
  </a-assets>


  <a-sky src="#city" rotation="0 0 0"></a-sky> 
  <a-circle position="-8 -5 2" 
            rotation="90 0 0"
            geometry="radius: 1;"                
            material="side: double;" 
            >
            </a-circle>
  <a-entity id="camera-container" rotation="0 100 0">

      <a-entity id="camera" look-controls camera="fov: 80; userHeight: 0" wasd-controls="enabled: false;">
          <a-animation attribute="rotation"
                dur="1000"
                begin="animation__fuse-complete"
                from="-31.2 4 0"
                to="2 5.5 0"
                ></a-animation>

          <a-entity id="cursor" cursor="fuse: true; fuseTimeout: 100"
              position="0 0 -1"
              geometry="primitive: ring; radiusInner: 0.013; radiusOuter: 0.02"
              material="color: #000; shader: flat"

              animation__fuse="startEvents: fusing;
                          property: scale;
                          dur: 1000;
                          to: 0.4 0.4 0.4"
              animation__fuseed="startEvents: animation__fuse-complete;
                          property: scale;
                          dur: 1;
                          to: 1 1 1"
              >
          </a-entity>
      </a-entity>
  </a-entity>

• Animation on a container

<script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-animation-component/dist/aframe-animation-component.min.js"></script>
<a-scene>
  <a-assets>
    <img id="city" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/city.jpg" data-position="0 0 0" alt="Table de conférence">
  </a-assets>


  <a-sky src="#city" rotation="0 0 0"></a-sky> 
  <a-circle position="-8 -5 2" 
        rotation="90 0 0"
        geometry="radius: 1;"                
        material="side: double;" 
        >
        </a-circle>
  <a-entity id="camera-container" rotation="0 100 0">
      <a-animation attribute="rotation"
        dur="1000"
        begin="animation__fuse-complete"
        from="0 100 0"
        to="30 100 0"></a-animation>

      <a-entity id="camera" look-controls camera="fov: 80; userHeight: 0" wasd-controls="enabled: false;">
          <a-entity id="cursor" cursor="fuse: true; fuseTimeout: 100"
              position="0 0 -1"
              geometry="primitive: ring; radiusInner: 0.013; radiusOuter: 0.02"
              material="color: #000; shader: flat"

              animation__fuse="startEvents: fusing;
                      property: scale;
                      dur: 1000;
                      to: 0.4 0.4 0.4"
              animation__fuseed="startEvents: animation__fuse-complete;
                      property: scale;
                      dur: 1;
                      to: 1 1 1">
          </a-entity>
      </a-entity>
  </a-entity>
 </a-scene>

如何正确设置相机旋转的动画？

我在Windows 10上，使用Chrome 59，A-Frame 0.6.1和aframe-animation-component

提前谢谢你，祝你有个愉快的一天！