Three.js 相机（Camera）的使用详解

在 Three.js 中，相机（Camera）扮演着至关重要的角色，它决定了我们从哪个角度观察三维场景。合理地设置和运用相机，能够为用户呈现出丰富多样且引人入胜的视觉效果。接下来，我们将深入探讨 Three.js 中相机的相关知识。

相机的类型

Three.js 提供了多种类型的相机，其中最常用的两种是PerspectiveCamera（透视相机）和OrthographicCamera（正交相机）。

PerspectiveCamera（透视相机）

透视相机模拟了人眼观察世界的方式，离相机越远的物体看起来越小，产生近大远小的透视效果。这种相机常用于创建逼真的 3D 场景，比如游戏、虚拟现实体验等。

创建一个PerspectiveCamera的示例代码如下：

js 复制代码

// 参数解释：
// fov - 视野角度（垂直方向），通常设置为45 - 75之间
// aspect - 画布的宽高比
// near - 相机能够看到的最近距离
// far - 相机能够看到的最远距离
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// 将相机放置在场景中的某个位置
camera.position.set(0, 0, 5);

OrthographicCamera（正交相机）

正交相机则不会产生透视效果，物体无论距离相机多远，大小都保持不变。它常用于 2D 场景、工程图纸展示等对尺寸比例有严格要求的场景。

创建OrthographicCamera的代码示例如下：

js 复制代码

// 参数解释：
// left - 相机视锥体左侧面的位置
// right - 相机视锥体右侧面的位置
// top - 相机视锥体上侧面的位置
// bottom - 相机视锥体下侧面的位置
// near - 相机能够看到的最近距离
// far - 相机能够看到的最远距离
const camera = new THREE.OrthographicCamera(-window.innerWidth / 2, window.innerWidth / 2, window.innerHeight / 2, -window.innerHeight / 2, 0.1, 1000);
// 将相机放置在场景中的某个位置
camera.position.set(0, 0, 5);

相机的位置与方向

相机的位置和方向决定了它在场景中的观察点和视角。我们可以通过修改相机的position属性来改变其位置，使用lookAt方法来指定相机所看向的目标点。

例如，让相机看向场景中心（0, 0, 0）：

js 复制代码

camera.lookAt(new THREE.Vector3(0, 0, 0));

如果想让相机围绕某个点进行旋转观察，可以通过三角函数结合position和lookAt来实现。

相机与渲染

在 Three.js 中，相机需要与渲染器（Renderer）配合使用才能将场景渲染到屏幕上。通常，我们会在渲染循环中更新相机的状态（如果有必要的话），然后调用渲染器的render方法进行渲染。

js 复制代码

function animate() {
    requestAnimationFrame(animate);
    // 在这里可以更新相机的位置、方向等状态
    renderer.render(scene, camera);
}
animate();

掌握相机的使用是 Three.js 开发中的基础且关键的一环。通过合理选择相机类型、精确控制相机的位置和方向，我们能够打造出更加生动、富有表现力的三维场景。希望本文对你理解和使用 Three.js 中的相机有所帮助。