Cesium之粒子---简单粒子特效

首先，来个最简单的粒子特效：
雨：

      var rainParticleSize = 15.0;var rainRadius = 100000.0;var rainImageSize = new Cesium.Cartesian2(rainParticleSize, rainParticleSize * 2.0);var rainGravityScratch = new Cesium.Cartesian3();var rainUpdate = function (particle, dt) {rainGravityScratch = Cesium.Cartesian3.normalize(particle.position, rainGravityScratch);rainGravityScratch = Cesium.Cartesian3.multiplyByScalar(rainGravityScratch, -1050.0, rainGravityScratch);particle.position = Cesium.Cartesian3.add(particle.position, rainGravityScratch, particle.position);var distance = Cesium.Cartesian3.distance(viewer.scene.camera.position, particle.position);if (distance > rainRadius) {particle.endColor.alpha = 0.0;} else {particle.endColor.alpha = rainSystem.endColor.alpha / (distance / rainRadius + 0.1);}};rainSystem = new Cesium.ParticleSystem({modelMatrix: new Cesium.Matrix4.fromTranslation(viewer.scene.camera.position),speed: -1.0,lifetime: 15.0,emitter: new Cesium.SphereEmitter(rainRadius),startScale: 1.0,endScale: 0.0,image: 'images/circular_particle.png',emissionRate: 9000.0,startColor: new Cesium.Color(0.27, 0.5, 0.70, 0.0),endColor: new Cesium.Color(0.27, 0.5, 0.70, 0.98),imageSize: rainImageSize,updateCallback: rainUpdate});viewer.scene.primitives.add(rainSystem);

以此，我们来分析粒子功能的一些方法和属性。
首先，我们需要创立一个粒子特效（针对于每一个粒子）。
下面，是创建粒子特效的第一步。

rainSystem = new Cesium.ParticleSystem({modelMatrix: new Cesium.Matrix4.fromTranslation(viewer.scene.camera.position),speed: -1.0,lifetime: 15.0,emitter: new Cesium.SphereEmitter(rainRadius),startScale: 1.0,endScale: 0.0,image: 'images/circular_particle.png',emissionRate: 9000.0,startColor: new Cesium.Color(0.27, 0.5, 0.70, 0.0),endColor: new Cesium.Color(0.27, 0.5, 0.70, 0.98),imageSize: rainImageSize,updateCallback: rainUpdate});

ParticleSystem这个函数是专门的粒子功能类。
startScale：代表了粒子初始化的密集程度；
endScale：代表了粒子消失的密集程度；
Scale：它的优先级高于startScale和endScale，当它存在时，startScale和endScale都失效了。它是一个恒定值。
startColor：代表粒子刚出现时，粒子显示的颜色效果；
endColor：代表粒子结束时，粒子显示的颜色效果；
Color：它的优先级高于startColor和endColor，当它存在时，startColor和endColor都失效了。它是一个恒定值。
image:代表粒子图片的路径存放位置。Cesium中我知道的有两种粒子特效展示，一种是这个用png图片展示粒子特效，一种是用着色器来展示粒子特效。
minimumImageSize：代表粒子图片的最小值；
maximumImageSize：代表粒子图片的最大值；
imageSize：它的优先级高于minimumImageSize和maximumImageSize，当它存在时，minimumImageSize和maximumImageSize都失效了。它是一个恒定值。另外，当minimumImageSize和
maximumImageSize配合使用的时候，粒子图片的大小是在最小值和最大值之间随机选择的。
minimumSpeed：代表粒子速度的最小值；
maximumSpeed：代表粒子速度的最大值；
speed：它的优先级高于minimumSpeed和maximumSpeed，当它存在时，minimumSpeed和maximumSpeed都失效了。它是一个恒定值。并且它也有系统默认的值1.0。
minimumParticleLife：粒子持续时间的最小值；
maximumParticleLife：粒子持续时间的最大值；
particleLife：它的优先级高于minimumParticleLife和maximumParticleLife，当它存在时，minimumParticleLife和maximumParticleLife都失效了。它是一个恒定值。并且它也有系统默认的值5.0。
lifetime：代表粒子发射时间。
minimumMass：代表粒子的最小质量；
maximumMass：代表粒子的最大质量；
mass：它的优先级高于minimumMass和maximumMass，当它存在时，minimumMass和maximumMass都失效了。它是一个恒定值。并且它也有系统默认的值1.0。
sizeInMeters：代表粒子的大小的像素还是米。true：以米为单位调整粒子大小；否则，大小以像素为单位。
bursts：这个是设定某一个时间点具有爆炸效果；比如说做爆炸特效或者烟花特效等；
使用方法：

