建议先阅读完文章，再查看 实例代码 (opens new window)

相机类型与属性

教程： 透视相机：

正交相机：

• 了解相机类型：Three.js 提供了多种相机类型，包括透视相机 PerspectiveCamera (opens new window) 和正交相机OrthographicCamera (opens new window)。
• 相机属性：学习相机的基本属性，如可视角度（fov）、实际窗口的纵横比（aspect）、近裁剪面（near）和远裁剪面（far）。

只有离相机的距离大于 near 值，小于 far 值，且在相机的可视角度之内，才能被相机投影到。 让我们通过几张透视照相机投影的图详细了解这些参数。

透视图中，灰色的部分是视景体，是可能被渲染的物体所在的区域。

fov 是视景体竖直方向上的张角（是角度制而非弧度制），如侧视图所示。

aspect 等于 width / height，是照相机水平方向和竖直方向长度的比值，通常设为 Canvas 的横纵比例。

near 和 far 分别是照相机到视景体最近、最远的距离，均为正值，且 far 应大于 near。

示例： 建议先阅读完文章，再查看 实例代码 (opens new window)

// 创建透视相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

相机控制与动画

教程：

• 相机控制：实现用户或程序对相机的控制，如旋转、缩放和平移。
• 动画：使用requestAnimationFrame创建平滑的相机动画。

示例：

// 简单的相机旋转动画
function animate() {
  camera.position.z += 0.1; // 向前移动相机
  camera.rotation.x += 0.01; // 绕x轴旋转相机
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}
animate();

视锥体与裁剪

教程：

• 视锥体：理解相机的视锥体，它决定了哪些对象会被渲染。
• 裁剪机制：学习近裁剪面和远裁剪面的作用，以及如何调整它们来优化性能。

示例：

// 调整相机的近裁剪面和远裁剪面
camera.near = 0.01;
camera.far = 5000;

多相机应用

教程：

• 多相机技术：了解如何在同一个场景中使用多个相机，例如，用于不同的视角或渲染到不同的渲染目标。
• 场景切换：学习如何在不同相机之间切换，以实现多视角渲染。

示例：

// 创建第二个相机
const camera2 = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
camera2.position.set(10, 15, 20); // 设置第二个相机的位置

// 在两个相机之间切换渲染
let currentCamera = camera;
function render() {
  if (someCondition) {
    currentCamera = camera2; // 切换到第二个相机
  } else {
    currentCamera = camera; // 切换回第一个相机
  }
  renderer.render(scene, currentCamera);
  requestAnimationFrame(render);
}
render();