three中相机

三年三月2025-04-27 16:50

相机这个概念在htree中非常的重要，它分为透视相机和正交相机

透视相机：

特点： 模拟人的眼睛或则是真实相机的视觉效果，近大远小

使用场景： 适用于大多数的3D场景（比如游戏、建筑等）

主要参数：

视野角度（fov）： 垂直方向的可视范围，简单可以理解为手机拍照里面的广角的角度，广角视野会更多
宽高比（aspect）： 一般都是为画布的宽高比（写程序的话就是屏幕的宽高比）
近/远剪切平面（near/far）： 它这个是一个距离，远剪切距离要比近剪切平面要大，可能理解比较困难，先记住，超出这个范围之内的物体都会被裁掉，不可见

正交相机

特点： 相当于模拟人的眼睛透视效果，场景比较逼真，近大远小

使用场景： 一般用于2D场景

主要参数：

定义椎体边界： left / right /top / bottom
近/远剪切平面： near / far

通过辅助相机来看看效果

我们可以通过 CameraHelper这个类来帮助我们理解相关概念，这个类是专门用来辅助我们理解相机的

csharp 复制代码

const camera2 = new THREE.PerspectiveCamera(20, 16 / 9, 100, 300);
const cameraHelper = new THREE.CameraHelper(camera2);
scene.add(cameraHelper);
const gui = new GUI();
function onChange() {
    camera2.updateProjectionMatrix();
    cameraHelper.update();
}
gui.add(camera2, 'fov', [10, 20, 30, 40, 50]).name('fov:角度').onChange(onChange);
gui.add(camera2, 'aspect', {
    '16/9': 16 / 9,
    '4/3': 4 / 3,
    '1/1': 1 / 1,
}).name('aspect:宽高比').onChange(onChange);
gui.add(camera2, 'near', 0, 300).name('near:近截面距离').onChange(onChange);
gui.add(camera2, 'far', 300, 800).name('far:远截面距离').onChange(onChange);

fov参数的改变

fov相当于就是视野的角度，相关与普通相机与广角相机的区别，通过fov的角度的改变，可以看到的东西大小不一样

aspect的参数改变

主要是改变画布那边，也就是切面的比例

near/far的参数改变

其实就是切面离开眼睛（相机）的距离

最后交单了解下正交相机的参数调整效果

这个用的不多，有个感官的认识即可