从0到1：认识相机与投影——3D世界的影像捕捉

前端

2023-08-09 06:21:45

相机和投影：three.js 中捕捉三维世界的基石

想象一下，你是一个艺术家，手持画笔，准备描绘一个壮丽的三维场景。 three.js 中的相机就像你的画笔，负责捕捉场景的视角，而投影就像画布，将三维世界转换成我们二维屏幕上看到的图像。

相机的角色：从三维视角记录世界

相机是连接你与三维场景的桥梁。它通过定义位置、方向和视场等属性来模拟真实世界的相机。这些属性决定了场景中哪些物体可见、它们如何呈现以及从哪个角度观察。

投影的本质：从三维到二维的转换

投影是将三维物体转换成二维图像的过程。就像投射机将幻灯片上的图像投射到屏幕上一样，three.js 中的投影机制将三维场景投射到你的屏幕上。它有两种主要类型：

透视投影： 模拟真实世界的视角，使近处物体更大，远处物体更小。
正交投影： 保持物体真实比例，无论其距离如何。

相机属性：塑造视角和画面

相机的属性决定了最终呈现的图像。主要属性包括：

位置： 相机的观察位置。
方向： 相机的观察角度。
视场： 相机的视野范围。
焦距： 控制景深范围。

投影矩阵：将三维空间映射到二维屏幕

投影矩阵是将三维坐标转换为屏幕坐标的数学变换。它根据相机的属性计算而来，将场景中的物体映射到屏幕上。

深度缓冲：管理物体的前后顺序

深度缓冲是一种存储物体到相机的距离信息的结构。它用于确定物体的前后顺序，确保正确的遮挡效果。

视锥体：相机的观察范围

视锥体是一个三维区域，定义了相机能看到的范围。视锥体内的物体被投影到屏幕上，视锥体外的物体被剔除。

代码示例：设置相机和投影

在 three.js 中设置相机和投影，可以使用以下代码：

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

// 设置相机位置和目标点
camera.position.set(0, 10, 50);
camera.lookAt(0, 0, 0);

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

// 添加立方体到场景
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);

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