Animieren Sie die Kamera je nach Ereignis

Question

Mit einem einfachen Code ist es möglich, die Position der Kamera zu verschieben, wenn Sie auf ein Objekt klicken. Aber ist es möglich, die Kamera zu animieren, sich in diese Positionen zu bewegen?

Dies ist mein Code:

<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

Don McCurdy kümmert sich um Sie. Überprüfen Sie seine Demo, die genau das sein könnte, was Sie wollen: https://sandbox.donmccurdy.com/checkpoints/ (defekte Verbindung)