Three.js 是一个强大的 3D 引擎，常用于 WebGL 相关的 3D 场景渲染。它提供了不同的摄像机类型来捕捉场景，包括透视摄像机和正交摄像机 (OrthographicCamera)。在本文中，我们将深入探讨 OrthographicCamera 的使用，结合 Three.js 中的音频系统，详细介绍如何创建 3D 场景、设置正交摄像机、处理音频播放，并涵盖相关属性及方法。

1. 什么是 OrthographicCamera

OrthographicCamera 是一种正交投影摄像机，它与透视摄像机不同，不考虑距离物体的远近，所有的物体在渲染时尺寸相同。这非常适合一些 2D UI 叠加层、等距视图或建筑建模场景。

1.1 构造函数

const camera = new THREE.OrthographicCamera(left, right, top, bottom, near, far);

• left, right, top, bottom: 设置相机的视锥体边界。
• near, far: 相机的近剪裁面和远剪裁面。

1.2 常用属性和方法

• position: 设置摄像机的位置。
• zoom: 调整视图的缩放。
• updateProjectionMatrix(): 当摄像机参数变化时，必须调用该方法更新摄像机的投影矩阵。

2. 基本使用示例：创建 OrthographicCamera

我们首先从一个简单的示例入手，展示如何在 Three.js 场景中使用 OrthographicCamera 渲染一个简单的立方体。

2.1 代码示例

// 创建场景
const scene = new THREE.Scene();

// 创建正交摄像机
const aspectRatio = window.innerWidth / window.innerHeight;
const camera = new THREE.OrthographicCamera(
  -10 * aspectRatio, 10 * aspectRatio, 10, -10, 1, 1000
);
camera.position.set(10, 10, 10);
camera.lookAt(0, 0, 0);

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.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();

2.2 示例解析

• 创建正交摄像机: 通过 OrthographicCamera 构造函数定义相机视锥边界，并将相机设置在场景的合适位置。
• 立方体的旋转: 在动画循环中，通过修改立方体的旋转来展示正交投影如何影响物体显示。
• 投影矩阵更新: 如果视锥参数改变，如调整 zoom，需要调用 camera.updateProjectionMatrix() 更新摄像机的投影矩阵。

3. 结合音频：在 Three.js 场景中播放音频

Three.js 提供了内置的音频系统，通过 AudioListener 和 PositionalAudio 可以实现音频播放并与 3D 场景中的物体交互。

3.1 使用步骤

1. 创建 AudioListener 并将其添加到摄像机上。
2. 创建 PositionalAudio 对象并加载音频文件。
3. 将音频绑定到某个 3D 对象（如立方体），并设置音频属性。

3.2 代码示例：正交摄像机中的音频播放

// 创建场景
const scene = new THREE.Scene();

// 创建正交摄像机
const aspectRatio = window.innerWidth / window.innerHeight;
const camera = new THREE.OrthographicCamera(
  -10 * aspectRatio, 10 * aspectRatio, 10, -10, 1, 1000
);
camera.position.set(10, 10, 10);
camera.lookAt(0, 0, 0);

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.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);

// 创建 AudioListener 并添加到摄像机
const listener = new THREE.AudioListener();
camera.add(listener);

// 创建 PositionalAudio 并绑定到立方体
const sound = new THREE.PositionalAudio(listener);

// 加载音频文件
const audioLoader = new THREE.AudioLoader();
audioLoader.load('path/to/your/sound.mp3', function(buffer) {
  sound.setBuffer(buffer);
  sound.setRefDistance(20);  // 声音的影响范围
  sound.play();
});

// 将音频对象附加到立方体
cube.add(sound);

// 渲染循环
function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

3.3 示例解析

• AudioListener: 音频监听器，必须添加到摄像机上，它负责接收场景中的音频。
• PositionalAudio: 表示 3D 空间中的音频，使用 setBuffer() 方法加载音频文件。
• sound.setRefDistance(): 设置音频在 3D 空间中的影响范围，较大的值表示声音可以听到更远的距离。

4. 高级示例：结合 UI 控制音频与摄像机

为了展示更复杂的场景，我们可以结合 dat.GUI 库，提供用户界面来动态调整音频播放以及摄像机的属性。

4.1 代码示例

// 引入 dat.GUI 库
const gui = new dat.GUI();

// 创建场景
const scene = new THREE.Scene();

// 创建正交摄像机
const aspectRatio = window.innerWidth / window.innerHeight;
const camera = new THREE.OrthographicCamera(
  -10 * aspectRatio, 10 * aspectRatio, 10, -10, 1, 1000
);
camera.position.set(10, 10, 10);
camera.lookAt(0, 0, 0);

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.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);

// 创建 AudioListener 并添加到摄像机
const listener = new THREE.AudioListener();
camera.add(listener);

// 创建 PositionalAudio 并绑定到立方体
const sound = new THREE.PositionalAudio(listener);

// 加载音频文件
const audioLoader = new THREE.AudioLoader();
audioLoader.load('path/to/your/sound.mp3', function(buffer) {
  sound.setBuffer(buffer);
  sound.setRefDistance(20);
  sound.play();
});

// 将音频对象附加到立方体
cube.add(sound);

// dat.GUI 控制面板
const controls = {
  zoom: 1,
  playSound: () => sound.play(),
  stopSound: () => sound.stop()
};

// 添加 zoom 控制
gui.add(controls, 'zoom', 0.1, 3).onChange(function(value) {
  camera.zoom = value;
  camera.updateProjectionMatrix();
});

// 添加音频控制按钮
gui.add(controls, 'playSound');
gui.add(controls, 'stopSound');

// 渲染循环
function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

4.2 示例解析

• dat.GUI: 提供一个简单的 UI 面板，允许用户动态调整摄像机的 zoom 属性并控制音频播放。
• 音频播放控制: 用户可以通过 UI 面板来启动或停止音频。

5. OrthographicCamera 与音频的结合使用场景

OrthographicCamera 在以下场景中尤为有用：

• UI 叠加层: 结合 OrthographicCamera 可以实现一些 2D UI 叠加，如健康条、计分板等。
• 建筑或等距视图: 对于等距建筑渲染或需要准确尺寸

比例的场景，正交摄像机能提供更稳定的视觉效果。

• 音频展示: 使用 PositionalAudio 可以通过视觉化方式展示音频的空间位置，增强用户体验。

6. 总结

本文详细介绍了如何在 Three.js 中使用 OrthographicCamera 和音频系统。我们从基础示例开始，逐步深入探讨正交摄像机的使用方法，并结合 PositionalAudio 实现了 3D 场景中的音频播放。最后，通过结合 dat.GUI 库实现了用户界面控制，展示了如何在实际项目中灵活使用这些功能。希望你能通过这些示例掌握 Three.js 中 OrthographicCamera 和音频的使用。