作者: NIck Cheng

扩展喷泉特效

之前的博客已经讲过了如何去生成一个火焰特效,这里就不过多叙述了,详情请查看https://blog.csdn.net/beauful88/article/details/98847035
这里就讲一讲如何实现一个喷泉特效

喷泉特效实现

1. 粒子特效部分和之前一样,不过在updateCallback中加了一个重力回调参数

particleSystem = scene.primitives.add(new Cesium.ParticleSystem({// 粒子的图片image: '/static/fountain2.png',// 起始颜色startColor: new Cesium.Color(1, 1, 1, 0.3),// 结束颜色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 * 2),// 粒子数量emissionRate: this.viewModel.emissionRate,lifetime: 16,// 循环是否开启loop: true,// 粒子的释放方向emitter: new Cesium.CircleEmitter(0.2),// 重力回调updateCallback: applyGravity,// 是否以米为单位sizeInMeters: true}))

2. 重力回调参数描述根据粒子的存在的时间以及初始速度来完成给粒子加抛物轨道的效果

var gravityScratch = new Cesium.Cartesian3()let _this = thisfunction applyGravity (p, dt) {var position = p.positionCesium.Cartesian3.normalize(position, gravityScratch)Cesium.Cartesian3.multiplyByScalar(gravityScratch, _this.viewModel.gravity * dt, gravityScratch)p.velocity = Cesium.Cartesian3.add(p.velocity, gravityScratch, p.velocity)}

3. 其它的参数可以参考附件demo中的范例来实现,大家也可以参考之前的那篇博客来实现对应的效果,效果截图如下:
   

完整代码

完整代码及所用到的gltf模型和粒子图片都已经打包至附件的zip中,大家可以自己尝试一下~