[b]译序[/b] Three.js是一个伟大的开源WebGL库，WebGL允许JavaScript操作GPU，在浏览器端实现真正意义的3D。但是目前这项技术还处在发展阶段，资料极为匮乏，爱好者学习基本要通过Demo源码和Three.js本身的源码来学习。 [b]0.简介[/b] 嗨，又见面了。这么说我们已经开始学习Three.js了，如果你还没有看过之前三篇教程，建议你先读完。如果你已经读完前面的教程了，你可能会想做一些关于粒子的东西。让我们直面这个话题吧，每个人都爱粒子效果。不管你是否知道，你可以很轻易地创建它们。 [b]1.创建一个粒子系统[/b] Three.js将粒子系统视为一个基本的几何体，因为它就像基本几何体一样，即有形状，又有位置、缩放因子、旋转属性。粒子系统将geometry对象里的每一个点视为一个单独的粒子。为什么这样做？我想基于以下的原因：首先，整个粒子系统地绘制只需要调用一次某个绘制函数，而不是调用上千次；其次，这允许你设定一些全局的参数来影响你的粒子系统内的所有粒子。 即使是粒子系统被视为一个整体的对象，我们仍然可以为每个粒子单独地着色，因为在绘制粒子系统的过程中，Three.js通过attribute变量colour向着色器传递了每一个顶点的颜色。我在本篇教程里并不准备这样做，如果你想知道这是怎样完成的，你可以去GitHub上看Three.js的例程。 粒子系统可能还有一种特殊效果需要引起你的注意：Three.js在粒子系统第一次被渲染的时候，会将其数据缓存下来，之后你无法增加或减少系统中的粒子。如果你不希望看到某个粒子，你可以将它的颜色中的alpha值设置为0，但你无法删除它。所以你应当在创建粒子系统的时候，就将所有可能需要显示的粒子考虑进来。 [b]开始创建一个粒子系统，只需要这么多[/b]：