参考地址
首页前端教程
【Three.js】知识梳理五：Three.js相机Camera
我心飞翔 • 2023年5月10日 上午10:36 • 前端教程 • 阅读 1364
目录
1. 相机类型
1.1 正交相机
1.2 透视相机
2. 相机属性
2.1 视角（FOV）
2.2 宽高比（Aspect）
2.3 近裁剪面（Near）和远裁剪面（Far）
3. 不同方向的投影视图
3.1 x轴方向观察
3.2 y轴方向观察
3.3 z轴方向观察z轴方向观察
4. 相机动画(.position和.lookAt())
4.1 相机运动动画
4.2 相机圆周运动相机圆周运动
4.3 执行lookAt()计算相机视线方向
5. 相机控件OrbitControls
5.1 OrbitControls使用
6. 相机控件MapControls
6.1 MapControls使用
7. 窗口变化的自适应渲染
7.1 正投影相机OrthographicCamera自适应渲染
7.2 透视投影相机PerspectiveCamera自适应渲染
1. 相机类型
Three.js 主要提供了两种类型的相机：正交相机（OrthographicCamera）和透视相机（PerspectiveCamera）。
1.1 正交相机
正交相机（OrthographicCamera）使用正交投影进行渲染。在正交投影中，物体的大小不会随着距离的增加而减小，这意味着所有物体在渲染时保持相同的尺寸，不受距离的影响。这种相机在制作 2D 游戏和 CAD 工具等应用中非常有用。
【Three.js】知识梳理五：Three.js相机Camera
创建正交相机的代码如下：
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
1.2 透视相机
透视相机（PerspectiveCamera）使用透视投影进行渲染。在透视投影中，物体的大小会随着距离的增加而减小，这使得远离相机的物体看起来更小，符合现实世界中的透视效果。这种相机在制作 3D 游戏和仿真应用中非常常见。
【Three.js】知识梳理五：Three.js相机Camera
创建透视相机的代码如下：
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构成了视锥体高度方向
2. 相机属性
Three.js 中的相机具有一些基本属性，这些属性决定了相机的视角和视野。
2.1 视角（FOV）
仅透视相机具有视角属性（FOV）。视角表示相机的垂直视野范围，单位为度。较大的视角值会导致更大的视野，但可能会产生畸变。较小的视角值则会产生更窄的视野和更低的畸变。
2.2 宽高比（Aspect）
仅透视相机具有宽高比属性。宽高比表示相机水平视野范围与垂直视野范围的比值。通常，宽高比应该与渲染目标（如 Canvas 或 WebGLRenderTarget）的宽高比相同，以避免图像被拉伸或压缩。
2.3 近裁剪面（Near）和远裁剪面（Far）
近裁剪面和远裁剪面定义了相机的渲染范围。位于近裁剪面之前的物体和位于远裁剪面之后的物体都不会被渲染。为了提高渲染性能，通常应该尽量将近裁剪面和远裁剪面之间的距离设置得较小。
