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

视频讲解参考课程《实战开发常用技能》课时第36小节

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视图矩阵部分的介绍。