4.1相机类型

4.1相机类型

4.1 相机类型详解

4.1.1 透视相机 (PerspectiveCamera)

透视相机是最常用的相机类型，它模拟了人眼的视觉效果，具有近大远小的透视特性。这意味着场景中的物体距离相机越远，在屏幕上看起来就越小。

构造函数：

THREE.PerspectiveCamera(fov, aspect, near, far)
​

• fov (Number): 视野角度（Field of View），以度数为单位。表示相机垂直方向的可视范围。常用的值是 45-75 度。

• aspect (Number): 宽高比（Aspect Ratio），通常是 canvas 的宽度除以高度。

• near (Number): 近裁剪面（Near Clipping Plane），表示相机可以渲染的最近距离。小于此距离的物体将被裁剪掉。

• far (Number): 远裁剪面（Far Clipping Plane），表示相机可以渲染的最远距离。大于此距离的物体将被裁剪掉。

代码示例：

// 创建透视相机
const fov = 75;
const aspect = window.innerWidth / window.innerHeight;
const near = 0.1;
const far = 1000;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
// 设置相机位置
camera.position.z = 5; // 将相机沿 Z 轴向后移动 5 个单位
​

工作原理：

透视相机通过将三维空间中的点投影到二维平面上来模拟透视效果。投影过程涉及到视锥体（frustum）的概念。视锥体是由相机的位置、视野角度、宽高比以及近裁剪面和远裁剪面定义的。只有位于视锥体内的物体才会被渲染。

应用场景：

• 游戏场景： 透视相机非常适合用于创建具有沉浸感的 3D 游戏环境。

• 建筑可视化： 可以逼真地模拟建筑内部和外部的视觉效果。

• 虚拟现实 (VR)： VR 应用通常使用透视相机来模拟用户的真实视角。

注意事项：

• near 和 far 的值需要根据场景的大小进行调整。如果 near 值太大或 far 值太小，可能会导致物体被裁剪掉。

• fov 的值会影响透视效果的强烈程度。较小的 fov 值会产生更强的透视效果，而较大的 fov 值会使场景看起来更扁平。

4.1.2 正交相机 (OrthographicCamera)

正交相机不模拟透视效果，它将三维空间中的点平行投影到二维平面上。这意味着场景中的物体无论距离相机多远，看起来都具有相同的大小。

构造函数：

THREE.OrthographicCamera(left, right, top, bottom, near, far)
​

• left (Number): 视锥体左侧面的 x 坐标。

• right (Number): 视锥体右侧面的 x 坐标。

• top (Number): 视锥体顶部的 y 坐标。

• bottom (Number): 视锥体底部的 y 坐标。

• near (Number): 近裁剪面。

• far (Number): 远裁剪面。

代码示例：

const aspect = window.innerWidth / window.innerHeight;
const cameraWidth = 10;
const cameraHeight = cameraWidth / aspect;
// 创建正交相机
const camera = new THREE.OrthographicCamera(
    cameraWidth / - 2, // left
    cameraWidth / 2, // right
    cameraHeight / 2, // top
    cameraHeight / - 2, // bottom
    1, // near
    1000 // far
);
// 设置相机位置
camera.position.z = 5;
​

工作原理：

正交相机通过平行投影将三维空间中的点映射到二维平面上。视锥体是一个长方体，由 left、right、top、bottom、near 和 far 定义。

应用场景：

• 2D 游戏： 正交相机非常适合用于创建 2D 游戏，因为它可以确保物体的大小在屏幕上保持一致。

• CAD/CAM 软件： 用于精确地显示 3D 模型，而不会受到透视变形的影响。

• 数据可视化： 用于显示图表、地图和其他需要精确比例的数据。

注意事项：

• left、right、top 和 bottom 的值决定了场景的缩放比例。

• 正交相机没有透视效果，因此场景看起来可能比较扁平。

4.1.3 相机控制

无论是透视相机还是正交相机，都需要进行适当的控制，以便用户可以自由地观察场景。Three.js 提供了多种相机控制方式，包括：

• OrbitControls： 允许用户围绕场景旋转、缩放和平移相机。

• FlyControls： 允许用户像飞行一样自由地移动相机。

• FirstPersonControls： 模拟第一人称视角，通常用于游戏开发。

代码示例 (OrbitControls):

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
// 创建 OrbitControls
const controls = new OrbitControls(camera, renderer.domElement);
// 在渲染循环中更新 controls
function animate() {
    requestAnimationFrame(animate);
    controls.update(); // 必须调用 update 方法
    renderer.render(scene, camera);
}
animate();
​

4.1.4 总结

透视相机和正交相机是 Three.js 中两种最常用的相机类型。透视相机模拟人眼的视觉效果，具有近大远小的透视特性，适合用于创建具有沉浸感的 3D 场景。正交相机不模拟透视效果，适合用于需要精确比例的 2D 游戏、CAD/CAM 软件和数据可视化应用。选择合适的相机类型取决于具体的应用场景和需求。同时，结合适当的相机控制方式，可以为用户提供更好的交互体验。

希望本文能够帮助你更好地理解 Three.js 中的相机类型，并在实际项目中灵活运用。