两个粒子系统

为了系统的不同设置，我们创建了了火箭示例和彗星示例的不同配置数组。

var rocketSystems = [];
var cometSystems = [];

此外，为了便与组织程序，同时创建了两个不同的配置对象。一个彗星版本，另一个是火箭版本。不同的初始化个数，不同的偏移位置等等配置参数导致了两个效果的巨大差异。

var cometOptions = {
    numberOfSystems : 100.0,
    iterationOffset : 0.003,
    cartographicStep : 0.0000001,
    baseRadius : 0.0005,

    colorOptions : [{
        red : 0.6,
        green : 0.6,
        blue : 0.6,
        alpha : 1.0
    }, {
        red : 0.6,
        green : 0.6,
        blue : 0.9,
        alpha : 0.9
    }, {
        red : 0.5,
        green : 0.5,
        blue : 0.7,
        alpha : 0.5
    }]
};

var rocketOptions = {
    numberOfSystems : 50.0,
    iterationOffset :  0.1,
    cartographicStep : 0.000001,
    baseRadius : 0.0005,

    colorOptions : [{
        minimumRed : 1.0,
        green : 0.5,
        minimumBlue : 0.05,
        alpha : 1.0
    }, {
        red : 0.9,
        minimumGreen : 0.6,
        minimumBlue : 0.01,
        alpha : 1.0
    }, {
        red : 0.8,
        green : 0.05,
        minimumBlue : 0.09,
        alpha : 1.0
    }, {
        minimumRed : 1,
        minimumGreen : 0.05,
        blue : 0.09,
        alpha : 1.0
    }]
};

此外，每个的colorOptions是一个数组，包含了随机颜色，那么效果更加随机化。这就是说不是采用一个固定的初始化颜色，而是依据当前正在创建的粒子系统的序号来决定用哪个颜色。下面代码里，i表示当前的遍历序号。

var color = Cesium.Color.fromRandom(options.colorOptions[i % options.colorOptions.length]);

开始

使用下面的代码初始化每个系统

function createParticleSystems(options, systemsArray) {
    var length = options.numberOfSystems;
    for (var i = 0; i < length; ++i) {
        scratchAngleForOffset = Math.PI * 2.0 * i / options.numberOfSystems;
        scratchOffset.x += options.baseRadius * Math.cos(scratchAngleForOffset);
        scratchOffset.y += options.baseRadius * Math.sin(scratchAngleForOffset);

        var emitterModelMatrix = Cesium.Matrix4.fromTranslation(scratchOffset, matrix4Scratch);
        var color = Cesium.Color.fromRandom(options.colorOptions[i % options.colorOptions.length]);
        var force = forceFunction(options, i);

        var item = viewer.scene.primitives.add(new Cesium.ParticleSystem({
            image : getImage(),
            startColor : color,
            endColor : color.withAlpha(0.0),
            particleLife : 3.5,
            speed : 0.00005,
            imageSize : new Cesium.Cartesian2(15.0, 15.0),
            emissionRate : 30.0,
            emitter : new Cesium.CircleEmitter(0.1),
            bursts : [ ],
            lifetime : 0.1,
            forces : force,
            modelMatrix : particlesModelMatrix,
            emitterModelMatrix : emitterModelMatrix
        }));
        systemsArray.push(item);
    }
}

下来过一遍这个粒子系统创建函数，options 表示我们要创建一个彗星尾焰或者火箭尾焰。就像前面提到得，systemsArray 保存了依据输入的options创建的所有粒子系统。

两个尾焰非常相似，除了color和force之外其他的配置都相同。另外，emitterModelMatrix 也是对每个粒子系统都完全不同，在我们创建的圆环上做一个旋转偏移，那么它产生的粒子和前一个粒子系统产生的粒子会有一点点偏移。
我们没有加载一个图片文件。而是使用 HTML canvas直接绘制了一张图片。 尽管这里我们只是绘制一个圆圈，但是这种方法非常有扩展性。比如，给 getImage增加一个当前遍历序号的参数，依据这个参数做一个小小的改变，那就会产生不同的可视化效果。

从零开始创建粒子图片

既然我们已经有了思路，那就实现这个过程。不像前面直接加载图片，我们用代码来创建图片，使用代码还能实现更多的方法。

var particleCanvas;
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;
}

把粒子添加到系统里

准备好，我们开始最关键的一步，让粒子动起来。下面的代码是我们要在updateCallback函数内实现的：

var func = function(particle) {
    scratchCartesian3 = Cesium.Cartesian3.normalize(particle.position, new Cesium.Cartesian3());
    scratchCartesian3 = Cesium.Cartesian3.multiplyByScalar(scratchCartesian3, -1.0, scratchCartesian3);

    particle.position = Cesium.Cartesian3.add(particle.position, scratchCartesian3, particle.position);

    scratchCartographic = Cesium.Cartographic.fromCartesian(particle.position,
                                                            Cesium.Ellipsoid.WGS84,
                                                            scratchCartographic);

    var angle = Cesium.Math.PI * 2.0 * iterationOffset / options.numberOfSystems;
    iterationOffset += options.iterationOffset;
    scratchCartographic.longitude += Math.cos(angle) * options.cartographicStep;
    scratchCartographic.latitude += Math.sin(angle) * options.cartographicStep;

    particle.position = Cesium.Cartographic.toCartesian(scratchCartographic);
};

