基于1.9版本cesium封装了几个粒子功能
1.火焰
//火焰特效export class FireEffect{constructor(viewer) {this.viewer=viewerthis.viewModel={emissionRate: 5,gravity: 0.0,//设置重力参数minimumParticleLife: 1,maximumParticleLife: 6,minimumSpeed: 1.0,//粒子发射的最小速度maximumSpeed: 4.0,//粒子发射的最大速度startScale: 0.0,endScale: 10.0,particleSize: 25.0,}this.emitterModelMatrix = new Cesium.Matrix4()this.translation = new Cesium.Cartesian3()this.rotation = new Cesium.Quaternion()this.hpr = new Cesium.HeadingPitchRoll()this.trs = new Cesium.TranslationRotationScale()this.scene = this.viewer.scenethis.particleSystem=''this.entity = this.viewer.entities.add({//选择粒子放置的坐标position: Cesium.Cartesian3.fromDegrees(116.34485552299206,39.99754814959118),});this.init();}init(){const _this=thisthis.viewer.clock.shouldAnimate = true;this.viewer.scene.globe.depthTestAgainstTerrain = false;this.viewer.trackedEntity = this.entity;var particleSystem = this.scene.primitives.add(new Cesium.ParticleSystem({image: require('../assets/fire.png'),//生成所需粒子的图片路径//粒子在生命周期开始时的颜色startColor: new Cesium.Color(1, 1, 1, 1),//粒子在生命周期结束时的颜色endColor: new Cesium.Color(0.5, 0, 0, 0),//粒子在生命周期开始时初始比例startScale: _this.viewModel.startScale,//粒子在生命周期结束时比例endScale: _this.viewModel.endScale,//粒子发射的最小速度minimumParticleLife: _this.viewModel.minimumParticleLife,//粒子发射的最大速度maximumParticleLife: _this.viewModel.maximumParticleLife,//粒子质量的最小界限minimumSpeed: _this.viewModel.minimumSpeed,//粒子质量的最大界限maximumSpeed: _this.viewModel.maximumSpeed,//以像素为单位缩放粒子图像尺寸imageSize: new Cesium.Cartesian2(_this.viewModel.particleSize,_this.viewModel.particleSize),//每秒发射的粒子数emissionRate: _this.viewModel.emissionRate,//粒子系统发射粒子的时间（秒）lifetime: 16.0,//粒子系统是否应该在完成时循环其爆发loop: true,//设置粒子的大小是否以米或像素为单位sizeInMeters: true,//系统的粒子发射器emitter: new Cesium.ConeEmitter(Cesium.Math.toRadians(45.0)),//BoxEmitter 盒形发射器，ConeEmitter 锥形发射器，SphereEmitter 球形发射器，CircleEmitter圆形发射器}));this.particleSystem=particleSystem;this.preUpdateEvent()}//场景渲染事件preUpdateEvent() {let _this=this;this.viewer.scene.preUpdate.addEventListener(function (scene, time) {//发射器地理位置_this.particleSystem.modelMatrix = puteModelMatrix(_this.entity, time);//发射器局部位置_this.particleSystem.emitterModelMatrix = puteEmitterModelMatrix();// 将发射器旋转if (_this.viewModel.spin) {_this.viewModel.heading += 1.0;_this.viewModel.pitch += 1.0;_this.viewModel.roll += 1.0;}});}computeModelMatrix(entity, time) {return puteModelMatrix(time, new Cesium.Matrix4());}computeEmitterModelMatrix() {this.hpr = Cesium.HeadingPitchRoll.fromDegrees(0.0, 0.0, 0.0, this.hpr);this.trs.translation = Cesium.Cartesian3.fromElements(-4.0,0.0,1.4,this.translation);this.trs.rotation = Cesium.Quaternion.fromHeadingPitchRoll(this.hpr, this.rotation);return Cesium.Matrix4.fromTranslationRotationScale(this.trs,this.emitterModelMatrix);}removeEvent(){this.viewer.scene.preUpdate.removeEventListener(this.preUpdateEvent, this);this.emitterModelMatrix = undefined;this.translation = undefined;this.rotation = undefined;this.hpr = undefined;this.trs = undefined;}//移除粒子特效remove() {()=>{return this.removeEvent()}; //清除事件this.viewer.scene.primitives.remove(this.particleSystem); //删除粒子对象this.viewer.entities.remove(this.entity); //删除entity}}
2.水枪
export class waterEffect{constructor(viewer) {this.viewer=viewerthis.viewModel={emissionRate: 5,gravity: 0.0,//设置重力参数minimumParticleLife: 1,maximumParticleLife: 6,minimumSpeed: 1.0,//粒子发射的最小速度maximumSpeed: 4.0,//粒子发射的最大速度startScale: 0.0,endScale: 10.0,particleSize: 25.0,}this.emitterModelMatrix = new Cesium.Matrix4()this.translation = new Cesium.Cartesian3()this.rotation = new Cesium.Quaternion()this.hpr = new Cesium.HeadingPitchRoll()this.trs = new Cesium.TranslationRotationScale()this.scene = this.viewer.scenethis.particleSystem=''this.entity = this.viewer.entities.add({//选择粒子放置的坐标position: Cesium.Cartesian3.fromDegrees(116.34485552299206,39.99754814959118),});this.init();}init(){const _this=thisthis.viewer.clock.shouldAnimate = true;this.viewer.scene.globe.depthTestAgainstTerrain = false;this.viewer.trackedEntity = this.entity;var particleSystem = this.scene.primitives.add(new Cesium.ParticleSystem({image: require('../assets/water.png'),//生成所需粒子的图片路径//粒子在生命周期开始时的颜色startColor: new Cesium.Color(1, 1, 1, 0.6),//粒子在生命周期结束时的颜色endColor: new Cesium.Color(0.80, 0.86, 1, 0.4),//粒子在生命周期开始时初始比例startScale: _this.viewModel.startScale,//粒子在生命周期结束时比例endScale: _this.viewModel.endScale,//粒子发射的最小速度minimumParticleLife: _this.viewModel.minimumParticleLife,//粒子发射的最大速度maximumParticleLife: _this.viewModel.maximumParticleLife,//粒子质量的最小界限minimumSpeed: _this.viewModel.minimumSpeed,//粒子质量的最大界限maximumSpeed: _this.viewModel.maximumSpeed,//以像素为单位缩放粒子图像尺寸imageSize: new Cesium.Cartesian2(_this.viewModel.particleSize,_this.viewModel.particleSize),//每秒发射的粒子数emissionRate: _this.viewModel.emissionRate,//粒子系统发射粒子的时间（秒）lifetime: 16.0,//设置粒子的大小是否以米或像素为单位sizeInMeters: true,//系统的粒子发射器emitter: new Cesium.CircleEmitter(0.2),//BoxEmitter 盒形发射器，ConeEmitter 锥形发射器，SphereEmitter 球形发射器，CircleEmitter圆形发射器//回调函数，实现各种喷泉、烟雾效果updateCallback: (p, dt) => {return this.applyGravity(p, dt);},}));this.particleSystem=particleSystem;this.preUpdateEvent()}//场景渲染事件preUpdateEvent() {let _this=this;this.viewer.scene.preUpdate.addEventListener(function (scene, time) {//发射器地理位置_this.particleSystem.modelMatrix = puteModelMatrix(_this.entity, time);//发射器局部位置_this.particleSystem.emitterModelMatrix = puteEmitterModelMatrix();// 将发射器旋转if (_this.viewModel.spin) {_this.viewModel.heading += 1.0;_this.viewModel.pitch += 1.0;_this.viewModel.roll += 1.0;}});}computeModelMatrix(entity, time) {return puteModelMatrix(time, new Cesium.Matrix4());}computeEmitterModelMatrix() {this.hpr = Cesium.HeadingPitchRoll.fromDegrees(0.0, 0.0, 0.0, this.hpr);this.trs.translation = Cesium.Cartesian3.fromElements(-4.0,0.0,1.4,this.translation);this.trs.rotation = Cesium.Quaternion.fromHeadingPitchRoll(this.hpr, this.rotation);return Cesium.Matrix4.fromTranslationRotationScale(this.trs,this.emitterModelMatrix);}applyGravity(p, dt){var gravityScratch = new Cesium.Cartesian3()var position = p.positionCesium.Cartesian3.normalize(position, gravityScratch)Cesium.Cartesian3.fromElements(20 * dt,gravityScratch.y * dt,-30 * dt,gravityScratch);p.velocity = Cesium.Cartesian3.add(p.velocity, gravityScratch, p.velocity)}removeEvent(){this.viewer.scene.preUpdate.removeEventListener(this.preUpdateEvent, this);this.emitterModelMatrix = undefined;this.translation = undefined;this.rotation = undefined;this.hpr = undefined;this.trs = undefined;}//移除粒子特效remove() {()=>{return this.removeEvent()}; //清除事件this.viewer.scene.primitives.remove(this.particleSystem); //删除粒子对象this.viewer.entities.remove(this.entity); //删除entity}}
3.爆炸
//爆炸特效export class explotEffect{constructor(viewer) {this.viewer=viewerthis.viewModel={emissionRate: 5,gravity: 0.0,//设置重力参数minimumParticleLife: 1,maximumParticleLife: 6,minimumSpeed: 1.0,//粒子发射的最小速度maximumSpeed: 4.0,//粒子发射的最大速度startScale: 0.0,endScale: 10.0,particleSize: 25.0,}this.emitterModelMatrix = new Cesium.Matrix4()this.translation = new Cesium.Cartesian3()this.rotation = new Cesium.Quaternion()this.hpr = new Cesium.HeadingPitchRoll()this.trs = new Cesium.TranslationRotationScale()this.scene = this.viewer.scenethis.particleSystem=''this.entity = this.viewer.entities.add({//选择粒子放置的坐标position: Cesium.Cartesian3.fromDegrees(116.34485552299206,39.99754814959118),});this.init();}init(){const _this=thisthis.viewer.clock.shouldAnimate = true;this.viewer.scene.globe.depthTestAgainstTerrain = false;this.viewer.trackedEntity = this.entity;var particleSystem = this.scene.primitives.add(new Cesium.ParticleSystem({image: require('../assets/explot.png'),//生成所需粒子的图片路径//粒子在生命周期开始时的颜色startColor: Cesium.Color.RED.withAlpha(0.7),//粒子在生命周期结束时的颜色endColor: Cesium.Color.YELLOW.withAlpha(0.3),//粒子在生命周期开始时初始比例startScale: _this.viewModel.startScale,//粒子在生命周期结束时比例endScale: _this.viewModel.endScale,//粒子发射的最小速度minimumParticleLife: _this.viewModel.minimumParticleLife,//粒子发射的最大速度maximumParticleLife: _this.viewModel.maximumParticleLife,//粒子质量的最小界限minimumSpeed: _this.viewModel.minimumSpeed,//粒子质量的最大界限maximumSpeed: _this.viewModel.maximumSpeed,//以像素为单位缩放粒子图像尺寸imageSize: new Cesium.Cartesian2(_this.viewModel.particleSize,_this.viewModel.particleSize),//每秒发射的粒子数emissionRate: _this.viewModel.emissionRate,//粒子系统发射粒子的时间（秒）lifetime: 16.0,//设置粒子的大小是否以米或像素为单位sizeInMeters: true,//系统的粒子发射器emitter: new Cesium.CircleEmitter(5.0),//BoxEmitter 盒形发射器，ConeEmitter 锥形发射器，SphereEmitter 球形发射器，CircleEmitter圆形发射器}));this.particleSystem=particleSystem;this.preUpdateEvent()}//场景渲染事件preUpdateEvent() {let _this=this;this.viewer.scene.preUpdate.addEventListener(function (scene, time) {//发射器地理位置_this.particleSystem.modelMatrix = puteModelMatrix(_this.entity, time);//发射器局部位置_this.particleSystem.emitterModelMatrix = puteEmitterModelMatrix();// 将发射器旋转if (_this.viewModel.spin) {_this.viewModel.heading += 1.0;_this.viewModel.pitch += 1.0;_this.viewModel.roll += 1.0;}});}computeModelMatrix(entity, time) {return puteModelMatrix(time, new Cesium.Matrix4());}computeEmitterModelMatrix() {this.hpr = Cesium.HeadingPitchRoll.fromDegrees(0.0, 0.0, 0.0, this.hpr);this.trs.translation = Cesium.Cartesian3.fromElements(-4.0,0.0,1.4,this.translation);this.trs.rotation = Cesium.Quaternion.fromHeadingPitchRoll(this.hpr, this.rotation);return Cesium.Matrix4.fromTranslationRotationScale(this.trs,this.emitterModelMatrix);}removeEvent(){this.viewer.scene.preUpdate.removeEventListener(this.preUpdateEvent, this);this.emitterModelMatrix = undefined;this.translation = undefined;this.rotation = undefined;this.hpr = undefined;this.trs = undefined;}//移除粒子特效remove() {()=>{return this.removeEvent()}; //清除事件this.viewer.scene.primitives.remove(this.particleSystem); //删除粒子对象this.viewer.entities.remove(this.entity); //删除entity}}
4.喷雾
//喷雾特效export class sprayEffect{constructor(viewer) {this.viewer=viewerthis.viewModel={emissionRate: 5,gravity: 0.0,//设置重力参数minimumParticleLife: 1,maximumParticleLife: 6,minimumSpeed: 1.0,//粒子发射的最小速度maximumSpeed: 4.0,//粒子发射的最大速度startScale: 0.0,endScale: 10.0,particleSize: 25.0,}this.emitterModelMatrix = new Cesium.Matrix4()this.translation = new Cesium.Cartesian3()this.rotation = new Cesium.Quaternion()this.hpr = new Cesium.HeadingPitchRoll()this.trs = new Cesium.TranslationRotationScale()this.scene = this.viewer.scenethis.particleSystem=''this.entity = this.viewer.entities.add({//选择粒子放置的坐标position: Cesium.Cartesian3.fromDegrees(116.34485552299206,39.99754814959118),});this.init();}init(){const _this=thisthis.viewer.clock.shouldAnimate = true;this.viewer.scene.globe.depthTestAgainstTerrain = false;this.viewer.trackedEntity = this.entity;var particleSystem = this.scene.primitives.add(new Cesium.ParticleSystem({image: require('../assets/fire.png'),//生成所需粒子的图片路径//粒子在生命周期开始时的颜色startColor: Cesium.Color.RED.withAlpha(0.7),//粒子在生命周期结束时的颜色endColor: Cesium.Color.YELLOW.withAlpha(0.3),//粒子在生命周期开始时初始比例startScale: _this.viewModel.startScale,//粒子在生命周期结束时比例endScale: _this.viewModel.endScale,//粒子发射的最小速度minimumParticleLife: _this.viewModel.minimumParticleLife,//粒子发射的最大速度maximumParticleLife: _this.viewModel.maximumParticleLife,//粒子质量的最小界限minimumSpeed: _this.viewModel.minimumSpeed,//粒子质量的最大界限maximumSpeed: _this.viewModel.maximumSpeed,//以像素为单位缩放粒子图像尺寸imageSize: new Cesium.Cartesian2(_this.viewModel.particleSize,_this.viewModel.particleSize),//每秒发射的粒子数emissionRate: _this.viewModel.emissionRate,//粒子系统发射粒子的时间（秒）lifetime: 16.0,//设置粒子的大小是否以米或像素为单位sizeInMeters: true,//系统的粒子发射器emitter: new Cesium.CircleEmitter(2.0),//BoxEmitter 盒形发射器，ConeEmitter 锥形发射器，SphereEmitter 球形发射器，CircleEmitter圆形发射器//回调函数，实现各种喷泉、烟雾效果updateCallback: (p, dt) => {return this.applyGravity(p, dt);},}));this.particleSystem=particleSystem;this.preUpdateEvent()}//场景渲染事件preUpdateEvent() {let _this=this;this.viewer.scene.preUpdate.addEventListener(function (scene, time) {//发射器地理位置_this.particleSystem.modelMatrix = puteModelMatrix(_this.entity, time);//发射器局部位置_this.particleSystem.emitterModelMatrix = puteEmitterModelMatrix();// 将发射器旋转if (_this.viewModel.spin) {_this.viewModel.heading += 1.0;_this.viewModel.pitch += 1.0;_this.viewModel.roll += 1.0;}});}computeModelMatrix(entity, time) {return puteModelMatrix(time, new Cesium.Matrix4());}computeEmitterModelMatrix() {this.hpr = Cesium.HeadingPitchRoll.fromDegrees(0.0, 0.0, 0.0, this.hpr);this.trs.translation = Cesium.Cartesian3.fromElements(-4.0,0.0,1.4,this.translation);this.trs.rotation = Cesium.Quaternion.fromHeadingPitchRoll(this.hpr, this.rotation);return Cesium.Matrix4.fromTranslationRotationScale(this.trs,this.emitterModelMatrix);}applyGravity(p, dt){var gravityScratch = new Cesium.Cartesian3()var position = p.positionCesium.Cartesian3.normalize(position, gravityScratch)Cesium.Cartesian3.fromElements(20 * dt,gravityScratch.y * dt,-30 * dt,gravityScratch);p.velocity = Cesium.Cartesian3.add(p.velocity, gravityScratch, p.velocity)}removeEvent(){this.viewer.scene.preUpdate.removeEventListener(this.preUpdateEvent, this);this.emitterModelMatrix = undefined;this.translation = undefined;this.rotation = undefined;this.hpr = undefined;this.trs = undefined;}//移除粒子特效remove() {()=>{return this.removeEvent()}; //清除事件this.viewer.scene.primitives.remove(this.particleSystem); //删除粒子对象this.viewer.entities.remove(this.entity); //删除entity}}
5.烟
//烟特效export class smokeEffect{constructor(viewer) {this.viewer=viewerthis.viewModel={emissionRate: 5,gravity: 0.0,//设置重力参数minimumParticleLife: 1,maximumParticleLife: 6,minimumSpeed: 1.0,//粒子发射的最小速度maximumSpeed: 4.0,//粒子发射的最大速度startScale: 0.0,endScale: 10.0,particleSize: 25.0,}this.emitterModelMatrix = new Cesium.Matrix4()this.translation = new Cesium.Cartesian3()this.rotation = new Cesium.Quaternion()this.hpr = new Cesium.HeadingPitchRoll()this.trs = new Cesium.TranslationRotationScale()this.scene = this.viewer.scenethis.particleSystem=''this.entity = this.viewer.entities.add({//选择粒子放置的坐标position: Cesium.Cartesian3.fromDegrees(116.34485552299206,39.99754814959118),});this.init();}init(){const _this=thisthis.viewer.clock.shouldAnimate = true;this.viewer.scene.globe.depthTestAgainstTerrain = false;this.viewer.trackedEntity = this.entity;var particleSystem = this.scene.primitives.add(new Cesium.ParticleSystem({image: require('../assets/fire.png'),//生成所需粒子的图片路径//粒子在生命周期开始时的颜色startColor: Cesium.Color.RED.withAlpha(0.7),//粒子在生命周期结束时的颜色endColor: Cesium.Color.YELLOW.withAlpha(0.3),//粒子在生命周期开始时初始比例startScale: _this.viewModel.startScale,//粒子在生命周期结束时比例endScale: _this.viewModel.endScale,//粒子发射的最小速度minimumParticleLife: _this.viewModel.minimumParticleLife,//粒子发射的最大速度maximumParticleLife: _this.viewModel.maximumParticleLife,//粒子质量的最小界限minimumSpeed: _this.viewModel.minimumSpeed,//粒子质量的最大界限maximumSpeed: _this.viewModel.maximumSpeed,//以像素为单位缩放粒子图像尺寸imageSize: new Cesium.Cartesian2(_this.viewModel.particleSize,_this.viewModel.particleSize),//每秒发射的粒子数emissionRate: _this.viewModel.emissionRate,//粒子系统发射粒子的时间（秒）lifetime: 16.0,//设置粒子的大小是否以米或像素为单位sizeInMeters: true,//系统的粒子发射器emitter: new Cesium.CircleEmitter(2.0),//BoxEmitter 盒形发射器，ConeEmitter 锥形发射器，SphereEmitter 球形发射器，CircleEmitter圆形发射器//回调函数，实现各种喷泉、烟雾效果updateCallback: (p, dt) => {return this.applyGravity(p, dt);},}));this.particleSystem=particleSystem;this.preUpdateEvent()}//场景渲染事件preUpdateEvent() {let _this=this;this.viewer.scene.preUpdate.addEventListener(function (scene, time) {//发射器地理位置_this.particleSystem.modelMatrix = puteModelMatrix(_this.entity, time);//发射器局部位置_this.particleSystem.emitterModelMatrix = puteEmitterModelMatrix();// 将发射器旋转if (_this.viewModel.spin) {_this.viewModel.heading += 1.0;_this.viewModel.pitch += 1.0;_this.viewModel.roll += 1.0;}});}computeModelMatrix(entity, time) {return puteModelMatrix(time, new Cesium.Matrix4());}computeEmitterModelMatrix() {this.hpr = Cesium.HeadingPitchRoll.fromDegrees(0.0, 0.0, 0.0, this.hpr);this.trs.translation = Cesium.Cartesian3.fromElements(-4.0,0.0,1.4,this.translation);this.trs.rotation = Cesium.Quaternion.fromHeadingPitchRoll(this.hpr, this.rotation);return Cesium.Matrix4.fromTranslationRotationScale(this.trs,this.emitterModelMatrix);}applyGravity(p, dt){var gravityScratch = new Cesium.Cartesian3()var position = p.positionCesium.Cartesian3.normalize(position, gravityScratch)Cesium.Cartesian3.fromElements(20 * dt,30 * dt,gravityScratch.y * dt,gravityScratch);p.velocity = Cesium.Cartesian3.add(p.velocity, gravityScratch, p.velocity)}removeEvent(){this.viewer.scene.preUpdate.removeEventListener(this.preUpdateEvent, this);this.emitterModelMatrix = undefined;this.translation = undefined;this.rotation = undefined;this.hpr = undefined;this.trs = undefined;}//移除粒子特效remove() {()=>{return this.removeEvent()}; //清除事件this.viewer.scene.primitives.remove(this.particleSystem); //删除粒子对象this.viewer.entities.remove(this.entity); //删除entity}}
粒子图片
水滴粒子
火焰粒子
爆炸粒子
