Three.js——相机

在Three.js中，相机（Camera）是用于定义视图和渲染场景的一个关键组件。相机决定了你从哪个角度和位置观察场景中的物体，以及如何呈现这些物体。Three.js 提供了几种不同类型的相机，每种相机都有其特定的用途和特性。以下是Three.js中常用的相机类型及其特点：

常见的相机类型

PerspectiveCamera（透视相机）：

模拟人类眼睛的视角，具有透视效果，远处的物体显得较小。
常用于3D场景中，以提供更真实的视觉体验。
构造函数参数：PerspectiveCamera(fov, aspect, near, far)
fov（视野）：垂直视野角度，以度为单位。
aspect（纵横比）：通常是画布的宽高比。
near（近剪切面）：摄像机到近剪切面的距离。
far（远剪切面）：摄像机到远剪切面的距离。

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 5);

OrthographicCamera（正交相机）：

不具有透视效果，平行投影，远处的物体不会显得较小。
常用于2D场景或需要精确测量的场景。
构造函数参数：OrthographicCamera(left, right, top, bottom, near, far)
left、right、top、bottom：定义视景体的边界。
near（近剪切面）：摄像机到近剪切面的距离。
far（远剪切面）：摄像机到远剪切面的距离。

const aspect = window.innerWidth / window.innerHeight;
const camera = new THREE.OrthographicCamera(-aspect * 5, aspect * 5, 5, -5, 0.1, 1000);
camera.position.set(0, 0, 5);

相机的基本操作

设置位置：

使用 position 属性设置相机的位置。

camera.position.set(x, y, z);

看向目标：

使用 lookAt 方法设置相机的朝向。

camera.lookAt(new THREE.Vector3(0, 0, 0));

更新投影矩阵：

在修改相机参数后，调用 updateProjectionMatrix 方法更新相机的投影矩阵。

camera.updateProjectionMatrix();

创建一个简单的Three.js场景并使用透视相机

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

// 创建透视相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
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();
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();