一、什么是 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
  

  這可以讓用戶用鼠標自由旋轉視角，非常適合初期調試或展示場景。

---

六、總結

• Camera 是觀察場景的“眼睛”，必須有；

• 最常用的是 PerspectiveCamera 和 OrthographicCamera；

• 使用時注意 位置 + 朝向 + 可視范圍 三要素；

• 配合控制器能帶來更強交互體驗。

---

💡 預告

在后續系列中，我將詳細拆解每種攝像機的使用場景、構造參數、示例效果和高級技巧，敬請關注：

• ? 《透視攝像機詳解》

• ? 《正交攝像機詳解》

---

📌 如果你覺得有幫助，歡迎點贊、收藏、評論，你的支持是我持續創作的最大動力！