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

一、什么是 Camera？

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

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

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

• PerspectiveCamera（透视摄像机）：更符合人眼的视觉方式。

• OrthographicCamera（正交摄像机）：常用于2D界面、建筑图等场景。

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

二、摄像机的构成原理

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

三、最简单的 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.01
        cube.rotation.y += 0.01
        renderer.render(scene, camera)
      }
      animate()
    })

    return () => <div ref={containerRef} />
  }
}

🔍 核心解释：

• PerspectiveCamera(fov, aspect, near, far) 是透视摄像机的构造函数。

• camera.position.set(...) 设置相机的位置坐标。

• camera.lookAt(...) 指定相机的朝向目标。

• 摄像机需要和 renderer.render(scene, camera) 一起配合使用，才会生效。

四、Camera 的常见使用场景

五、Camera 操作技巧

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

• 添加 OrbitControls（轨道控制器）：

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

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

六、总结

• Camera 是观察场景的“眼睛”，必须有；

• 最常用的是 PerspectiveCamera 和 OrthographicCamera；

• 使用时注意 位置 + 朝向 + 可视范围 三要素；

• 配合控制器能带来更强交互体验。

💡 预告

在后续系列中，我将详细拆解每种摄像机的使用场景、构造参数、示例效果和高级技巧，敬请关注：

• ✅ 《透视摄像机详解》

• ✅ 《正交摄像机详解》

📌 如果你觉得有帮助，欢迎点赞、收藏、评论，你的支持是我持续创作的最大动力！