Three.js - 介绍

Three.js - 简介

现代网络浏览器已演变为功能强大的平台，可提供丰富、交互式的体验。其核心是 WebGL (Web Graphics Library)，一个低级的 JavaScript API，它允许开发者直接访问计算机的 GPU (Graphics Processing Unit，图形处理单元)。这使得在 HTML <canvas> 元素内直接渲染高性能、硬件加速的 2D 和 3D 图形成为可能。

然而，直接使用 WebGL API 出了名的复杂且冗长。它需要对图形渲染管线、状态机和类似 C 语言的着色语言 (GLSL) 有深入的理解。一个简单的任务，如绘制一个带纹理的立方体，可能需要数百行样板代码。这就是 Three.js 的用武之地。

什么是 Three.js？

Three.js 是一个高级 JavaScript 库，它使使用 WebGL 变得异常简单和直观。 它抽象了图形渲染管线的复杂性，提供了一个友好的、面向对象的 API，用于创建和管理 3D 场景。你无需手动管理顶点和着色器，而是可以使用熟悉的概念，如 Scene（场景）、Camera（摄像机）、Mesh（网格，即一个对象）和 Material（材质）。

在现代开发中为何选择 Three.js？

Three.js 凭借其强大的功能和活跃的生态系统，仍然是网络 3D 领域最流行和最稳健的选择：

易于使用：使用简洁易读的 JavaScript，即可创建复杂的 3D 图形，从简单的形状到逼真的场景。
丰富的功能集：包含大量的摄像机、灯光、材质、着色器，以及用于动画和从专业软件（如 Blender 或 Cinema 4D）加载 3D 模型的实用工具。
沉浸式体验：作为使用 WebXR API 在网络上创建虚拟现实 (Virtual Reality, VR) 和增强现实 (Augmented Reality, AR) 内容的基础。
庞大的生态系统：庞大的社区提供了无数的教程、插件和辅助库（例如，用于物理、后处理和用户控制）。
高性能：因为它是一个基于 WebGL 的轻量级封装层，因此可以创建高度优化且性能卓越的应用程序。

请查看这些 Three.js 令人惊叹的示例：

Bruno Simon 作品集：bruno-simon.com（一个著名的、完全交互式的简历）
The Boat：go-to-the-boat.com（一个美丽的叙事体验）
Gucci Flora：flora.gucci.com（一个高端商业产品展示）
Three.js 官方示例：threejs.org/examples（一个包含大量官方演示的库）

入门：现代工作流程

虽然你可以通过简单地包含一个 script 标签来使用 Three.js，但现代且推荐的方法是使用基于 JavaScript 模块的工作流程。这使你能够管理依赖项、仅导入库中你所需的部分，并使用现代开发工具。

Node.js 和 npm：使用像 npm（或 yarn）这样的包管理器将 Three.js 安装到你的项目中。npm install three
构建工具：使用像 Vite 或 Webpack 这样的打包工具/开发服务器。这些工具提供本地开发服务器、用于即时更新的热模块替换（HMR），并优化你的生产代码。
ES6 模块：使用 import 和 export 语句来逻辑且高效地组织你的代码。

在本教程系列中，我们将全程采用这种现代工作流程。

浏览器支持与未来

WebGL 2.0 是 Three.js 主要面向的版本，目前已在全球 97% 以上的浏览器中得到支持，包括所有主流桌面和移动浏览器（Chrome、Firefox、Safari、Edge）。像 Internet Explorer 这样的过时浏览器在现代 Web 开发中已不再是考虑因素。

你可以在 caniuse.com/webgl2 随时查看最新的支持数据。

展望未来，下一代 Web 图形技术是 WebGPU，它有望提供更好的性能和更现代的 API。Three.js 正在积极开发 WebGPU 渲染器，确保你的技能随着 Web 平台的发展保持相关性。