WebGL教程_Three.js教程_郭隆邦技术博客 郭隆邦_技术博客 一对一班

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

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

本站版权所有,本站任何内容未经允许不得转载   备案号:豫ICP备16004767号 QQ群:187740169 (WebGL-Three.js教程)   邮箱:guolongbang@163.com