A-Frame 0.6.1 - Camera rotation animation

user_2378219 0
Viewed 719

I'm currently trying to animate a camera's rotation in a scene. The animation should occur after looking at a circle for 1 second.

The problem is that the bottom of the scene don't seem reachable after the animation, althrough that it is before the animation occured.

I tried first to animate the camera, then a container of the camera. The second option produced an other problem, it seems that all the sky is displaced and I don't understand how to "correct" that.

Video of the problem when the animation is on the camera

Here are two codepens :

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

How to correctly animate the rotation of the camera ?

I'm on Windows 10, with Chrome 59, A-Frame 0.6.1 and aframe-animation-component

Thank you in advance and have a nice day !

aframe
1 Answers

I came across a similar problem with being unable to reach the bottom rotation position after executing setAttribute on the camera rotation. Here is what I think is happening:

The problem arises because the rotation on the X-axis changes via code, moving from 0 to 30 degrees without there being a corresponding head motion. As a result, 30 degrees are lost off of the lower limit of -90 degrees.

I think that there is a strong intention in the design of A-Frame that visual angles that arise via head position remain consistent. If you are looking straight ahead and suddenly the angle is 30 degrees higher, yet you haven't moved your head, everything will be askew. You'd have to look downward 30 degrees to see "straight ahead", etc.

It is easy to try and code these discontinuities when A-Frame is viewed through a desktop monitor rather than a visor. I think the "solution" is going to have to be to design some way to have the camera return to its starting position when you run your animation so that it doesn't lose its correspondence to the player's head.

user_8050070
Related