Three.js 粒子系统与渲染机制教程

本教程基于示例目录内的 Three.js r174（0.174.0）。先用 WebGLRenderer 和 Three.js 原生 API 理解混合、深度、遮挡，再逐步实现粒子的生命周期、CPU/GPU 路线和具体效果。第三方库放在系列末尾，并以兼容 r174 的版本讲解。

阅读与运行

1. 按编号阅读根目录中的章节正文，并打开相应的可运行示例。
2. 调节示例参数，先观察现象，再回到正文理解原因。
3. 在 exercises/ 做对应章节的独立练习；参考答案放在练习文件末尾，不混入正文。

从 particle-system/ 目录执行：

cd examples
python -m http.server 8000

然后打开 阶段 00 最小示例：http://localhost:8000/stage-00/。页面使用同目录的 three.module.js 和 three.core.min.js，不依赖仓库根目录的构建文件。不要直接通过 file:// 打开。若端口 8000 已被占用，可换端口并修改地址中的端口号。

当前进度

阶段 00—09、正文第 01—20 章已完成。 教程正文与独立练习分开，章节、答案、示例及排错附录可从下方进入。

第一部分：颜色、混合与透明纹理

阶段 01 示例说明与入口列出了每个页面的预期画面和关键控件。

第二部分：深度与绘制顺序

阶段 02 示例说明与入口列出预期画面、参数和源码位置。

第三部分：透明排序与遮挡剔除

阶段 03 示例说明与入口列出两页的预期画面、参数和源码位置。

粒子模型与生命周期（阶段 04）

阶段 04 示例说明与入口列出预期画面、控件与源码位置。

时间、池化与数学（阶段 05）

阶段 05 示例说明与入口列出三页的预期画面与源码位置。

原生 CPU 路线（阶段 06）

阶段 06 示例说明与入口列出三页的预期画面、控件与运行方式。

GPU 与软粒子（阶段 07）

阶段 07 示例说明与入口列出两页的预期画面、源码与验收条件。

特效与群体（阶段 08）

阶段 08 示例说明与入口列出两页的运行方式、控制项和验收条件。

性能与第三方库（阶段 09）

阶段 09 示例说明与入口记录版本、运行方式与浏览器验收；排错附录 A按画面、深度、更新和性能症状定位问题。

全系列阅读路线

分阶段编写计划记录了各阶段的交付范围。所有示例以本仓库 r174 为技术基线；第 20 章额外固定了兼容版本的第三方库。