在 WebGL 中从头到尾设置摄像机位置的动画

Set animation for camera position from beginning to end in WebGL

本文关键字：位置 动画 摄像机 设置 WebGL 从头到尾      更新时间：2023-09-26

我有相机的当前位置，以及最终位置（聚焦于一个元素）。我想制作一个从头到尾的相机动画。

谢谢。

一个想法是创建一个单位向量，表示从相机到对象的方向。然后使用此值在时间上更改相机的矢量位置：

var speed = 4;
var p = camera.position;
var dt = p.clone();
dt.normalize();
dt.multiplyScalar(speed);

然后在渲染函数中：

function render () {
    if (camera.position.length() > 0) {
        camera.position.sub(dt);
    }
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}

https://jsfiddle.net/dc3La82y/

谢谢！我应用了它，问题是我尝试在相机接近元素时渲染 bucle，但它只在到达它时显示它，没有显示任何内容。

这是代码：

 var cameraPos = new THREE.Vector3().addVectors(elementCenter, new THREE.Vector3(distance, distance, distance));
    var cameraLook = new THREE.Vector3(elementCenter.x, elementCenter.y, elementCenter.z);

    //camera.position.set(cameraPos.x, cameraPos.y, cameraPos.z);
    camera.lookAt(new THREE.Vector3(cameraLook.x, cameraLook.y, cameraLook.z));
    var dx = camera.position.x - cameraPos.x;
    var dy = camera.position.y - cameraPos.y;
    var dz = camera.position.z - cameraPos.z;
    var p = new THREE.Vector3(dx, dy, dz);
    var speed = 400;
    var dt = p.clone();
    dt.normalize();
    dt.multiplyScalar(speed);
    var times = p.length() / speed;
    for ( i = 0; i < times; i++ ) {
        camera.position.sub(dt);
        camera.lookAt(new THREE.Vector3(cameraLook.x, cameraLook.y, cameraLook.z)); //because it is changed when camera moves, I have to give it its value again
        render();
        requestAnimationFrame(render);
    }
相关文章：