根据事件为相机设置动画

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

Don McCurdy 为您提供保障。 查看他的演示，这可能正是您想要的： https://sandbox.donmccurdy.com/checkpoints/ （修复断开的链接）