Question

我正在尝试为场景中的相机旋转设置动画。观看圆圈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

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

Answer 1

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

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

我认为在A-Frame的设计中有一个强烈的意图，即通过头部位置产生的视角保持一致。如果你直视前方并且突然角度高出30度，但你还没有动摇你的头，一切都会变得歪斜。你必须向下看30度才能看到＆＃34;直线前进＆＃34;等等。

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

A-Frame 0.6.1 - 相机旋转动画

1 个答案: