A-Frame 0.6.1 - 相机旋转动画答案

【问题标题】：A-Frame 0.6.1 - Camera rotation animationA-Frame 0.6.1 - 相机旋转动画
【发布时间】：2017-12-24 23:17:19
【问题描述】：

我目前正在尝试为场景中的相机旋转设置动画。动画应该在注视一个圆圈 1 秒后出现。

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

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

Video of the problem when the animation is 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

提前感谢您，祝您有美好的一天！

【问题讨论】：

标签： aframe

【解决方案1】：

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

问题的出现是因为 X 轴上的旋转通过代码改变，从 0 度移动到 30 度而没有相应的头部运动。结果，从-90度的下限损失了30度。

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

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

【讨论】：