如何使用JavaScript为a帧中的摄影机移动设置动画？_Javascript_Animation_Camera_Aframe

如何使用JavaScript为a帧中的摄影机移动设置动画？

javascript animation camera aframe

如何使用JavaScript为a帧中的摄影机移动设置动画？,javascript,animation,camera,aframe,Javascript,Animation,Camera,Aframe,我正在使用A-Frame在桌面上构建一个在常规网页上运行的虚拟漫游。无需VR导航，只需移动并单击鼠标光标即可我将在a-scene上方有几个按钮。每个按钮都会将相机指向不同的方向。我设法让它工作起来了。下一步是设置动画，就好像摄影机正在平移到它的新方向，而不是直接跳到它有没有办法做到这一点，可以设置动画的持续时间和放松度我知道，从如何在人字架内做到这一点。但由于我调用的是它之外的函数，所以我对如何让它工作有点迷茫这是我的代码：函数moveCamera（）{ var el=文档查询选择器

我正在使用A-Frame在桌面上构建一个在常规网页上运行的虚拟漫游。无需VR导航，只需移动并单击鼠标光标即可

我将在a-scene上方有几个按钮。每个按钮都会将相机指向不同的方向。我设法让它工作起来了。下一步是设置动画，就好像摄影机正在平移到它的新方向，而不是直接跳到它

有没有办法做到这一点，可以设置动画的持续时间和放松度

我知道，从如何在人字架内做到这一点。但由于我调用的是它之外的函数，所以我对如何让它工作有点迷茫

这是我的代码：

函数moveCamera（）{
var el=文档查询选择器（“a-camera”）；
el.components[“look controls”].pitchObject.rotation.x=-0.1；
el.组件[“外观控制”].yawObject.rotation.y=0.85；
}

.sceneWrapper{
位置：相对位置；
填充顶部：20px；
高度：100vh；
}


移动摄像机

有几种方法可以做到这一点。一种是直接在look controls组件的tick函数中管理它。这意味着您需要基于外观控件创建自己的组件。这需要一些技巧，但它是有效的。更简单的方法是使用requestAnimationFrame来管理移动。下面是我根据您的代码制作的一个完全有效的示例。您可以根据自己的喜好更改持续时间

<html>
<head>
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
</head>
<body>
<a-scene background="color: #FAFAFA">
    <a-entity id='cameraWrapper' position="0 0 0">
        <a-camera wasd-controls-enabled="false" look-controls="reverseMouseDrag:true">
            <a-animation attribute="position" dur="2000" easing="linear" to="0 1.6 -10"></a-animation>
        </a-camera>
    </a-entity>
    <a-sky color="#c7dcff"></a-sky>
    <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow></a-box>
    <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere>
    <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder>
    <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane>
</a-scene>

<button type="button" style="position: fixed; top: 10px; left: 10px;" onclick="moveCamera(-0.1, 0.85)">Move Camera</button>

<script type="text/javascript">
    var start, x_start, y_start, x_rotation, y_rotation;
    var duration = 1000;
    var camera = document.querySelector("a-camera");

    function moveCamera(x_destination, y_destination) {
        start = null;
        x_start = camera.components["look-controls"].pitchObject.rotation.x;
        x_rotation = x_destination - x_start;
        y_start = camera.components["look-controls"].yawObject.rotation.y;
        y_rotation = y_destination - y_start;
        requestAnimationFrame(step);
    }

    function step(timestamp) {
        if (start === null) start = timestamp;
        var progress = timestamp - start;
        camera.components["look-controls"].pitchObject.rotation.x = x_start + x_rotation * progress / duration;
        camera.components["look-controls"].yawObject.rotation.y = y_start + y_rotation * progress / duration;
        if (progress < duration) {
            requestAnimationFrame(step);
        }
    }
</script>
</body>
</html>


移动摄像机
变量开始，x_开始，y_开始，x_旋转，y_旋转；
var持续时间=1000；
var-camera=document.querySelector（“a-camera”）；
功能移动摄像机（x_目的地、y_目的地）{
start=null；
x_start=camera.components[“look controls”].pitchObject.rotation.x；
x_旋转=x_目的地-x_开始；
y_start=camera.components[“look controls”].yawObject.rotation.y；
y_旋转=y_目的地-y_开始；
请求动画帧（步骤）；
}
功能步骤（时间戳）{
如果（start==null）start=timestamp；
var progress=时间戳-开始；
camera.components[“look controls”].pitchObject.rotation.x=x_start+x_rotation*进度/持续时间；
camera.components[“look controls”].yawObject.rotation.y=y_start+y_rotation*进度/持续时间；
如果（进度<持续时间）{
请求动画帧（步骤）；
}
}