介紹

Proton是一個靈活的html5粒子引擎。他預設支援canvas,dom,webgl,easeljs,pixel五種渲染方式，當然你還可以輕易的自定義自己的渲染器。只需10幾行程式碼就可以打造你想要的粒子效果。同時具有2D版本和3D版本，適合不同的使用場景！

Github

2D版本:

https://github.com/a-jie/Proton

3D版本:

https://github.com/a-jie/three.proton

3D版本：

四種渲染器MeshRenderSpriteRenderPointsRenderCustomRender三種可以模擬許多不同物理效果的發射器發射BehaviourEmitterFollowEmitter與three.js庫完全相容。快速開始安裝

npm install proton-js --save... import Proton from 'proton-js';

示例程式碼

var proton = new Proton();var emitter = new Proton.Emitter();//設定速率emitter.rate = new Proton.Rate(Proton.getSpan(10, 20), 0.1);//初始化emitter.addInitialize(new Proton.Radius(1, 12));emitter.addInitialize(new Proton.Life(2, 4));emitter.addInitialize(new Proton.Velocity(3, Proton.getSpan(0, 360), 'polar'));//增加行為emitter.addBehaviour(new Proton.Color('ff0000', 'random'));emitter.addBehaviour(new Proton.Alpha(1, 0));//設定發射器位置emitter.p.x = canvas.width / 2;emitter.p.y = canvas.height / 2;emitter.emit(5);//向proton添加發射器proton.addEmitter(emitter);// 新增canvas渲染器var renderer = new Proton.CanvasRenderer(canvas);proton.addRenderer(renderer);//使用Euler積分計算更準確（預設為false）Proton.USE_CLOCK = false or true;

PS：3D版本的使用方法類似

DEMO演示

下面通過錄制的Gif來演示一部分效果，上面已經有一些了，下面再展示一些：

總結

Proton是一個實現例子效果非常合適的2D和3D例子效果庫，非常簡單實用，從上面的動圖效果也能看出來實現的效果非常的炫酷，而且程式碼非常簡單，文件又非常詳細！