企业官网建设流程全解析

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

核心概念

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

1..lookAt()方法

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

2..position属性

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

两种相机动画实现方式

1. 相机直线运动动画

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

特点：

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

2. 相机圆周运动动画

letangle=0;functionrender(){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中实现场景漫游、视角变换等效果的基础。