Three.js正交相机高效使用指南

Three.js正交相机高效使用指南

在Three.js中，正交相机（OrthographicCamera）是一种特殊的相机类型，它不会产生近大远小的透视效果，非常适合用于2D游戏开发、UI界面设计以及CAD制图等场景。本文将详细介绍如何在Three.js中创建和使用正交相机，从基本概念到具体应用，帮助你快速掌握这一重要工具。

正交相机的核心在于其投影方式。与透视相机不同，正交相机采用平行投影，这意味着所有物体的大小都不会随距离变化。这种特性使得正交相机在处理2D图形和需要精确测量的场景时非常有用。

创建正交相机时，需要指定6个关键参数：

const camera = new THREE.OrthographicCamera(
  left,    // 视景体左侧边界
  right,   // 视景体右侧边界
  top,     // 视景体顶部边界
  bottom,  // 视景体底部边界
  near,    // 近剪切面（必须>0）
  far      // 远剪切面（必须>near）
);

这些参数定义了一个长方体的视景体，只有在这个范围内的物体才会被渲染。通常情况下，left和right会根据窗口宽度设置，top和bottom根据窗口高度设置，而near和far则定义了相机的可视深度范围。

下面是一个基本的正交相机创建示例：

// 初始化场景和渲染器
const scene = new THREE.Scene();
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 计算视景体参数
const aspect = window.innerWidth / window.innerHeight;
const viewSize = 100; // 视景体高度

const left = -viewSize * aspect / 2;
const right = viewSize * aspect / 2;
const top = viewSize / 2;
const bottom = -viewSize / 2;
const near = 0.1;
const far = 1000;

// 创建正交相机
const camera = new THREE.OrthographicCamera(left, right, top, bottom, near, far);
camera.position.set(0, 0, 50); // 沿z轴后移
camera.lookAt(0, 0, 0);        // 看向原点

在这个例子中，我们首先计算了视景体的边界参数，然后创建了正交相机，并将其位置设置在z轴的正方向上。最后，让相机看向场景的原点。

在实际应用中，窗口大小可能会发生变化，因此需要让相机参数能够动态调整，以保持正确的渲染效果。

window.addEventListener('resize', () => {
  const newAspect = window.innerWidth / window.innerHeight;
  
  // 更新相机参数
  camera.left = -viewSize * newAspect / 2;
  camera.right = viewSize * newAspect / 2;
  camera.top = viewSize / 2;
  camera.bottom = -viewSize / 2;
  camera.updateProjectionMatrix(); // 必须调用！

  renderer.setSize(window.innerWidth, window.innerHeight);
});

这段代码监听了窗口的resize事件，当窗口大小改变时，会重新计算相机的视景体参数，并更新投影矩阵。

2D游戏开发

在2D游戏中，通常需要将原点设置在左下角，这样更符合像素坐标系的习惯。

const width = 800;
const height = 600;
const camera = new THREE.OrthographicCamera(
  0,       // left
  width,   // right
  height,  // top
  0,       // bottom
  0.1, 
  1000
);
camera.position.set(width/2, height/2, 50); // 居中

CAD等轴测视图

在CAD软件中，常常需要使用等轴测视图来展示3D模型。

camera.rotation.order = 'YXZ'; 
camera.rotation.y = Math.PI / 4; // 绕Y轴旋转45度
camera.rotation.x = Math.atan(-1 / Math.sqrt(2)); // 35.264°等轴测角

1. 物体不可见：

   • 检查物体是否在near/far范围内；
   • 确认相机位置（默认在原点，可能需要camera.position.z = 50）。

2. 图像拉伸：

   • 确保left/right与top/bottom的比例匹配窗口宽高比。

通过以上内容，相信你已经掌握了在Three.js中使用正交相机的基本方法。无论是开发2D游戏，还是制作工程图纸，正交相机都能为你提供强大的支持。希望本文能帮助你在项目中更好地运用这一工具，创造出更精彩的作品。