aframe - A-Frame 0.6.1 - 相机旋转动画

Question

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

提前谢谢你，祝你有美好的一天!

Answer 1

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

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

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

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