4.3正交相机参数

4.3正交相机参数

Three.js 正交相机参数详解与实践

在 Three.js 中，相机是观察场景的窗口。正交相机（Orthographic Camera）是一种特殊的相机，它使用正交投影，这意味着场景中的物体无论距离相机远近，看起来大小都相同。这与透视相机不同，透视相机模拟了人眼的视觉效果，物体越远看起来越小。正交相机常用于 2D 游戏、建筑可视化、以及需要精确测量的场景。

4.3 正交相机参数详解

正交相机由 THREE.OrthographicCamera 类表示。它的构造函数接受六个参数，这些参数定义了相机的视锥体（frustum），即相机能看到的空间区域。

THREE.OrthographicCamera( left, right, top, bottom, near, far )
​

下面详细解释每个参数：

• left (number): 视锥体左侧面的 x 坐标。

• right (number): 视锥体右侧面的 x 坐标。

• top (number): 视锥体顶部的 y 坐标。

• bottom (number): 视锥体底部的 y 坐标。

• near (number): 视锥体近裁剪面的 z 坐标。物体在此平面之前将被裁剪掉。

• far (number): 视锥体远裁剪面的 z 坐标。物体在此平面之后将被裁剪掉。

图示 (Mermaid Graph):

理解视锥体：

left, right, top, bottom 定义了相机在 x 和 y 轴上的视野范围。near 和 far 定义了相机在 z 轴上的视野深度。所有在这六个平面定义的立方体内的物体都会被渲染。

重要提示：

• near 和 far 必须为正数。

• 通常，left 小于 right，bottom 小于 top。

• near 值越小，相机能看到的物体就越近。far 值越大，相机能看到的物体就越远。但是，过大的 far 值可能会导致深度缓冲区的精度问题，引起 z-fighting（两个物体在深度上非常接近时，渲染结果出现闪烁）。

代码实践

以下是一个创建和使用正交相机的示例：

import * as THREE from 'three';
// 创建场景
const scene = new THREE.Scene();
// 创建正交相机
const frustumSize = 10; // 定义视锥体大小
const aspect = window.innerWidth / window.innerHeight; // 宽高比
const camera = new THREE.OrthographicCamera(
    frustumSize * aspect / - 2, // left
    frustumSize * aspect / 2,  // right
    frustumSize / 2,           // top
    frustumSize / - 2,          // bottom
    0.1,                       // near
    1000                       // far
);
camera.position.z = 5; //设置相机位置
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 创建一个立方体
const geometry = new THREE.BoxGeometry(1, 1, 1);
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();
​

代码解释：

1. frustumSize: 定义了相机视锥体在垂直方向上的大小。你可以根据场景的需要调整这个值。

2. aspect: 计算窗口的宽高比，用于保持图像比例。

3. camera = new THREE.OrthographicCamera(...): 创建正交相机，并传入计算好的 left, right, top, bottom, near, far 参数。 left 和 right 的值基于 frustumSize 和 aspect 计算，确保在不同宽高比的屏幕上，场景的比例保持一致。

4. camera.position.z = 5;: 设置相机在 Z 轴上的位置。

调整相机参数：

• 改变 frustumSize: 调整 frustumSize 的值会改变相机视野的大小。 增加 frustumSize 会扩大视野，减少 frustumSize 会缩小视野，相当于 "zoom in" 和 "zoom out"。

• 改变 near 和 far: 调整 near 和 far 可以控制相机能看到的深度范围。 如果物体没有显示，可能是因为它们超出了 near 和 far 定义的范围。

• 改变 aspect: 可以在窗口大小改变的时候重新计算 aspect 的值，并更新相机的 left, right, top, bottom 参数，以保持图像比例。

动态调整相机参数

在某些情况下，你可能需要在运行时动态调整相机的参数。例如，当窗口大小改变时，你需要更新相机的视锥体，以避免图像变形。

function onWindowResize() {
    const aspect = window.innerWidth / window.innerHeight;
    camera.left = - frustumSize * aspect / 2;
    camera.right = frustumSize * aspect / 2;
    camera.top = frustumSize / 2;
    camera.bottom = - frustumSize / 2;
    camera.updateProjectionMatrix();
    renderer.setSize( window.innerWidth, window.innerHeight );
}
window.addEventListener( 'resize', onWindowResize, false );
​

代码解释：

1. onWindowResize(): 这个函数在窗口大小改变时被调用。

2. 重新计算 left, right, top, bottom: 根据新的窗口大小和 frustumSize 重新计算相机的视锥体参数。

3. camera.updateProjectionMatrix(): 这个方法非常重要！它会根据新的参数更新相机的投影矩阵。每次修改相机的 left, right, top, bottom, near, far 参数后，都必须调用这个方法。

4. renderer.setSize(): 更新渲染器的大小，以匹配新的窗口大小。

正交相机与场景缩放

正交相机的一个常见用途是在 2D 游戏中创建缩放效果。你可以通过调整 left, right, top, bottom 参数来实现缩放。

function zoomIn(zoomFactor) {
    camera.left /= zoomFactor;
    camera.right /= zoomFactor;
    camera.top /= zoomFactor;
    camera.bottom /= zoomFactor;
    camera.updateProjectionMatrix();
}
function zoomOut(zoomFactor) {
    camera.left *= zoomFactor;
    camera.right *= zoomFactor;
    camera.top *= zoomFactor;
    camera.bottom *= zoomFactor;
    camera.updateProjectionMatrix();
}
​

代码解释：

1. zoomIn(zoomFactor): 缩小视野，相当于 "zoom in"。将 left, right, top, bottom 除以 zoomFactor。

2. zoomOut(zoomFactor): 扩大视野，相当于 "zoom out"。将 left, right, top, bottom 乘以 zoomFactor。

3. camera.updateProjectionMatrix(): 更新投影矩阵。

其他注意事项

• camera.lookAt(vector): 正交相机也有 lookAt() 方法，但它的效果与透视相机不同。在正交相机中，lookAt() 主要影响场景的平移，而不是旋转。

• camera.zoom: THREE.OrthographicCamera 还有一个 zoom 属性，可以用来缩放场景。但是，直接修改 left, right, top, bottom 参数通常更灵活。

• 调试: 如果你的场景显示不正确，请检查以下几点：

  • 确保 near 和 far 的值正确。

  • 检查物体是否超出了相机的视锥体范围。

  • 确保在修改相机参数后调用了 camera.updateProjectionMatrix()。

总结

THREE.OrthographicCamera 是一个功能强大的相机，可以用于各种 2D 和 3D 应用。理解它的参数和工作原理对于创建正确的视觉效果至关重要。通过本文提供的代码示例和解释，你应该能够更好地使用正交相机，并根据自己的需要调整它的参数。