方位:规划主页 > 网站制造 > HTML教程 >

酷炫的根据HTML5的2D和3D粒子引擎Proton

来历:最美同享Coder 作者:最美同享Coder 时刻:2019-09-30 10:14

 

Proton是一个灵敏的html5粒子引擎。他默许支撑canvas,dom,webgl,easeljs,pixel五种烘托方法,当然你还能够容易的自定义自己的烘托器。只需10几行代码就能够打造你想要的粒子作用。一起具有2D版别和3D版别,适宜不同的运用场景!


酷炫的根据HTML5的2D和3D粒子引擎——Proton

 


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行代码创立酷炫的作用。
  • 可集成到任何游戏引擎中。
  • 多种行为能够模仿许多不同的物理作用。
  • 三种发射器,能够轻松扩展。

酷炫的根据HTML5的2D和3D粒子引擎——Proton

 


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来演示一部分作用,上面已经有一些了,下面再展现一些:


酷炫的根据HTML5的2D和3D粒子引擎——Proton

 

酷炫的根据HTML5的2D和3D粒子引擎——Proton

 

酷炫的根据HTML5的2D和3D粒子引擎——Proton

 

酷炫的根据HTML5的2D和3D粒子引擎——Proton

 

酷炫的根据HTML5的2D和3D粒子引擎——Proton

 

酷炫的根据HTML5的2D和3D粒子引擎——Proton

 


酷炫的根据HTML5的2D和3D粒子引擎——Proton

 


总结

Proton是一个完成比如作用十分适宜的2D和3D比如作用库,十分简略有用,从上面的动图作用也能看出来完成的作用十分的炫酷,并且代码十分简略,文档又十分具体!