Three.js 入门指南：掌握 WebGL 的三大基石

2024-01-22 22:06:51

Three.js，作为 WebGL 领域举足轻重的重量级框架，凭借其易用性和强大功能，深受广大开发者的喜爱。如果你也跃跃欲试，想要探索 WebGL 的奇妙世界，那么 Three.js 将是你不可多得的良师益友。

在 Three.js 中，一切渲染都需要围绕三个基本概念展开：场景、摄像机和渲染器。这三个元素共同构成了 WebGL 的基石，缺一不可。下面，我们就逐一了解它们吧！

场景（Scene）

场景，顾名思义，就是你想要在 WebGL 中呈现的三维世界。你可以将它想象成一个虚拟舞台，你的所有 3D 对象都将在这个舞台上粉墨登场。在 Three.js 中，你可以通过 new THREE.Scene() 来创建场景对象。

摄像机（Camera）

摄像机，就是你用来看待场景的眼睛。它决定了观众的视角，以及场景中哪些物体会被渲染。Three.js 中提供了多种摄像机类型，最常用的有透视摄像机（PerspectiveCamera）和正交摄像机（OrthographicCamera）。你可以根据自己的需要选择合适的摄像机类型。

渲染器（Renderer）

渲染器，则是将场景中的所有物体转化为像素，并最终呈现在屏幕上的关键角色。Three.js 提供了多种渲染器类型，最常用的有 WebGL 渲染器（WebGLRenderer）和 Canvas 渲染器（CanvasRenderer）。WebGL 渲染器可以充分发挥显卡的性能，带来更逼真的视觉效果。

理解了这三个基本概念之后，你就可以开始搭建自己的 WebGL 世界了。下面，我们就来一步步构建一个简单的 Three.js 场景。

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

// 2. 创建摄像机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

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

// 4. 添加物体到场景中
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);

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