Aframe A帧0.6.1-摄影机旋转动画

我目前正在尝试设置场景中摄影机旋转的动画。动画应在观察圆1秒后出现

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

我首先尝试设置相机的动画，然后是相机的容器。第二个选项产生了另一个问题，似乎所有的天空都被置换了，我不知道如何“纠正”这个问题

这里有两个代码笔：

如何正确设置摄影机旋转的动画

我使用的是Windows10，Chrome59、A帧0.6.1和A帧动画组件

---

提前谢谢你，祝你度过愉快的一天

我遇到了一个类似的问题，在对摄影机旋转执行setAttribute后，无法到达底部旋转位置。以下是我认为正在发生的事情：

问题的产生是因为X轴上的旋转通过代码改变，从0度移动到30度，而没有相应的头部运动。因此，在-90度的下限之外，会损失30度

我认为a型架的设计有一个强烈的意图，即通过头部位置产生的视角保持一致。如果你直视前方，突然角度高出30度，但你没有移动头部，一切都会倾斜。你必须向下看30度才能看到“正前方”，等等

当通过桌面显示器而不是遮阳板查看A-Frame时，很容易尝试对这些不连续性进行编码。我认为“解决方案”必须是设计一种方法，当你运行动画时，让相机回到它的起始位置，这样它就不会丢失与玩家头部的对应关系

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

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