ThreeJS相机概念知识----(5)

365 阅读2分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第5天,点击查看活动详情 >


Threejs文档中的Camera为抽象类,我们真正使用到的为那些以Camera结尾的类;比如透视相机(PerspectiveCamera)。相机可以理解为多人游戏中每个人有不同的视角,每个视角相对应的为一个相机。


立体相机(StereoCamera)

多用于VR场景中,通过两个摄像机模拟眼睛,用两个摄像机做两个渲染;类似那种红蓝两色的眼镜,通过红蓝两色使两个眼睛可见的事物不同达到立体效果;


立方相机(CubeCamera)

立方相机需要做六次渲染,上、下、左、右、前、后六个面,可以对周围进行渲染,可以用于天空盒子的制作;


正交相机(OrthographicCamera)

用于场景渲染,但没有透视效果,没有近大远小的视觉变化效果;

// 正交相机
new THREE.OrthographicCamera( left, right , top , bottom , near, far)
// 参数代表视锥体的上下左右集远近
// 以坐标原点为中心,向四个方向进行扩张,left/bottom为负数;
// near/far 为相机设置渲染的范围,过远过近都会不可见,卡在范围零界点的,也只会显示卡进来的那一部分;默认值为1/1000
// 会受画布的影响进行拉伸,如果你的模型出现变形等异常现象,可以先自查画布的比例;
// 解决:获取画布的宽高,为相机上线左右设置为
new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 1, 1000);

透视相机(PerspectiveCamera)

模型场景中最常用的相机,具有透视效果;

// 透视相机
new THREE.PerspectiveCamera(fov, aspect, near, far)
// fov为视锥体垂直视野角度,值过大时会导致视觉扭曲,建议取值45,是一般眼睛的可视的垂直角度;
// 图1为45度效果,图2为145度效果
// aspect = width / height 视锥长宽比,可与承载模型的canvas的长宽比保持一致;
// 获取模型的距离值可以通过length获取
mesh.position.length();

有时在我们的模型中会出现模型闪烁,就是黑色的一闪一闪感觉像是卡顿了,这种情况可能是由于两个模型之间的距离过近,导致模型面片之间出现遮挡,距离过近导致相机无法正确判别哪个在前哪个在后,导致这种渲染的bug,解决办法还是避免两个模型面片之间距离过近;

截屏2022-07-31 22.29.19.png

图1

截屏2022-07-31 22.29.36.png

图2

如果有哪里描述不准确或者有问题,欢迎大佬指正!
(≖ᴗ≖)✧