Three.js中Camera对象的构造器

2023-09-14 05:14:19

Three.js源码解读——Camera系列五：Camera对象构造器

导读：这是我参与「2022首次更文挑战的第10天，活动详情查看：2022首次更文挑战」。

各位好，我是前端开发工程师Jack，上一节我们讲到了Three.js中关于焦距的概念，焦距决定了相机的视野范围，焦距过大或过小会带来很多问题。本节我们就来说一说Three.js的Camera对象，我们知道使用three.js的摄影机时，必须确定相机的类型和构造器类型，既可以指定相机的参数，也可以直接调用默认参数构造出相机对象。本节我们就来深入研究一下Camera对象的构造器。

Camera对象也继承自Object3D，实现了变换的方法，同时暴露了Camera独有的类型类型(perspectiveCamera/OrthographicCamera)，FOV（视场）、Aspect（纵横比）、Near（近平面）、Far（远平面）。

Camera(fov, aspect, near, far)

参数：

fov: 相机的视场角，以角度为单位
aspect: 相机的纵横比，为相机的宽度与高度之比
near: 相机最近的可视距离
far: 相机最远的可视距离

返回值：
一个Camera对象

示例：

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

Camera对象的属性：

fov: 相机的视场角，以角度为单位
aspect: 相机的纵横比，为相机的宽度与高度之比
near: 相机最近的可视距离
far: 相机最远的可视距离
position: 相机的位置
rotation: 相机的旋转
up: 相机的前进方向
matrixWorld: 相机的世界矩阵
matrixWorldInverse: 相机的世界矩阵的逆矩阵
projectionMatrix: 相机的投影矩阵
projectionMatrixInverse: 相机的投影矩阵的逆矩阵
viewMatrix: 相机的视图矩阵
viewMatrixInverse: 相机的视图矩阵的逆矩阵

Camera对象的构造器提供了四种方式的重载：

Camera(): 构造一个透视相机
Camera(fov: number, aspect: number, near: number, far: number): 构造一个透视相机，并指定相机的视场角、纵横比、近平面和远平面
Camera(left: number, right: number, top: number, bottom: number, near: number, far: number): 构造一个正交相机，并指定相机的左边界、右边界、上边界、下边界、近平面和远平面
Camera(fov: number, aspect: number, near: number, far: number, target: Vector3): 构造一个透视相机，并指定相机的视场角、纵横比、近平面、远平面和目标点

Camera对象的构造器中的参数介绍：

fov: 相机的视场角，以角度为单位
aspect: 相机的纵横比，为相机的宽度与高度之比
near: 相机最近的可视距离
far: 相机最远的可视距离
left: 相机的左边界
right: 相机的右边界
top: 相机的上边界
bottom: 相机的下边界
target: 相机的目标点

Camera对象的构造器中的返回值介绍：

Camera(): 构造一个透视相机
Camera(fov: number, aspect: number, near: number, far: number): 构造一个透视相机，并指定相机的视场角、纵横比、近平面和远平面
Camera(left: number, right: number, top: number, bottom: number, near: number, far: number): 构造一个正交相机，并指定相机的左边界、右边界、上边界、下边界、近平面和远平面
Camera(fov: number, aspect: number, near: number, far: number, target: Vector3): 构造一个透视相机，并指定相机的视场角、纵横比、近平面、远平面和目标点

Camera对象的构造器中的示例介绍：

const camera = new THREE.PerspectiveCamera(): 构造一个透视相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000): 构造一个透视相机，并指定相机的视场角、纵横比、近平面和远平面
const camera = new THREE.OrthographicCamera(left, right, top, bottom, near, far): 构造一个正交相机，并指定相机的左边界、右边界、上边界、下边界、近平面和远平面
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000, target): 构造一个透视相机，并指定相机的视场角、纵横比、近平面、远平面和目标点

Camera对象的构造器中的注意事项：