作者: NIck Cheng
粒子特效简介
粒子特效通常使用与要表现某些动态粒子效果的情况下(火焰,喷泉,烟雾等),这些效果通常无法通过单一图片来表示,就需要借助粒子特效来加以实现.
超图iClient3D for WebGL对原有Cesium的ParticleSystem类进行了一定的优化,使其能实现更加逼真的效果,更趋近于超图iDesktop .net中的例子特效效果,给予用户更真实的体验,可广泛用户应急演练,救灾抢险,三维管线维护等展示效果上.
使用粒子特效
这里我们要实现一个小车自燃的粒子特效效果,可以通过下面这些步骤来实现
- 首先我们先声明一个场景(这里不过多叙述)
let viewer = new Cesium.Viewer('cesiumContainer')
- 使用Entity类为我们的粒子定下一个位置
var position = Cesium.Cartesian3.fromDegrees(116.39079313032, 39.9919830785419, 0)
var entity = viewer.entities.add({
position: position
})
- 添加一个小车,放在粒子的位置上
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
- 使用粒子特效
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的资源中,欢迎大家浏览借鉴(仅供借鉴的渣代码 )
效果截图