Three.js 相机位置属性 .position

Question

Threejs 相机位置属性 .position 简单说，就像生活中你拿一个照相机拍照，如果相机在不同的位置，拍照的效果肯定是不同的，对于Threejs中的虚拟相机是一样的，如果从底层矩阵计算的角度看，Threejs相机位置属性.position影响着相机对象视图矩阵的计算，一方面是.lookAt()方法读取相机位置属性.position的值计算视图矩阵的旋转部分，另一面是threejs直接通过位置属性.position偏移距离计算视图矩阵的平移部分，关于视图矩阵的概念，可以参考相关图形学书籍。

一般程序先设置好相机位置 .position（眼睛位置），然后通过 .lookAt() 方法设置相机目标观察点。

// 设置相机位置(眼睛位置或者说相机篇拍照位置)
camera.position.set(200, 300, 200);
//摄像机镜头指向的具体坐标位置
camera.lookAt(0,0,0);

漫游（视线不变）或平移效果

通过改变相机的位置属性.position，可以在三维场景中产生漫游效果，就好像一个人走在院子等场景中，人眼看到的效果一样。
改变.position属性后，如果不执行.lookAt()方法，相机的观察方向不变，因为改变.position属性只会改变相机对象视图矩阵的平移部分，只有执行.lookAt()方法才会从.position属性提取数据计算视图矩阵的旋转部分。如果你对视图矩阵没有概念，只需要记住仅仅改变.position属性，不再执行.lookAt()方法，相当于生活中，摄像机移动，但是镜头指向的方向不变，或者说人一直走，但是人的头不转动。

// 可以在threejs周期性执行的渲染函数中改变相机的位置参数产生小场景模型平移或大场景中漫游的效果
function render() {
  renderer.render(scene, camera);
  requestAnimationFrame(render);
  //相机位置x坐标一直变大，可以理解为人沿着x轴方向漫游或者说场景在v轴方向平移
  camera.position.x+=1
}

绕转观察

一个相机对象绕转一个坐标中心做圆周运动，同时观看方向一直指向该坐标中心，需要每次改变.position属性后，重新一遍.lookAt()方法以便于更新相机对象视图矩阵的旋转部分，形象点说就是改变相机观察的实现方向，因为相机镜头指向的方向不会自动随着相机位置变化而自动变化，需要手动执行.lookAt()方法。

你可以在threejs程序中把下面相机对象的代码放在渲染函数render中周期性改变，可以观察到三维整个场景的旋转动画效果，本质上并不是三维场景旋转了，而是相机绕着三维场景进行旋转，同时保持镜头指向三维场景固定的位置点。

// 声明一个变量表示角度值
var angle = 0
function render() {
  renderer.render(scene, camera); //执行渲染操作
  requestAnimationFrame(render);
  // 每次执行render函数，累加0.005改变角度值angle
  angle+=0.005
  // 重新设置相机位置，相机在XOY平面绕着坐标原点旋转运动
  camera.position.x=200*Math.sin(angle)
  camera.position.y=200*Math.cos(angle)
  // 相机位置改变后，注意执行.looAt()方法重新计算视图矩阵旋转部分
  // 如果不执行.looAt()方法，相当于相机镜头方向保持在首次执行`.lookAt()`的时候
  camera.lookAt(0,0,0);
}