Cesium中粒子系統(tǒng)被用來(lái)模擬飛機(jī)爆炸、雨雪天氣等場(chǎng)景。
根據(jù)官網(wǎng)對(duì)其定義 ，粒子系統(tǒng)是由小圖像組成的集合，當(dāng)他們?cè)谝黄鹦纬梢粋€(gè)更復(fù)雜的對(duì)象時(shí)，就會(huì)形成火、煙等景象。對(duì)于該系統(tǒng)詳細(xì)的說(shuō)明可以參照官網(wǎng)介紹：
https://cesiumjs.org/tutorials/Particle-Systems-Tutorial/
下面還有國(guó)內(nèi)公司的翻譯版：
http://cesium.marsgis.cn/go.html?id=12
看完上述教程還是一頭霧水，那就做個(gè)簡(jiǎn)單的粒子來(lái)分析下吧。粒子系統(tǒng)其實(shí)實(shí)由一個(gè)發(fā)射器不斷發(fā)射出粒子對(duì)象實(shí)現(xiàn)的。如果是一個(gè)單個(gè)的粒子，可以將粒子發(fā)射器想象成一把槍，子彈就是該發(fā)射器發(fā)射出的粒子。不同之處在于，粒子發(fā)射器發(fā)射出粒子之后可以控制粒子的軌跡、顏色等屬性。
先來(lái)看一個(gè)最簡(jiǎn)單的生成粒子系統(tǒng)的代碼例子：
var item = viewer.scene.primitives.add(new Cesium.ParticleSystem({
image : getImage(),//粒子圖像
startColor : color,//開(kāi)始顏色
endColor : color.withAlpha(0.5),//結(jié)束時(shí)的顏色
particleLife : 100,//每個(gè)粒子的生存時(shí)間，即子彈被打出來(lái)后能飛多久
speed : 50,//粒子飛行速度
imageSize : imageSize,//粒子大小
emissionRate : 1.0,//每秒發(fā)射粒子的個(gè)數(shù)
emitter : new Cesium.CircleEmitter(1),//粒子發(fā)射器的形式，確定了在什么樣的區(qū)間里隨機(jī)產(chǎn)生粒子，該行表示粒子將在一個(gè)半徑為1米的圓形區(qū)域不斷產(chǎn)生
lifetime : 100,//粒子發(fā)射器的生命周期，即發(fā)射粒子的時(shí)間，該值可理解為一把槍的彈夾可以用多長(zhǎng)時(shí)間，loop默認(rèn)屬性為true理解為到時(shí)間后換上另一個(gè)彈夾繼續(xù)發(fā)射。
updateCallback : force,//粒子位置更新回調(diào)函數(shù)
modelMatrix : particlesModelMatrix,//決定粒子在空間坐標(biāo)系的位置矩陣，可以理解為用槍的人的空間位置
emitterModelMatrix : emitterModelMatrix//決定粒子相對(duì)于模型位置的位置矩陣，可以理解為人把發(fā)射槍拿在哪里，用左手還是右手還是用腳，即發(fā)射器相對(duì)本體的位置矩陣。
}));
上述代碼構(gòu)成了一個(gè)粒子系統(tǒng)，該系統(tǒng)中只有一個(gè)發(fā)射器。
image : getImage(),//粒子圖像是每個(gè)粒子的樣式，我們可以理解成從槍里發(fā)射出來(lái)子彈的類型，子彈的樣子可以是圖片，也可以用canves函數(shù)來(lái)繪制，如果使用圖片的話，可以直接寫作image : '../../SampleData/fire.png',
在火箭發(fā)射粒子效果里，給出了一個(gè)簡(jiǎn)單的圓形圖像的繪制函數(shù)：
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;
}
上述函數(shù)屬于html中canves內(nèi)容，這里不在贅述。
imageSize : imageSize,//粒子大小是一個(gè)由二維向量定義的尺寸函數(shù),可以由代碼new Cesium.Cartesian2(1, 1)進(jìn)行設(shè)置。
應(yīng)該重點(diǎn)介紹的是`updateCallback : force,//粒子位置更新回調(diào)函數(shù)屬性。該屬性是一個(gè)函數(shù)形式，在函數(shù)文檔里給出的代碼例子如下：
function force(particle, dt) {//particle是當(dāng)前粒子對(duì)象，可以由很多屬性，dt是時(shí)間步長(zhǎng)。之前有一個(gè)屬性是particleLife表示每個(gè)粒子被發(fā)射出來(lái)后的生存時(shí)間。dt就是將這段時(shí)間均分的步長(zhǎng)。下面我們對(duì)粒子的位置進(jìn)行改變。
var position = particle.position;
var positionA = Cesium.Cartesian3.normalize(position, new Cesium.Cartesian3());//將粒子的位置向量正則化為單位值。
Cesium.Cartesian3.multiplyByScalar(positionA , 5, positionA );//將單位向量按比例進(jìn)行縮放
particle.position= Cesium.Cartesian3.add(particle.position, positionA , particle.position);//在粒子發(fā)射方向加上成比例縮放的向量，更新粒子位置
}
上述函數(shù)只是對(duì)粒子位置按粒子的生命周期進(jìn)行了修改，還可以對(duì)其速度、顏色等屬性按時(shí)間進(jìn)行修改。
下述就是用粒子系統(tǒng)做的信號(hào)動(dòng)態(tài)傳輸效果圖，黃色用了一個(gè)粒子發(fā)射器。紅色的圈圈用了一組發(fā)射器，沿著圓圈的方向不斷發(fā)射粒子。當(dāng)然該效果可以直接用entity來(lái)實(shí)現(xiàn)，但是粒子系統(tǒng)的自由度高，可以做出各種不同的波形效果。
回憶總像個(gè)漏風(fēng)的房子，風(fēng)來(lái)的時(shí)候，都是不請(qǐng)自來(lái)的
