threejs中相机动画，使用TWEEN库

最新推荐文章于 2025-05-12 14:05:10 发布

原创最新推荐文章于 2025-05-12 14:05:10 发布

· 618 阅读

8 ·

版权

文章标签：

#数码相机

该文章介绍了如何使用JavaScript的TWEEN库创建相机从A点到B点的平滑动画效果，包括设置动画结束时的相机位置和lookAt目标。通过onUpdate函数实时更新相机位置和视线指向。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


// 相机动画函数，从A点飞行到B点，A点表示相机当前所处状态
// pos: 三维向量Vector3，表示动画结束相机位置
// target: 三维向量Vector3，表示相机动画结束lookAt指向的目标观察点
function createCameraTween(endPos, endTarget) {
  new TWEEN.Tween({
    // 不管相机此刻处于什么状态，直接读取当前的位置和目标观察点
    x: camera.position.x,
    y: camera.position.y,
    z: camera.position.z,
    tx: controls.target.x,
    ty: controls.target.y,
    tz: controls.target.z,
  })
    .to({
      // 动画结束相机位置坐标
      x: endPos.x,
      y: endPos.y,
      z: endPos.z,
      // 动画结束相机指向的目标观察点
      tx: endTarget.x,
      ty: endTarget.y,
      tz: endTarget.z,
    }, 2000)
    .onUpdate(function (obj) {
      // 动态改变相机位置
      camera.position.set(obj.x, obj.y, obj.z);
      // 动态计算相机视线
      // camera.lookAt(obj.tx, obj.ty, obj.tz);
      controls.target.set(obj.tx, obj.ty, obj.tz);
      controls.update();//内部会执行.lookAt()
    })
    .start();
}