云图三维 | Three.js 相机介绍：透彻全面的指南

前端

2023-10-20 23:54:13

Three.js 是一个流行的 JavaScript 库，用于创建和渲染 3D 图形。相机是 Three.js 中一个重要的概念，它决定了场景的外观和用户视角。

在这篇文章中，我们将深入探讨 Three.js 相机，包括其类型、属性和使用方法。您将学到如何设置相机、控制视角、使用不同的投影方式，以及如何通过代码操纵相机。

文章还将提供一些实用的例子和代码片段，帮助您将学到的知识应用到自己的 Three.js 项目中。无论您是 Three.js 新手还是经验丰富的开发者，这篇文章都将对您有所帮助。

Three.js 相机类型

Three.js 中有两种主要的相机类型：透视相机和正交相机。

透视相机

透视相机模拟人眼的视角，它会随着物体的距离而改变物体的尺寸。因此，透视相机非常适合创建逼真的 3D 场景。

正交相机

正交相机与透视相机相反，它不会随着物体的距离而改变物体的尺寸。因此，正交相机非常适合创建具有固定视角的场景，例如俯视图或剖面图。

相机属性

Three.js 相机有许多属性，可以控制相机的行为和外观。以下是一些常用的属性：

position ：相机的三维位置。
rotation ：相机的三维旋转。
fov ：相机的视场角。
aspect ：相机的宽高比。
near ：相机的近裁剪平面。
far ：相机的远裁剪平面。

相机方法

Three.js 相机还提供了一些方法，可以控制相机的行为。以下是一些常用的方法：

lookAt() ：将相机的视角对准一个给定的位置。
updateProjectionMatrix() ：更新相机的投影矩阵。
setViewOffset() ：设置相机的视口偏移。
setFocalLength() ：设置相机的焦距。

相机示例

以下是一个简单的 Three.js 代码示例，演示了如何创建一个透视相机并将其添加到场景中：

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

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

// 将相机添加到场景中
scene.add(camera);

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

// 循环渲染场景
function animate() {
  requestAnimationFrame(animate);

  // 更新相机的投影矩阵
  camera.updateProjectionMatrix();

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

animate();