bursts : [new Cesium.ParticleBurst({time : 5.0, minimum : 300, maximum : 500}),new Cesium.ParticleBurst({time : 10.0, minimum : 50, maximum : 100}),new Cesium.ParticleBurst({time : 15.0, minimum : 200, maximum : 300})
],

emissionRate:代表每秒发射的粒子个数，它有一个默认值5.
emitter：代表粒子发射的形状，总共有四个：BoxEmitter、CircleEmitter、ConeEmitter、SphereEmitter。
使用方法：

BoxEmitter 类在盒子里（box）里随机一个位置，沿着盒子的6个面的法向量向外运动。它接受一个Cartesian3 参数，定义了盒子的长宽高。
emitter: new Cesium.BoxEmitter(new Cesium.Cartesian3(10.0, 10.0, 10.0));
CircleEmitter类在圆形面上随机一个位置，粒子方向是发射器的向上向量。它接受一个float参数指定了圆的半径。
emitter: new Cesium.CircleEmitter(5.0);
ConeEmitter在椎体顶点产生粒子，粒子方向在椎体内随机一个角度向外。它接受一个float参数，制定了锥角。椎的方向沿着向上轴。
emitter: new Cesium.ConeEmitter(Cesium.Math.toRadians(30.0));
SphereEmitter类在球体内随机产生粒子，初始速度是沿着秋心向外。它接受一个float参数指定了球体半径。
emitter: new Cesium.SphereEmitter(5.0);

updateCallback:为了提升仿真效果，粒子系统有一个更新函数。这个是个手动更新器，比如对每个粒子模拟重力或者风力的影响，或者除了线性插值之外的颜色插值方式等等。说白了，这个就是模拟粒子在真实场景下的运动。使粒子具有更加真实的显示效果。
每个粒子系统在仿真过程种，都会调用更新回调函数来修改粒子的属性。回调函数传过两个参数，一个是粒子本身，另一个是仿真时间步长。大部分物理效果都会修改速率向量来改变方向或者速度。下面是一个粒子响应重力的示例代码：

var gravityScratch = new Cesium.Cartesian3();
function applyGravity(p, dt) {// 计算每个粒子的向上向量（相对地心） var position = p.position;Cesium.Cartesian3.normalize(position, gravityScratch);Cesium.Cartesian3.multiplyByScalar(gravityScratch, viewModel.gravity * dt, gravityScratch);p.velocity = Cesium.Cartesian3.add(p.velocity, gravityScratch, p.velocity);
}

modelMatrix：把粒子系统从模型坐标系转到世界坐标系。也可以这样说，就相当于把粒子当做一个模型，对它进行任意的旋转变换。
对于复杂的粒子变换，有一个参考代码：

function computeModelMatrix(entity, time) {var position = Cesium.Property.getValueOrUndefined(entity.position, time, new Cesium.Cartesian3());if (!Cesium.defined(position)) {return undefined;}var orientation = Cesium.Property.getValueOrUndefined(entity.orientation, time, new Cesium.Quaternion());if (!Cesium.defined(orientation)) {var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(position, undefined, new Cesium.Matrix4());} else {modelMatrix = Cesium.Matrix4.fromRotationTranslation(Cesium.Matrix3.fromQuaternion(orientation, new Cesium.Matrix3()), position, new Cesium.Matrix4());}return modelMatrix;}

