相机动画总结-相机直线运动动画、相机圆周运动动画

相机动画总结（.position 和 .lookAt()）

核心概念

相机动画主要通过控制相机对象的 .position 属性和 .lookAt() 方法来实现：

1. .lookAt() 方法

• 功能：设置相机观察的焦点，相当于调整相机镜头的指向
• 参数 ：可以接受三个坐标参数 (x, y, z) 或一个 THREE.Vector3 向量
• 重要特性 ：
  • 执行 lookAt() 会更新视图矩阵的旋转部分
  • 执行前需要先设置相机位置 .position
  • 改变 .position 后如果不重新调用 lookAt()，相机的视线方向不会自动更新
• 使用时机：当需要改变相机观察方向时调用

2. .position 属性

• 功能：设置相机在世界坐标系中的位置
• 重要特性 ：
  • 仅改变 .position 只会更新视图矩阵的平移部分
  • 相机移动但镜头指向不变（像人走路不转头）
  • 与 lookAt() 配合使用才能实现完整的视角控制

两种相机动画实现方式

1. 相机直线运动动画

function render() {
  camera.position.x += 1;  // 沿X轴直线移动
  camera.lookAt(scene.position);  // 保持看向场景中心
  renderer.render(scene, camera);
  requestAnimationFrame(render);
}

特点：

• 相机沿固定方向移动
• 需要调用 lookAt() 来保持观察方向
• 效果类似人走路且转头看向固定目标

2. 相机圆周运动动画

let angle = 0;
function render() {
  angle += 0.01;
  // 圆周运动公式
  camera.position.x = 半径 * Math.sin(angle);
  camera.position.z = 半径 * Math.cos(angle);
  camera.lookAt(scene.position);  // 始终看向圆心
  renderer.render(scene, camera);
  requestAnimationFrame(render);
}

特点：

• 相机围绕某个中心点做圆周运动
• 必须每帧调用 lookAt() 来保持看向圆心
• 会产生场景旋转的视觉效果（实际上是相机在绕场景旋转）

关键要点

1. 协同工作 ：.position 和 .lookAt() 必须配合使用才能实现理想的相机动画效果
2. 执行顺序 ：先设置 .position，再调用 .lookAt()
3. 更新频率：只要相机位置或方向发生变化，就需要在动画循环中更新这两个属性
4. 视觉效果 ：
   • 仅改变 .position = 相机移动，镜头方向不变
   • 仅调用 .lookAt() = 相机原地旋转镜头
   • 两者结合 = 相机边移动边调整观察方向

类比理解

可以把相机想象成一个人：

• .position = 人的位置（走到哪里）
• .lookAt() = 人的视线方向（看向哪里）
• 直线运动 = 人沿着直线走，眼睛看向固定目标
• 圆周运动 = 人绕着一个点转圈，眼睛一直盯着中心点

这种相机动画的实现方式是Three.js中实现场景漫游、视角变换等效果的基础。