深入理解 Three.js 中的 PerspectiveCamera

在 Three.js 这个强大的 JavaScript 3D 库中，相机（Camera）是决定我们如何观察 3D 场景的关键要素。其中，PerspectiveCamera（透视相机）模拟了人眼观察世界的方式，为我们创建逼真的 3D 场景效果提供了重要支持。

1. PerspectiveCamera 基础概念

PerspectiveCamera遵循透视投影原理，即离相机越远的物体看起来越小，符合我们日常生活中的视觉经验。这与OrthographicCamera（正交相机）不同，正交相机观察到的物体无论远近大小一致，常用于 2D 场景或需要精确尺寸的工程图等场景。

2. 创建 PerspectiveCamera 实例

在 Three.js 中创建一个PerspectiveCamera实例非常简单，其构造函数接受四个参数：

js 复制代码

const camera = new THREE.PerspectiveCamera(
    fov, // 视野角度 (Field of View)，通常为45 - 75度
    aspect, // 宽高比，通常为画布的宽度除以高度
    near, // 近裁剪平面，定义相机能看到的最近距离
    far // 远裁剪平面，定义相机能看到的最远距离
);

例如：

js 复制代码

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.set(0, 0, 5); // 设置相机位置

在上述代码中，我们创建了一个视野角度为 75 度，宽高比根据窗口大小自适应，近裁剪平面为 0.1，远裁剪平面为 1000 的透视相机，并将其位置设置在 z 轴正方向 5 个单位处。

3. 常用属性及调整

视野角度（FOV）

视野角度决定了相机能够看到的场景范围。增大 FOV 会使场景看起来更广阔，如同使用广角镜头；减小 FOV 则会使场景看起来更聚焦，类似长焦镜头。你可以通过修改camera.fov属性来调整视野角度，并调用camera.updateProjectionMatrix()方法更新投影矩阵以应用更改：

js 复制代码

// 动态改变视野角度
function changeFOV() {
    camera.fov += 5;
    if (camera.fov > 120) {
        camera.fov = 45;
    }
    camera.updateProjectionMatrix();
}

相机位置与方向

通过camera.position属性可以设置相机在场景中的位置，它是一个THREE.Vector3对象，分别对应 x、y、z 轴坐标。同时，使用camera.lookAt(target)方法可以让相机看向某个目标点，target同样是一个THREE.Vector3对象。例如，让相机看向场景中心 (0, 0, 0)：

js 复制代码

const target = new THREE.Vector3(0, 0, 0);
camera.lookAt(target);

4. 实际应用示例

下面我们通过一个简单的示例，展示PerspectiveCamera在一个包含立方体的 3D 场景中的应用。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Three.js PerspectiveCamera Example</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script>
        // 创建场景
        const scene = new THREE.Scene();
        // 创建相机
        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.set(0, 0, 5);
        // 创建渲染器
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
        // 创建立方体
        const geometry = new THREE.BoxGeometry(1, 1, 1);
        const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
        const cube = new THREE.Mesh(geometry, material);
        scene.add(cube);
        function animate() {
            requestAnimationFrame(animate);
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;
            renderer.render(scene, camera);
        }
        animate();
    </script>
</body>
</html>

在这个示例中，我们创建了一个简单的 3D 场景，包含一个绿色的立方体。通过PerspectiveCamera，我们能够以透视的方式观察这个立方体，当立方体旋转时，透视效果让其看起来更加真实。

通过以上对PerspectiveCamera的介绍，你可以看到它在 Three.js 构建 3D 场景中的重要性和灵活性。掌握好透视相机的使用，将为你创建丰富多彩、逼真的 3D 世界打下坚实的基础。