【threejs】三要素之相机

相机

相机（Camera）用于定义场景的视角。Three.js 提供了多种相机类型，如：

• 透视相机 PerspectiveCamera
• 正交相机 OrthographicCamera
• 立方相机 CubeCamera
• 阵列相机 ArrayCamera
• 立体相机 StereoCamera

其中最常用的是透视相机（PerspectiveCamera），它模拟人眼的视角，具有近大远小的透视效果。

文档：https://threejs.rocyuan.top/docs/#api/zh/cameras/PerspectiveCamera

创建透视相机

import * as THREE from "three";

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

创建透视相机有四个参数，超出视野范围会进行裁切：

• fov：视场角度，以度为单位
• aspect：相机视锥体长宽比
• near：相机视锥体近端面
• far：相机视锥体远端面

常见操作

相机位置

相机的位置可以通过相机的 position 属性来设置，默认值为 (0, 0, 0)。

camera.position.set(0, 0, 5);

相机朝向

相机朝向可以通过相机的 lookAt 方法来设置，它接受一个 THREE.Vector3 （三维向量）作为参数，表示相机看向的目标点。

camera.lookAt(0, 0, 0);

调整视场角（FOV）

视场角（FOV）是相机视野的角度，它可以通过相机的 fov 属性来设置。

camera.fov = 45; // 将视场角设置为 45 度
camera.updateProjectionMatrix(); // 修改 fov 后需要调用此方法更新相机

调整宽高比（Aspect Ratio）

宽高比（Aspect Ratio）是相机视锥体的长宽比，它可以通过相机的 aspect 属性来设置。

camera.aspect = window.innerWidth / window.innerHeight; // 将宽高比设置为 window 的宽高比
camera.updateProjectionMatrix(); // 修改 aspect 后需要调用此方法更新相机

调整近裁剪面和远裁剪面

近裁剪面（Near Clipping Plane）和远裁剪面（Far Clipping Plane）是相机视锥体的两个面，它们可以通过相机的 near 和 far 属性来设置。

camera.near = 0.1; // 将近裁剪面设置为 0.1
camera.far = 1000; // 将远裁剪面设置为 1000
camera.updateProjectionMatrix(); // 修改 near 和 far 后需要调用此方法更新相机

相机旋转

相机的旋转可以通过相机的 rotation 属性来设置，单位是弧度。

注意：threejs 中所有的旋转单位均为弧度

弧度、角度 互转参考：【js】角度弧度转换

camera.rotation.x = Math.PI / 4; // 将相机绕 x 轴旋转 45 度