SuperMap iClient3D for WebGL教程粒子特效-基础火焰特效

粒子特效简介
使用粒子特效
完整代码

作者: 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的资源中,欢迎大家浏览借鉴(仅供借鉴的渣代码 )
效果截图

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教程粒子特效-基础火焰特效相关推荐