位置:設計主頁 > 網站制作 > 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例子效果庫,非常簡單實用,從上面的動圖效果也能看出來實現的效果非常的炫酷,而且代碼非常簡單,文檔又非常詳細!

负盈利55打法