根據事件動畫化攝像頭

Question

使用簡單代碼可以在單擊對象時移動攝像頭的位置。但是，是否有可能將相機動畫移動到這些位置？

這是我的代碼：

<a-scene> 
     <a-entity > 

      <a-box id="box01" color="#6173F4" position="1 0 0"></a-box> 
      <a-box id="box02" color="#6173F4" position="-1 0 0"></a-box> 
      <a-camera id="cam"> 
       <a-cursor></a-cursor> 
      </a-camera> 
      <script> 
      var cam = document.querySelector('#cam'); 
      var caja1 = document.querySelector('#box01'); 
      var caja2 = document.querySelector('#box02'); 

      caja1.addEventListener('click', function() { 
       cam.setAttribute('position' , {x: 1, y: 0, z: 4}); 
       cam.setAttribute('rotation' , {x: 0, y: 0, z: 0}); 
      }); 
      caja2.addEventListener('click', function() { 
       cam.setAttribute('position' , {x: -3, y: 3, z: 4}); 
       cam.setAttribute('rotation' , {x: -30, y: -30, z: 0}); 
      }); 
      </script> 
     </a-entity> 
    <a-text value="Hello, A-Frame!" color="#FFF" 
    position="0 0 1" scale="1.5 1.5 1.5"></a-text> 
    <a-sky color="#4069b4"></a-sky> 
</a-scene> 

Answer 1

唐麥柯迪已經得到了你覆蓋。 檢查他的演示，這可能正是你想要的： https://sandbox.donmccurdy.com/checkpoints/ （修復斷開的鏈接）