THREE.js中相机动画

本质

相机动画的本质是改变相机位置！

案例

实现相机水平移动，达到一个漫游效果

核心代码

在render方法中改变相机位置:

// 渲染循环
function render() {
    //相机直线运动动画
    camera.position.z -= 0.3;
    renderer.render(scene, camera);
    
    //请求动画帧实现循环渲染
    requestAnimationFrame(render);
}

render();

效果：

圆周运动，实现一种盘旋效果

核心代码

// 渲染循环
let angle = 0; //用于圆周运动计算的角度值
const R = 100; //相机圆周运动的半径

function render() {
    angle += 0.01;
    // 相机y坐标不变，在XOZ平面上做圆周运动
    camera.position.x = R * Math.cos(angle);
    camera.position.z = R * Math.sin(angle);
    
    // 相机圆周运动过程，如果希望视线始终指向圆心，位置改变后必须重新执行lookAt指向圆心
    camera.lookAt(0,0,0);
    
    renderer.render(scene, camera);
    
    //重复渲染动画
    requestAnimationFrame(render);
}
render();

效果：

总结

相机动画的本质是：改变相机位置，通过改变相机的位置还可以达到其他的效果，有兴趣的还可以尝试一下！