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
相关特性
七种渲染器
画布-CanvasRenderer
dom-DomRenderer
webgl-WebGLRenderer
像素-PixelRenderer
easeljs-EaselRenderer
pixi.js-PixiRenderer
自定义-CustomRenderer
用10行代码创建酷炫的效果。
可集成到任何游戏引擎中。
多种行为可以模拟许多不同的物理效果。
三种发射器,可以轻松扩展。
3D版本:
四种渲染器
MeshRender
SpriteRender
PointsRender
CustomRender
三种可以模拟许多不同物理效果的发射器
发射
BehaviourEmitter
FollowEmitter
与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例子效果库,非常简单实用,从上面的动图效果也能看出来实现的效果非常的炫酷,而且代码非常简单,文档又非常详细!