作者: NIck Cheng

粒子特效简介

粒子特效通常使用与要表现某些动态粒子效果的情况下(火焰,喷泉,烟雾等),这些效果通常无法通过单一图片来表示,就需要借助粒子特效来加以实现.
超图iClient3D for WebGL对原有Cesium的ParticleSystem类进行了一定的优化,使其能实现更加逼真的效果,更趋近于超图iDesktop .net中的例子特效效果,给予用户更真实的体验,可广泛用户应急演练,救灾抢险,三维管线维护等展示效果上.

使用粒子特效

这里我们要实现一个小车自燃的粒子特效效果,可以通过下面这些步骤来实现

1. 首先我们先声明一个场景(这里不过多叙述)

let viewer = new Cesium.Viewer('cesiumContainer')

2. 使用Entity类为我们的粒子定下一个位置

var position = Cesium.Cartesian3.fromDegrees(116.39079313032, 39.9919830785419, 0)var entity = viewer.entities.add({position: position})

3. 添加一个小车,放在粒子的位置上

let entity2 = viewer.entities.add({name: 'text',model: {uri: '/static/Cesium_Ground.gltf',minimumPixelSize: 64},viewFrom: new Cesium.Cartesian3(-100.0, 0.0, 100.0),position: position})viewer.trackedEntity = entity2

4. 使用粒子特效

let viewModel = {emissionRate: 200,minimumParticleLife: 1.5,maximumParticleLife: 1.8,minimumSpeed: 7.0,maximumSpeed: 9.0,startScale: 3.0,endScale: 1.5,particleSize: 1}
particleSystem = scene.primitives.add(new Cesium.ParticleSystem({// 粒子的图片image: '/static/fire.png',// 起始颜色startColor: new Cesium.Color(1, 1, 1, 1),// 结束颜色endColor: new Cesium.Color(1, 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,// 循环是否开启loop: true,// 粒子的释放方向emitter: new Cesium.ConeEmitter(Cesium.Math.toRadians(45.0)),// 是否以米为单位sizeInMeters: true}))viewer.scene.preUpdate.addEventListener(function (scene, time) {particleSystem.modelMatrix = computeModelMatrix(entity, time)// Account for any changes to the emitter model matrix.particleSystem.emitterModelMatrix = computeEmitterModelMatrix()})function computeModelMatrix (entity, time) {return entity.computeModelMatrix(time, new Cesium.Matrix4())}var emitterModelMatrix = new Cesium.Matrix4()var translation = new Cesium.Cartesian3()var rotation = new Cesium.Quaternion()var hpr = new Cesium.HeadingPitchRoll()var trs = new Cesium.TranslationRotationScale()// 改变粒子系统的位置function computeEmitterModelMatrix () {hpr = Cesium.HeadingPitchRoll.fromDegrees(0.0, 0.0, 0.0, hpr)trs.translation = Cesium.Cartesian3.fromElements(-2, 0, 2, translation)trs.rotation = Cesium.Quaternion.fromHeadingPitchRoll(hpr, rotation)return Cesium.Matrix4.fromTranslationRotationScale(trs, emitterModelMatrix)}

然后我们就可以在场景中浏览我们的粒子特效的效果了

完整代码

这里我使用vue框架并且使用element-ui及css-sass实现了一个较为完整的demo,大家可以参考一下
代码在我的csdn的资源中,欢迎大家浏览借鉴(仅供借鉴的渣代码 )
效果截图