但是，这是什么？这个函数和设置到粒子系统里的回调函数不同。在创建粒子系统部分，我们设置 force参数用了 var force = forceFunction(options, i);。这个其实调用了一个辅助函数，辅助函数内部返回了实际的更新函数。

var scratchCartesian3 = new Cesium.Cartesian3();
var scratchCartographic = new Cesium.Cartographic();
var forceFunction = function(options, iteration) {
    var iterationOffset = iteration;
    var func = function(particle) {
        scratchCartesian3 = Cesium.Cartesian3.normalize(particle.position, new Cesium.Cartesian3());
        scratchCartesian3 = Cesium.Cartesian3.multiplyByScalar(scratchCartesian3, -1.0, scratchCartesian3);

        particle.position = Cesium.Cartesian3.add(particle.position, scratchCartesian3, particle.position);

        scratchCartographic = Cesium.Cartographic.fromCartesian(particle.position,
                                                                Cesium.Ellipsoid.WGS84,
                                                                scratchCartographic);

        var angle = Cesium.Math.PI * 2.0 * iterationOffset / options.numberOfSystems;
        iterationOffset += options.iterationOffset;
        scratchCartographic.longitude += Math.cos(angle) * options.cartographicStep;
        scratchCartographic.latitude += Math.sin(angle) * options.cartographicStep;

        particle.position = Cesium.Cartographic.toCartesian(scratchCartographic);
    };
    return func;
};

我们这么做有两个原因。首先，在 JavaScript语言里，虽然可以在for循环里内创建函数，但是强烈不推荐 这么做。其次，我们粒子更新函数需要访问迭代器，通过它计算合适的旋转偏移（根据angle 和iterationOffset参数计算）（这里实际利用了js语言的闭包特性）。为了解决这些问题，我们创建一个辅助函数，在它内部返回了一个适合的更新函数。

解析这个 Force Function

updateCallback 函数和 forceFunction函数实际都干了什么？ createParticleSystems的时候，我们沿着圆形偏移创建了每个粒子系统，同时我们也希望，当粒子从他们的初始位置移动的时候，也是也是沿着圆形偏移的方向来再偏移。
这个粒子的迭代偏移不仅仅是创建了圆形旋转效果，而其是控制了这个圆形旋转效果的平滑度，就像彗星和火箭的可视化效果对比。不仅仅是依据当前角度的cosine和sin计算一个位置，我们实际上跌加了前一个位置。因此，太小的迭代迭代偏移也不足以调整这个角度，让半径稳定的变大才能保证系统的连续性。想法，更大的迭代偏移将会使角度更快的增加到原始位置。这么做才能做出来很密集形的圆柱状喷射效果。 (这块我读起来也很费解，我的理解大概是说，在火箭尾端构造了一圈粒子系统，但是这些粒子系统并不是向下喷射，而是说一边向下，一边旋转，所以不同粒子系统里的粒子实际在更新位置的时候也会考虑它在圆圈的位置，这种旋转下来的效果，让粒子看起来更密集，如果不这么做，那么这一圈无论增加多少粒子系统，总是会有一些缝隙，效果不好)

在这个教程里，我们大量使用了sine和cosine函数来生成圆圈效果。可是，用户也可以扩展一下，做成各种形状，比如 Lissajous curve, Gibbs phenomenon, 甚至 square wave 。另外，用户也可以不用三角函数，而是基于位置的噪音函数来控制粒子的位置，那样也许更有趣。这样将是非常有创意的。

相对定位

火箭尾焰和彗星尾

就像我们在上一篇粒子系统教程,现在我们已经做出来了效果，现在要把它合并到合适的位置，飞机的尾巴。因为我们的粒子系统是垂直的，为了得到相对于飞机的合适位置，我们需要使用 particleOffset属性做一个细微偏移。使用particlesModelMatrix 当作每个系统的全局位置矩阵。如同createParticleSystems 函数里，对于每一个我们创建的粒子系统，我们使用emitterModelMatrix 来体现它在发射圆圈上的相对偏移位置。

//  设置飞机的位置
var planePosition = Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883, 800.0);
var particlesOffset = new Cesium.Cartesian3(-8.950115473940969, 34.852766731753945, -30.235411095432937);

// 设置粒子系统的相对位置
var transl = Cesium.Matrix4.fromTranslation(particlesOffset, new Cesium.Matrix4());
var translPosition = Cesium.Matrix4.fromTranslation(planePosition, new Cesium.Matrix4());
var particlesModelMatrix = Cesium.Matrix4.multiplyTransformation(translPosition, transl, new Cesium.Matrix4());

更多可以参考Sandcastle 中关于尾焰的粒子.

更多示例代码：

• 粒子系统示例
• 烟花效果示例
• 天气效果示例
• 尾焰效果示例
  

  中国最专业的Cesium开发者社区

转载自：https://www.jianshu.com/p/339c3685ba00