proton的讲解

proton是一个名词，意思是质子，是物理中的一种微观粒子，在这个单词中我们可以找到两个元音音素【əʊ】和【ɒ】，一个元音音素代表一个音节，所以它是一个双音节词，双音节词重音在前，所以英式发音为【ˈprəʊtɒn】，美式发音嘴巴要更圆一点，把【ə】发成【o】的音，读作【ˈproʊˌtɑn】，proton我们可以把它拆开来看【pro】和【ton】；

pro表示专业的，ton表示吨位的意思，专业的吨位显然就是很大的质量，也就是质子，所以proton表示的是质子的意思，例如，Aprotonisanelementaryparticleofmatter，thatpossessesapositivecharge，质子是带正电荷的物质的基本粒子，proton质子这个单词你记住了吗？

酷炫的基于HTML5的2D和3D粒子引擎——Proton

介绍

Proton是一个灵活的html5粒子引擎。

他默认支持canvas,dom,webgl,easeljs,pixel五种渲染方式，当然你还可以轻易的自定义自己的渲染器。

只需10几行代码就可以打造你想要的粒子效果。

同时具有2D版本和3D版本，适合不同的使用场景！

Github

2D版本:

https://github.com/a

3D版本:

https://github.com/a

相关特性

七种渲染器画布-CanvasRendererdom-DomRendererwebgl-WebGLRenderer像素-PixelRenderereaseljs-EaselRendererpixi.js-PixiRenderer自定义-CustomRenderer用10行代码创建酷炫的效果。

可集成到任何游戏引擎中。

多种行为可以模拟许多不同的物理效果。

三种发射器，可以轻松扩展。

3D版本：

四种渲染器MeshRenderSpriteRenderPointsRenderCustomRender三种可以模拟许多不同物理效果的发射器发射BehaviourEmitterFollowEmitter与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例子效果库，非常简单实用，从上面的动图效果也能看出来实现的效果非常的炫酷，而且代码非常简单，文档又非常详细！

声明:本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。 E-MAIL:admin@bb1314.com