网上有很多教程,但是基本都是写了一半,某些代码丢失,对于初学者来说无法改出效果。因此经各人成功试验后精简了代码,方便初学者理解。
实现思路:
1 火灾得有一个发生地,那么 可以理解为粒子系统的发射源。故而我们首先应该定义一个发射源实体。
//粒子系统的起点,发射源 var staticPosition = Cesium.Cartesian3.fromDegrees(116.34516786934411,39.99753297677145,3.614538127977399); var entity44 = viewer.entities.add({ position : staticPosition });
第二步:发射源已经有了,那么我们需要用cesium的粒子系统来将火星发射出来,那么这里面就涉及到很多问题。
火的颜色,火蔓延的快慢,火蔓延的方向,等等一系列属性,cesium给我们提供了很多属性。
可以看出粒子系统其实和其他的模型什么的没有任何区别,都是以primitive方式添加进入场景。
那么下面一步步解读需要的参数
viewer.scene.primitives.add(new Cesium.ParticleSystem({ image : './Apps/SampleData/fire.png', startColor : Cesium.Color.RED.withAlpha(0.7), endColor : Cesium.Color.YELLOW.withAlpha(0.3), startScale : 0, endScale : 10, //设定粒子寿命可能持续时间的最小限值(以秒为单位),在此限值之上将随机选择粒子的实际寿命。 minimumParticleLife : 1, maximumParticleLife : 6, minimumSpeed :1, maximumSpeed : 4, imageSize : new Cesium.Cartesian2(55, 55), // Particles per second. emissionRate : 4, lifetime : 160.0, //cesium内置的发射器,圆形发射器,因此参数是一个半径值 //还有锥形发射器,new Cesium.ConeEmitter(Cesium.Math.toRadians(45.0)) //长方形发射器,new Cesium.BoxEmitter(new Cesium.Cartesian3(1.0, 1.0, 1.0)) //半球发射器,new Cesium.SphereEmitter(0.5) emitter : new Cesium.CircleEmitter(5.0), //将粒子系统从模型转换为世界坐标的4x4变换矩阵 modelMatrix : computeModelMatrix(entity44), //在粒子系统局部坐标系中变换粒子系统发射器的4x4变换矩阵。 emitterModelMatrix : computeEmitterModelMatrix() }));
再来看看这两个关键的转换函数到底是什么东西呢,不想去研究了,就是cesium提供给我们的一个接口。其实感觉不应该有这个接口的,entity已经是世界坐标的了,这根本没有传入任何有用的信息。如果以我理解,还是理解为粒子系统的发射源位置设置吧。其实应该封装为entity就可以了
function computeModelMatrix(entity) { var position = Cesium.Property.getValueOrUndefined(entity.position); let modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(position); return modelMatrix; }
//这个相对容易理解一些,其实就是粒子散播的形态,其实状态,翻转角度等等
function computeEmitterModelMatrix() { let hpr = Cesium.HeadingPitchRoll.fromDegrees(0, 0, 0); let trs = new Cesium.TranslationRotationScale(); trs.translation = Cesium.Cartesian3.fromElements(2.5,4, 1); trs.rotation = Cesium.Quaternion.fromHeadingPitchRoll(hpr); let result=Cesium.Matrix4.fromTranslationRotationScale(trs); return result }
可以看到很多文章采用了viewmodel的形式,实际上就是将这些参数统一管理了。
最后上一张效果图吧