Three.js相机Camera控件知识梳理

原创

已于 2024-12-17 19:32:22 修改 · 1.8k 阅读

标签

#three.js #3d

于 2024-12-17 19:28:22 首次发布

Three.js 主要提供了两种类型的相机：正交相机（OrthographicCamera）和透视相机（PerspectiveCamera）。

正交相机（OrthographicCamera）使用正交投影进行渲染。在正交投影中，物体的大小不会随着距离的增加而减小，这意味着所有物体在渲染时保持相同的尺寸，不受距离的影响。这种相机在制作 2D 游戏和 CAD 工具等应用中非常有用。

创建正交相机的代码如下：

const camera = new THREE.OrthographicCamera(left, right, top, bottom, near, far);

// 正投影相机案例

const width = window.innerWidth; //canvas画布宽度

const height = window.innerHeight; //canvas画布高度

const k = width / height; //canvas画布宽高比

const s = 600;//控制left, right, top, bottom范围大小

const camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 8000);

参数(属性)	含义
left	渲染空间的左边界
right	渲染空间的右边界
top	渲染空间的上边界
bottom	渲染空间的下边界
near	near属性表示的是从距离相机多远的位置开始渲染，一般情况会设置一个很小的值。默认值0.1
far	far属性表示的是距离相机多远的位置截止渲染，如果设置的值偏小小，会有部分场景看不到。默认值2000

透视相机（PerspectiveCamera）使用透视投影进行渲染。在透视投影中，物体的大小会随着距离的增加而减小，这使得远离相机的物体看起来更小，符合现实世界中的透视效果。这种相机在制作 3D 游戏和仿真应用中非常常见。

创建透视相机的代码如下：

const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);

//透视相机案例

// width和height用来设置Three.js输出的Canvas画布尺寸(像素px)

const width = 800; //宽度

const height = 500; //高度

// 30:视场角度, width / height:Canvas画布宽高比, 1:近裁截面, 3000：远裁截面

const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);

参数	含义
fov	相机视锥体竖直方向视野角度
aspect	相机视锥体水平方向和竖直方向长度比，一般设置为Canvas画布宽高比width / height
near	相机视锥体近裁截面相对相机距离
far	相机视锥体远裁截面相对相机距离，far-near构成了视锥体高度方向