Cesium中粒子系统被用来模拟飞机爆炸、雨雪天气等场景。
根据官网对其定义 ,粒子系统是由小图像组成的集合,当他们在一起形成一个更复杂的对象时,就会形成火、烟等景象。对于该系统详细的说明可以参照官网介绍:
https://cesiumjs.org/tutorials/Particle-Systems-Tutorial/
下面还有国内公司的翻译版:
http://cesium.marsgis.cn/go.html?id=12
看完上述教程还是一头雾水,那就做个简单的粒子来分析下吧。粒子系统其实实由一个发射器不断发射出粒子对象实现的。如果是一个单个的粒子,可以将粒子发射器想象成一把枪,子弹就是该发射器发射出的粒子。不同之处在于,粒子发射器发射出粒子之后可以控制粒子的轨迹、颜色等属性。
先来看一个最简单的生成粒子系统的代码例子:
var item = viewer.scene.primitives.add(new Cesium.ParticleSystem({
image : getImage(),//粒子图像
startColor : color,//开始颜色
endColor : color.withAlpha(0.5),//结束时的颜色
particleLife : 100,//每个粒子的生存时间,即子弹被打出来后能飞多久
speed : 50,//粒子飞行速度
imageSize : imageSize,//粒子大小
emissionRate : 1.0,//每秒发射粒子的个数
emitter : new Cesium.CircleEmitter(1),//粒子发射器的形式,确定了在什么样的区间里随机产生粒子,该行表示粒子将在一个半径为1米的圆形区域不断产生
lifetime : 100,//粒子发射器的生命周期,即发射粒子的时间,该值可理解为一把枪的弹夹可以用多长时间,loop默认属性为true理解为到时间后换上另一个弹夹继续发射。
updateCallback : force,//粒子位置更新回调函数
modelMatrix : particlesModelMatrix,//决定粒子在空间坐标系的位置矩阵,可以理解为用枪的人的空间位置
emitterModelMatrix : emitterModelMatrix//决定粒子相对于模型位置的位置矩阵,可以理解为人把发射枪拿在哪里,用左手还是右手还是用脚,即发射器相对本体的位置矩阵。
}));
上述代码构成了一个粒子系统,该系统中只有一个发射器。
image : getImage()是每个粒子的样式,我们可以理解成从枪里发射出来子弹的类型,子弹的样子可以是图片,也可以用canves函数来绘制,如果使用图片的话,可以直接写作image : '../../SampleData/fire.png',
在火箭发射粒子效果里,给出了一个简单的圆形图像的绘制函数:
function getImage() {
if (!Cesium.defined(particleCanvas)) {
particleCanvas = document.createElement('canvas');
particleCanvas.width = 20;
particleCanvas.height = 20;
var context2D = particleCanvas.getContext('2d');
context2D.beginPath();
context2D.arc(8, 8, 8, 0, Cesium.Math.TWO_PI, true);
context2D.closePath();
context2D.fillStyle = 'rgb(255, 255, 255)';
context2D.fill();
}
return particleCanvas;
}
上述函数属于html中canves内容,这里不在赘述。
imageSize : imageSize是一个由二维向量定义的尺寸函数,可以由代码new Cesium.Cartesian2(1, 1)进行设置。
应该重点介绍的是updateCallback : force。该属性是一个函数形式,该函数可写作:
function force(particle, dt) {//particle是当前粒子对象,可以由很多属性,dt是时间步长。之前有一个属性是particleLife表示每个粒子被发射出来后的生存时间。dt就是将这段时间均分的步长。下面我们对粒子的位置进行改变。
var position = particle.position;
var positionA = Cesium.Cartesian3.normalize(position, new Cesium.Cartesian3());//将粒子的位置向量正则化为单位值。
Cesium.Cartesian3.multiplyByScalar(positionA , 5, positionA );//将单位向量按比例进行缩放
particle.position= Cesium.Cartesian3.add(particle.position, positionA , particle.position);//在粒子发射方向加上成比例缩放的向量,更新粒子位置
}
上述函数只是对粒子位置按粒子的生命周期进行了修改,还可以对其速度、颜色等属性按时间进行修改。
下述就是用粒子系统做的信号动态传输效果图,黄色用了一个粒子发射器。红色的圈圈用了一组发射器,沿着圆圈的方向不断发射粒子。当然该效果可以直接用entity来实现,但是粒子系统的自由度高,可以做出各种不同的波形效果。
*回忆总像个漏风的房子,起风了,都是不请自来*