Three.js 相机对象 .up 属性 - 文章教程

Three.js 相机对象 .up 属性

发布于 2021-08-09 字数 1895 浏览 992 评论 0

Threejs 相机对象 Camera 的 .up 属性表示相机对象的上方向,如果你有一定图形学基础,你可以很好的理解,如果没有图形学基础也没关系,你可以在 threejs 代码中更改 .up 的属性值,查看threejs 渲染结果有什么变化。

.up 属性默认值是 new THREE.Vector3(0,1,0),沿着y轴朝上,你可以使用下面代码看渲染效果绿色 y 轴数值向上,你可以改变 .up 属性的值,查看渲染结果变化。

camera.position.set(200, 300, 200);
// 浏览器控制台查看.up属性的默认值
console.log(`.up属性值`,camera.up);
camera.lookAt(0,0,0);
// 创建一个三维坐标系和一个圆台用来辅助显示up改变后渲染效果的改变
// 场景插入三维坐标轴,用来查看up属性值改变渲染效果区别
scene.add( new THREE.AxesHelper( 150 ) );
// 通过一个上下直径不同的圆柱来辅助查看up改变后渲染效果的改变
var geometry = new THREE.CylinderGeometry( 2, 5, 40, 32 )

把相机对象 .up 属性默认值 new THREE.Vector3(0,1,0) 改为相反方向 new THREE.Vector3(0,-1,0),沿着 y 轴负方向,up 改变后的渲染效果你可以看到,绿色 y 轴向下,与原来方向相反。

camera.up.set(0,-1,0)
//渲染效果:红色x轴向上
camera.up.set(1, 0, 0);
//渲染效果:蓝色z轴向上
camera.up.set(0, 0, 1);

Three.js 执行相机方法 .lookAt() 时候,会读取上方向 .up 的属性值,然后用于相机对象的矩阵计算,具体计算过程可以参考 Object3D.js 源码,如果你不关心 .lookAt() 方法具体封装代码,只需要记住使用的时候,如果你想改变 .up 的属性值,需要先重置 .up 的属性值,然后执行 .lookAt() 方法。

// 如果需要改变默认的up属性值,需在执行looAt()方法之前改变
camera.up.set(0, 0, 1);
camera.lookAt(0,0,0);

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

扫码加入群聊

发布评论

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

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

关于作者

泛泛之交

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

20 文章
3 评论
21160 人气
更多

推荐作者

qianbiandeboy

文章 0 评论 0

少女净妖师

文章 2 评论 0

zangqw

文章 0 评论 0

qq_7HKsl

文章 0 评论 0

伪装你

文章 1 评论 0