A-Frame 0.6.1 - 相機旋轉動畫

我正在嘗試在場景中動畫相機的旋轉。觀看一個圓圈1秒後應該會發生動畫。A-Frame 0.6.1 - 相機旋轉動畫

問題是，在動畫之後，場景的底部似乎不可訪問，因爲它在動畫發生之前。

我首先試着對相機進行動畫製作，然後是相機的容器。第二種選擇產生了另一個問題，似乎所有的天空都是流離失所，我不知道如何「糾正」。

Video of the problem when the animation is on the camera

這裏有兩個codepens：

<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型架和0.6.1 AFRAME動畫分量

預先感謝您，並有一個愉快的一天！

來源

2017-07-19 apiaget

我遇到了類似的問題，因爲在相機旋轉上執行setAttribute後無法達到底部旋轉位置。這是我認爲正在發生的事情：

問題出現是因爲X軸上的旋轉通過代碼改變，從0移動到30度而沒有相應的頭部運動。結果，30度失去了-90度的下限。

我認爲，在A型架的設計，強大的意圖是通過頭位出現的視角保持一致。如果您正在尋找直行，突然角高出30度，但你沒有移動你的頭，一切都會歪。你不得不往下看30度，看「直行」等

這是很容易嘗試和代碼時，A型架是通過桌面顯示器觀看，而不是一個遮陽這些不連續。我認爲，「解決方案」將不得不是當你運行你的動畫設計一些方式來使相機恢復到它的起始位置，以便不失去其對應玩家的頭上。

來源

2017-10-12 03:13:45

A-Frame 0.6.1 - 相機旋轉動畫

回答

相關問題