A-Frame 0.6.1 - Animation de rotation de caméra

Question

J'essaye actuellement d'animer la rotation d'une caméra dans une scène. L'animation devrait se produire après avoir regardé un cercle pendant 1 seconde. Le problème est que le bas de la scène ne semble pas accessible après l'animation, tant qu'il est avant que l'animation ne se produise.

J'ai d'abord essayé d'animer l'appareil photo, puis un conteneur de l'appareil photo. La deuxième option a produit un autre problème, il semble que tout le ciel est déplacé et je ne comprends pas comment "corriger" cela.

Video of the problem when the animation is on the camera

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

Comment animer correctement la rotation de la caméra?

Je suis sous Windows 10, avec Chrome 59, A-Frame 0.6.1 et Aframe-animation composants

Merci à l'avance et avoir une belle journée!

Answer 1

J'ai rencontré un problème similaire en étant incapable d'atteindre la position de rotation inférieure après l'exécution de setAttribute sur la rotation de la caméra. Voici ce que je pense qui se passe:

Le problème vient du fait que la rotation sur l'axe X change par code, passant de 0 à 30 degrés sans qu'il y ait un mouvement de tête correspondant. En conséquence, 30 degrés sont perdus de la limite inférieure de -90 degrés.

Je pense qu'il y a une forte intention dans la conception de A-Frame que les angles visuels qui se produisent via la position de la tête restent cohérents. Si vous regardez droit devant vous et soudainement l'angle est de 30 degrés plus haut, mais vous n'avez pas bougé la tête, tout sera de travers. Vous devez regarder vers le bas à 30 degrés pour voir «tout droit», etc.

Il est facile d'essayer de coder ces discontinuités lorsque A-Frame est visualisé à travers un moniteur de bureau plutôt qu'une visière. Je pense que la "solution" va devoir être de concevoir un moyen pour que la caméra revienne à sa position de départ lorsque vous exécutez votre animation afin qu'elle ne perde pas sa correspondance avec la tête du joueur.