介绍
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例子效果库,非常简单实用,从上面的动图效果也能看出来实现的效果非常的炫酷,而且代码非常简单,文档又非常详细!