emitterModelMatrix：在粒子系统的局部坐标系内变换粒子发射器。说白了，就是在粒子进行modelMatrix位置转换之后，然后开始在该位置进行粒子的发射。
这里也有一个参考代码：

function computeEmitterModelMatrix() {hpr = Cesium.HeadingPitchRoll.fromDegrees(0.0, 0.0, 0.0, new Cesium.HeadingPitchRoll());var trs = new Cesium.TranslationRotationScale();trs.translation = Cesium.Cartesian3.fromElements(2.5, 4.0, 1.0, new Cesium.Cartesian3());trs.rotation = Cesium.Quaternion.fromHeadingPitchRoll(hpr, new Cesium.Quaternion());return Cesium.Matrix4.fromTranslationRotationScale(trs, new Cesium.Matrix4());
}

另外，我需要说的是，如果需要展示粒子特效，Cesium的shouldAnimate必须为true。
第二步，就是把该粒子加入到场景中：

viewer.scene.primitives.add(rainSystem);

Cesium之粒子---简单粒子特效相关推荐

基于Java的Minecraft游戏后端自定义插件 06绘制简单粒子特效与BukkitRunable定时器
绘制简单粒子特效与BukkitRunable定时器粒子特效多线程BukkitRunable 粒子特效利用定时器来设定特效出现是否延迟,以及周期频率奖励特效一: VexLighting 在玩家处 ...
html特效 wpf,利用WPF实现一个简单的文字粒子闪烁动画特效
利用WPF实现一个简单的文字粒子闪烁动画特效发布时间:2020-11-06 16:04:19 来源:亿速云阅读:124 作者:Leah 本篇文章给大家分享的是有关利用WPF实现一个简单的文字粒子闪 ...
三郎前端特效学习源代码：魔法旋转粒子动态渐变特效
三郎前端特效学习源代码:魔法旋转粒子动态渐变特效简单介绍效果图源代码 html部分 js部分第二个js部分简单介绍类似电影里的魔法效果轨迹次数速度都可以自己改改效果图源代码 html ...
html5 svg画钟表,html5 svg创意卡通粒子时钟动画特效
非常简单可爱的一款html5 svg绘制的创意卡通粒子时钟动画特效,时钟走动指针动画非常有意思. 查看演示下载资源: 12 次下载资源下载积分: 20 积分 js代码 // Utilities ...
html5波浪效果,html5 canvas粒子波浪动画特效
特效描述:html5 canvas 粒子波浪动画特效.html5基于canvas绘制波涛汹涌的粒子波浪动画. 代码结构 1. HTML代码 'use strict'; var FastRandom = ...
android 漩涡动画,html5 canvas酷炫的粒子漩涡动画特效
特效描述:html5 canvas 粒子漩涡动画特效.html5粒子漩涡动画,酷炫的粒子动画特效代码结构 1. HTML代码 function project3D(x,y,z,vars){ var ...
html5网站粒子时钟,利用HTML5实现SVG多边形粒子时钟动画特效
特效描述:利用HTML5实现 SVG 多边形粒子时钟动画特效.利用HTML5实现SVG多边形粒子时钟动画特效代码结构 1. 引入JS 2. HTML代码 svg { position: ab ...
h5酷炫粒子java代码_html5粒子效果文字特效
特效描述:html5 粒子效果文字特效.html5粒子效果文字特效代码结构 1. HTML代码 BLUR = false; PULSATION = true; PULSATION_PERIOD = ...
html5 照片汇聚logo,利用HTML5实现Canvas粒子汇聚文字特效
特效描述:利用HTML5实现 Canvas 粒子汇聚文字特效.利用HTML5实现Canvas粒子汇聚文字特效代码结构 1. HTML代码 jQuery Chinaz // WRITTEN BY T ...

Cesium之粒子---简单粒子特效

Cesium之粒子---简单粒子特效相关推荐

最新文章

热门文章