前言
three.js中的摄像机是用来控制场景中的视角和观察者位置的对象。
摄像机的类型
three.js提供了几种不同类型的摄像机,包括透视摄像机(PerspectiveCamera)和正交摄像机(OrthographicCamera)。
透视摄像机(PerspectiveCamera)
透视摄像机模拟了人眼观察物体的效果,具有近大远小的透视效果。它通过设置视角(fov)、宽高比(aspect)、近裁剪面(near)和远裁剪面(far)来定义视野范围。透视摄像机通常用于创建逼真的三维场景。
PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )
fov — 摄像机视锥体垂直视野角度
aspect — 摄像机视锥体长宽比(通常以网页的长宽比来设置此参数)
near — 摄像机视锥体近端面
far — 摄像机视锥体远端面
这些参数一起定义了摄像机的 viewing frustum(视锥体),即下图的所示的几何图形。
near clip plane(视锥体近端面)上的图案就是最终呈现在电脑屏幕上的效果,场景中的物体只要出现在
far与near之间就会根据比例通过射线投影到near clip plane上,所以会出现近大远小(黄球大于红球)的效果。
官网的效果图 点击网址跳转至官网
正交摄像机(OrthographicCamera)
正交摄像机则没有透视效果,物体在屏幕上的大小保持不变。它通过设置左右上下裁剪面的位置来定义视野范围。正交摄像机通常用于创建二维场景或需要保持物体大小一致的场景。
OrthographicCamera( left : Number, right : Number, top : Number, bottom : Number, near : Number, far : Number )
left — 摄像机视锥体左侧面。
right — 摄像机视锥体右侧面。
top — 摄像机视锥体上侧面。
bottom — 摄像机视锥体下侧面。
near — 摄像机视锥体近端面。
far — 摄像机视锥体远端面。这些参数一起定义了摄像机的 viewing frustum(视锥体)。
官网的效果图
摄像机的用途
使用three.js的摄像机,可以设置摄像机的位置、目标点、旋转角度等属性,以及通过控制摄像机的移动和旋转来改变视角。摄像机还可以与其他元素(如灯光、物体)进行组合,以实现更复杂的场景效果
(如 camera + light 实现类似手持手电筒的效果,后面会有对应案例)。 总之,three.js的摄像机是控制场景视角和观察者位置的重要工具,可以通过设置不同的摄像机类型和属性来实现不同的视觉效果。
总结
摄像头的选用取决于应用场景,在我接触大部分场景(实景三维,数字孪生)下选用的都是透视摄像机(PerspectiveCamera),所以后续文章均以PerspectiveCamera为例。