Three.js 相机对象 .lookAt() 方法 - 文章教程

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

发布于 2021-08-10 字数 2191 浏览 1185 评论 0

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

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

偏爱自由

这个人比较懒,什么都没有填写!

17 文章
2 评论
20986 人气
更多

推荐作者

qianbiandeboy

文章 0 评论 0

少女净妖师

文章 2 评论 0

zangqw

文章 0 评论 0

qq_7HKsl

文章 0 评论 0

伪装你

文章 1 评论 0