4.Three.js 中 Camera 摄像机详解

一、什么是 Camera？

在 Three.js 中，Camera（摄像机）决定了我们如何观察三维场景。

你可以把它理解为我们“眼睛”的位置和方向，场景中的物体再复杂，如果没有摄像机，就没有“观察角度”，也就不会渲染在屏幕上。

Three.js 中的 Camera 类被设计为抽象类，常用的子类有两种：

PerspectiveCamera（透视摄像机）：更符合人眼的视觉方式。
OrthographicCamera（正交摄像机）：常用于2D界面、建筑图等场景。

本篇文章聚焦于 Camera 的通用概念、构造参数和基本使用方式，后续我会为每个摄像机类型单独写文章深入讲解。

二、摄像机的构成原理

一个摄像机主要包含以下几个核心参数：

参数	说明
position	摄像机在三维空间中的位置（`Vector3`）
lookAt	摄像机的朝向目标点，通常设置为场景中心
near, far	可视范围（近平面与远平面之间的物体才会被渲染）
fov	视角（field of view），透视摄像机特有
aspect	宽高比，通常为画布宽度/高度
left/right/top/bottom	正交摄像机特有的可视范围边界定义

三、最简单的 Camera 示例（透视摄像机）

我们先创建一个最基本的 Three.js 场景，添加一个透视摄像机并渲染一个立方体。

示例代码（使用 Vue 3 + Composition API + Three.js）：

import { onMounted, ref } from 'vue'
import * as THREE from 'three'export default {setup() {const containerRef = ref<HTMLDivElement | null>(null)onMounted(() => {const scene = new THREE.Scene()// 创建透视摄像机const camera = new THREE.PerspectiveCamera(75,                                      // fov：视角window.innerWidth / window.innerHeight, // aspect：宽高比0.1,                                     // near：近平面1000                                     // far：远平面)camera.position.set(0, 0, 5) // 设置摄像机位置camera.lookAt(0, 0, 0)       // 看向场景中心const renderer = new THREE.WebGLRenderer()renderer.setSize(window.innerWidth, window.innerHeight)containerRef.value?.appendChild(renderer.domElement)// 添加一个简单的立方体const geometry = new THREE.BoxGeometry()const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })const cube = new THREE.Mesh(geometry, material)scene.add(cube)// 渲染循环function animate() {requestAnimationFrame(animate)cube.rotation.x += 0.01cube.rotation.y += 0.01renderer.render(scene, camera)}animate()})return () => <div ref={containerRef} />}
}

🔍 核心解释：

PerspectiveCamera(fov, aspect, near, far) 是透视摄像机的构造函数。
camera.position.set(...) 设置相机的位置坐标。
camera.lookAt(...) 指定相机的朝向目标。
摄像机需要和 renderer.render(scene, camera) 一起配合使用，才会生效。

四、Camera 的常见使用场景

使用场景	推荐摄像机类型
游戏视角（如第一人称/第三人称）	PerspectiveCamera（透视）
俯视图/地图/界面UI	OrthographicCamera（正交）
建筑建模图纸	OrthographicCamera
数据可视化	视角稳定时可考虑正交，动态可用透视

五、Camera 操作技巧

动态改变位置：可以使用动画库（如 gsap）平滑移动摄像机。

添加 OrbitControls（轨道控制器）：

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'const controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true

这可以让用户用鼠标自由旋转视角，非常适合初期调试或展示场景。