ThreeJs入门09-正投影和透视投影相机的实践与区别剖析

2024-01-22 08:07:35

前言：

在 Three.js 入门教程的第八部分中，我们详细介绍了相机的原理和用法。在本教程中，我们将通过实践进一步理解正投影相机和透视投影相机的区别。我们将使用 Three.js 的 PerspectiveCamera 和 OrthographicCamera 类来创建场景，并探索它们各自的特点和应用场景。

正投影相机与透视投影相机：

正投影相机和透视投影相机是 Three.js 中两种不同的相机类型，它们在投影方式上有着根本的区别。

正投影相机：

正投影相机将物体投影到一个平面上，无论物体与相机之间的距离如何，它们在投影平面上都会保持相同的比例。
正投影相机通常用于创建具有轴测投影效果的场景，如建筑设计或工程制图。
正投影相机不具有透视效果，因此无法模拟现实世界中物体大小随距离而变化的现象。

透视投影相机：

透视投影相机将物体投影到一个锥形体上，物体越靠近相机，其在投影平面上就会越大；物体越远离相机，其在投影平面上就会越小。
透视投影相机具有透视效果，能够模拟现实世界中物体大小随距离而变化的现象，从而使场景看起来更真实。
透视投影相机通常用于创建具有真实感的三维场景，如游戏或电影。

代码实践：

以下是一个使用 Three.js 创建正投影和透视投影相机的代码示例：

// 正投影相机
const orthoCamera = new THREE.OrthographicCamera(
  -1, // left
  1, // right
  1, // top
  -1, // bottom
  -100, // near
  100 // far
);

// 透视投影相机
const perspectiveCamera = new THREE.PerspectiveCamera(
  75, // field of view
  window.innerWidth / window.innerHeight, // aspect ratio
  0.1, // near
  1000 // far
);

// 设置场景
const scene = new THREE.Scene();

// 创建一个几何体
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);

// 渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 渲染场景
function render() {
  requestAnimationFrame(render);

  // 设置相机的角度
  orthoCamera.position.set(2, 2, 2);
  orthoCamera.lookAt(scene.position);

  perspectiveCamera.position.set(2, 2, 2);
  perspectiveCamera.lookAt(scene.position);

  // 渲染场景
  renderer.render(scene, orthoCamera);
  renderer.render(scene, perspectiveCamera);
}

render();