Particle System Tails【译】

原文链接及内容

原文链接：https://sandcastle.cesium.com/?src=Particle%20System%20Tails.html&label=All

效果如下视频所示：

示例代码如下：

/**
 * 1. 初始化Viewer对象
 */
const viewer = new Cesium.Viewer("cesiumContainer", {
  geocoder: false,
  homeButton: false,
  sceneModePicker: false,
  navigationHelpButton: false,
  navigationInstructionsInitiallyVisible: false,
  animation: false,
  timeline: false,
  fullscreenButton: false,
  skyBox: false,
  shouldAnimate: true,
  baseLayerPicker: false,
  shadows: true,
});
viewer.cesiumWidget.creditContainer.style.display = "none";

/**
 * 2. 定义飞机和相机目标位置
 */
//定义飞机位置
const planePosition = Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883, 800.0);

//定义粒子系统相对于飞机的偏移量，用于模拟尾部效果。
const particlesOffset = new Cesium.Cartesian3(
  -8.950115473940969,
  34.852766731753945,
  -30.235411095432937
);

//将飞机位置和粒子偏移量相加，得到相机目标位置，不是相机位置，是目标位置
const cameraLocation = Cesium.Cartesian3.add(
  planePosition,
  particlesOffset,
  new Cesium.Cartesian3()
);
const resetCamera = function () {
  viewer.camera.lookAt(cameraLocation, new Cesium.Cartesian3(-450, -300, 200));
};
resetCamera();

/**
 * 3. 创建粒子图像
 */
let particleCanvas;
function getImage() {
  if (!Cesium.defined(particleCanvas)) {
    particleCanvas = document.createElement("canvas");
    particleCanvas.width = 20;
    particleCanvas.height = 20;
    const 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;
}

/**
 * 4. 在场景中添加飞机模型
 *
 */
// 定义飞机的朝向（HeadingPitchRoll），俯仰角为 90 度（PI_OVER_TWO）
const hpr = new Cesium.HeadingPitchRoll(0.0, Cesium.Math.PI_OVER_TWO, 0.0);
// 使用 headingPitchRollQuaternion 将朝向转换为四元数，用于模型旋转。
const orientation = Cesium.Transforms.headingPitchRollQuaternion(
  planePosition,
  hpr
);
const entity = viewer.entities.add({
  model: {
    uri: "../SampleData/models/CesiumAir/Cesium_Air.glb",
    scale: 3.5,
  },
  position: planePosition,
  orientation,
});

/**
 * 5. 创建粒子模型矩阵
 */

// 创建粒子偏移的平移矩阵
const translationOffset = Cesium.Matrix4.fromTranslation(
  particlesOffset,
  new Cesium.Matrix4()
);
// 创建飞机位置的平移矩阵。
const translationOfPlane = Cesium.Matrix4.fromTranslation(
  planePosition,
  new Cesium.Matrix4()
);
// 将飞机位置和粒子偏移量结合，生成粒子系统的模型矩阵，用于定位粒子系统。
const particlesModelMatrix = Cesium.Matrix4.multiplyTransformation(
  translationOfPlane,
  translationOffset,
  new Cesium.Matrix4()
);

/**
 * 6. 配置粒子系统参数
 */
const 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,
    },
  ],
};

const 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,
    },
  ],
};

/**
 * 7. 定义粒子运动逻辑
 */
let scratchCartesian3 = new Cesium.Cartesian3();
let scratchCartographic = new Cesium.Cartographic();
const forceFunction = function (options, iteration) {
  return function (particle, dt) {
    dt = Cesium.Math.clamp(dt, 0.0, 0.05);

    scratchCartesian3 = Cesium.Cartesian3.normalize(
      particle.position,
      new Cesium.Cartesian3()
    );
    scratchCartesian3 = Cesium.Cartesian3.multiplyByScalar(
      scratchCartesian3,
      -40.0 * dt,
      scratchCartesian3
    );

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

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

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

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

/**
 * 8. 创建粒子系统
 */
const matrix4Scratch = new Cesium.Matrix4();
let scratchAngleForOffset = 0.0;
const scratchOffset = new Cesium.Cartesian3();
const imageSize = new Cesium.Cartesian2(15.0, 15.0);
function createParticleSystems(options, systemsArray) {
  const length = options.numberOfSystems;
  for (let 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);

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

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

const rocketSystems = [];
const cometSystems = [];
createParticleSystems(rocketOptions, rocketSystems);
createParticleSystems(cometOptions, cometSystems);

/**
 *
 * 9. 控制粒子系统的显示
 */
function showAll(systemsArray, show) {
  const length = systemsArray.length;
  for (let i = 0; i < length; ++i) {
    systemsArray[i].show = show;
  }
}

const options = [
  {
    text: "彗星尾巴(视觉效果)",
    onselect: function () {
      showAll(rocketSystems, false);
      showAll(cometSystems, true);
      resetCamera();
    },
  },
  {
    text: "火箭推进器(视觉效果)",
    onselect: function () {
      showAll(cometSystems, false);
      showAll(rocketSystems, true);
      resetCamera();
    },
  },
];
Sandcastle.addToolbarMenu(options);
showAll(cometSystems, true);