html5酷炫表白代码_酷炫的基于HTML5的2D和3D粒子引擎——Proton

介绍

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

---

相关特性

• 七种渲染器

1. 画布-CanvasRenderer
2. dom-DomRenderer
3. webgl-WebGLRenderer
4. 像素-PixelRenderer
5. easeljs-EaselRenderer
6. pixi.js-PixiRenderer
7. 自定义-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例子效果库，非常简单实用，从上面的动图效果也能看出来实现的效果非常的炫酷，而且代码非常简单，文档又非常详细！