SuperMap iClient3D for WebGL教程粒子特效-扩展喷泉特效

扩展喷泉特效
喷泉特效实现
完整代码

作者: NIck Cheng

扩展喷泉特效

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

喷泉特效实现

粒子特效部分和之前一样,不过在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}))

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

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)}

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

完整代码

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

SuperMap iClient3D for WebGL教程粒子特效-扩展喷泉特效相关推荐

SuperMap iClient3D for WebGL教程粒子特效-基础火焰特效
SuperMap iClient3D for WebGL教程粒子特效-基础火焰特效粒子特效简介使用粒子特效完整代码作者: NIck Cheng 粒子特效简介粒子特效通常使用与要表现某些动态 ...
SuperMap iClient3D for WebGL教程（Entity）-ModelGraphics
作者:为梦齐舞本文同步更新于简书文章[https://www.jianshu.com/p/bdf397685e8b] ModelGraphics类是隶属于实体对象的一个类型,主要用于创建模型图形,加 ...
SuperMap iClient3D for WebGL教程 Camera
SuperMap iClient3D for WebGL教程 Camera WuYK 在WebGL场景里,有一类很重要的对象,那就是我们的相机Camera对象.这里的Camera相当于人的眼睛,从坐标 ...
SuperMap iClient3D for WebGL教程 Primitive
SuperMap iClient3D for WebGL教程 Primitive WuYK 在Webgl中,实体对象主要由两大类组成,一类是Entity对象,还有一类就是Primitive对象.那么有 ...
SuperMap iClient3D for WebGL教程（空间分析）- 地表开挖及修改
地表开挖主要是为了显示出地下的场景,比如地下管网,而地形修改通常是为了让地表平整,便于跟模型匹配,接下来我们分别说说如何实现地表开挖和地形修改. 地表开挖 1.引用核心样式文件和库文件 <scr ...
SuperMap iClient3D for WebGL教程（影像篇）-Mapbox
作者:为梦齐舞本文同步更新于简书文章https://www.jianshu.com/p/e19129908252 Mapbox 是一个可以创建各种自定义地图的网站,如 foursquare.Pint ...
SuperMap iClient3D for WebGL教程（特效）- 扫描线
WebGL带有许多特效效果,本文给大家讲讲怎么实现扫描线的效果.当需要实现事故影响范围的传播,可以使用这个功能. 一.开启特效扫描线特效的功能主要的接口是new Cesium.ScanEffect( ...
SuperMap iClient3D for WebGL教程-管线流动特效
作者:Volare 随着目前在WebGl中展示管线的项目越来越多,但大多是直接展示的管线,其中没有水流流动的效果,而在本文中将为大家介绍如何在WebGl中展示管线中水流流动的效果,目前在WebGl中用 ...
SuperMap iClient3D for WebGL教程（特效）- 聚光源
作者:Volare 在上一篇的博客中为大家讲解了如何在WebGl中制作点光源,在这篇博客中小编再来为大家讲述一下在WebGl中如果制作聚光源的效果. 一.同样的大家先一起来了解聚光源接口中的参数说明 ...

SuperMap iClient3D for WebGL教程粒子特效-扩展喷泉特效

SuperMap iClient3D for WebGL教程粒子特效-扩展喷泉特效

扩展喷泉特效

喷泉特效实现

完整代码

SuperMap iClient3D for WebGL教程粒子特效-扩展喷泉特效相关推荐

最新文章

热门文章

SuperMap iClient3D for WebGL教程 粒子特效-扩展喷泉特效

SuperMap iClient3D for WebGL教程 粒子特效-扩展喷泉特效

扩展喷泉特效

喷泉特效实现

完整代码

SuperMap iClient3D for WebGL教程 粒子特效-扩展喷泉特效相关推荐

最新文章

热门文章

SuperMap iClient3D for WebGL教程粒子特效-扩展喷泉特效

SuperMap iClient3D for WebGL教程粒子特效-扩展喷泉特效

SuperMap iClient3D for WebGL教程粒子特效-扩展喷泉特效相关推荐