three.js入门系列之粒子系统

其实代码很简单，也很容易懂（我用的是r99版本的three.js，目前网上大多数demo是60或者80的版本，其中的一些api已经废弃，如下是r99版本支持的写法）：

注：渲染器是WebGl渲染器

如上的代码，你将看到如下画面：

但是这么多“粒子”都是正方形的啊，哪来的雪花呢，不急，注意到代码中注释掉的引用文件以及map属性的代码了么，这两句代码的作用是为为材料上贴图（雪花图片）：

动画效果也无需多说了，通过改变该模型的y轴坐标实现。

网上还有用Canvas渲染器构造粒子系统的版本，我还没有试过，所以暂时没有代码以及效果贴出。