Three.js 相机对象 .lookAt() 方法

Question

Threejs 相机对象 Camera 的 .lookAt() 方法用来设置相机对象看向的位置，比如在Threejs三维场景中通过相机对象.lookAt()方法指向场景中的一个球体，球体渲染出来后会显示在Canvas画布的正中间，.lookAt() 方法就是旋转相机对象以面向世界空间中的某个点，本质上改变的是相机对象的视图矩阵，具体点说是视图矩阵的旋转部分，如果你有兴趣了解Threejs是如何封装的 .lookAt() 方法可以参考src目录下Object.js文件，如果你想了解视图矩阵的知识可以学习图形学内容。

.lookAt() 方法的参数是三维空间中一个点世界坐标xyz，参数可以是分别输入xyz参数形式 .lookAt(x,y,z)，参数也可以是一个表示坐标的三维向量对象 .lookAt(new THREE.Vector3(x,y,z))

// 相机对象指向坐标原点，scene.position的默认是new THREE.Vector3(0,0,0)
camera.lookAt(scene.position);

// 相机对象指向一个网格模型对象Mesh，渲染后Mesh会显示到Canvas画布的正中间
camera.lookAt(Mesh.position);

// 直接设置具体的坐标值
camera.lookAt(0,0,0);

// 通过三维向量直接设置坐标值
camera.lookAt(new THREE.Vector3(10,0,20));

Threejs 执行相机 .lookAt() 方法时候，会从相机的位置属性 .position 获取数据，进行矩阵计算，用于 threejs 模型渲染，所以执行 .lookAt() 方法之前，需要先设置相机的位置属性。

// 执行lookAt方法之前，需要先设置相机的位置属性
camera.position.set(200, 300, 200);
camera.lookAt(0,0,0);

执行 .lookAt() 方法改变的是视图矩阵旋转部分，也就是将坐标点从世界坐标系转换至摄像机坐标系的矩阵，执行 .lookAt() 方法之前设置 .position 属性会影响视图矩阵旋转部分，执行 .lookAt() 方法之后，再改变 .position 值，不再次执行 .lookAt() 方法，这时候不会影响视图矩阵的旋转部分，只会影响视图矩阵的平移部分。

关于相机对象 .lookAt() 方法 Three.js 是如何封装的，可以参考文章 Three.js投影矩阵和视图矩阵 中关于 Threejs 视图矩阵部分的介绍。