cesium 粒子特效

1. 什么是粒子系统

cesium的官网有篇文章详细介绍了粒子系统 cesium.com/learn/cesiu...

官方文章写的很清楚，看完后就知道怎么使用了

2. ParticleSystem参数简介

cesium的官方文档有详细说明 cesium.com/learn/cesiu...

js 复制代码

const particleSystem = viewer.scene.primitives.add(
  new Cesium.ParticleSystem({
    show: true, // boolean类型；  默认值true；  是否显示粒子系统
    image: "null", // 多种类型；  默认值无，所以必传，不然看不到粒子；  粒子显示的图片，可以是 URI、HTMLImageElement 或 HTMLCanvasElement
    imageSize: new Cesium.Cartesian2(1.0, 1.0), // Cartesian2类型；  默认值new Cesium.Cartesian2(1.0, 1.0)；  设置图像大小，设置后 minimumImageSize，maximumImageSize将失效
    minimumImageSize: 'null', // Cartesian2类型；  默认值无；  设置最小边界（宽度乘以高度），超过该边界可随机缩放粒子图像的尺寸（以像素为单位）
    maximumImageSize: 'null', // Cartesian2类型；  默认值无；  设置最大边界（宽度乘以高度），低于该边界可随机缩放粒子图像的尺寸（以像素为单位）
    sizeInMeters: false, // boolean类型；  默认值false；  设置粒子的大小是以米为单位还是以像素为单位，true以米为单位调整颗粒大小，缩放后大小会改变，false以像素为单位调整大小，缩放后大小不变
    color: Cesium.Color.WHITE, // Color类型；  默认值Cesium.Color.WHITE，即原始颜色；  设置在粒子的 particleLife 持续时间内，应用于粒子图像的颜色，设置后startColor，endColor将失效
    startColor: '', // Color类型；  默认值无；  设置在粒子的 particleLife 持续时间内，应用于生命开始时图像的颜色
    endColor: '', // Color类型；  默认值无；  设置在粒子的 particleLife 持续时间内，应用于生命结束时图像的颜色
    scale: 1.0, // number类型；  默认值1.0；  设置在粒子的 particleLife 持续时间内，应用于粒子图像的比例，设置后startScale，endScale将失效
    startScale: 'null', // number类型；  默认值无；  设置在粒子的 particleLife 持续时间内，应用于生命开始时图像的初始比例
    endScale: 'null', // number类型；  默认值无；  设置在粒子的 particleLife 持续时间内，应用于生命结束时图像的最终比例
    speed: 1.0, // number类型；  默认值1.0；  设置类中的移动速度，设置后minimumSpeed，maximumSpeed将失效
    minimumSpeed: 'null', // number类型；  默认值无；  设置最小界限（以米/秒为单位），超过该界限将随机选择粒子的实际速度
    maximumSpeed: 'null', // number类型；  默认值无；  设置最大界限（以米/秒为单位），低于该界限将随机选择粒子的实际速度
    particleLife: 5.0, // number类型；  默认值5.0；  设置粒子的寿命时间（以秒为单位），设置后minimumParticleLife，maximumParticleLife将失效
    minimumParticleLife: 'null', // number类型；  默认值无；  设置粒子可能寿命的最小界限（以秒为单位），超过该界限将随机选择粒子的实际寿命
    maximumParticleLife: 'null', // number类型；  默认值无；  设置粒子可能寿命的最大界限（以秒为单位），低于该界限将随机选择粒子的实际寿命
    lifetime:  Number.MAX_VALUE, // number类型；  默认值Number.MAX_VALUE；  设置粒子系统发射粒子的时间，以秒为单位
    emitter: new CircleEmitter(0.5), // ParticleEmitter类型；  默认值new CircleEmitter(0.5)；  该粒子系统的粒子发射器，发射器提供四种BoxEmitter,CircleEmitter,ConeEmitter,SphereEmitter发射器
    emissionRate: 5。0, // number类型；  默认值5.0；  每秒发射的粒子数
    modelMatrix: Matrix4.IDENTITY, // Matrix4类型；  默认值Matrix4.IDENTITY；  粒子系统的位置坐标，比如要将粒子放在某个经度，纬度，高度的位置上，需要将其转换成 4x4 变换矩阵，例如 const modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(120.00425066, 30.00217308, 50))
    emitterModelMatrix: Matrix4.IDENTITY, // Matrix4类型；  默认值Matrix4.IDENTITY；  在粒子系统局部坐标系内变换粒子系统发射器的 4x4 变换矩阵
    updateCallback: 'null', // function函数类型；  默认值无；  每帧调用用来更新粒子的位置运动的回调函数，重点，很多运动效果在回调函数里处理
    loop: true, // boolean类型；默认值true；是否循环
    // ------------------不常用---------------
    bursts: 'null', // Array.<ParticleBurst>类型；  默认值无；  周期性地发射粒子爆发，是一个ParticleBurst数组
    mass: 1.0, // number类型；  默认值1.0；  设置粒子的最小和最大质量（以千克为单位），设置后minimumMass，maximumMass将失效
    minimumMass: 'null', // number类型；  默认值无；  设置粒子质量的最小质量（以千克为单位）。粒子的实际质量将被选为高于此值的随机量
    maximumMass: 'null', // number类型；  默认值无；  设置粒子质量的最大质量（以千克为单位）。粒子的实际质量将被选为低于此值的随机量。
  })
);

3. 效果展示

ts 复制代码

  add1() {
    // 位置
    const modelMatrix = Transforms.eastNorthUpToFixedFrame(Cartesian3.fromDegrees(120.00425066, 30.00217308, 50));

    // 运动回调
    let gravityScratch = new Cartesian3();
    const update = function (particle: any, dt: any) {
      Cartesian3.normalize(particle.position, gravityScratch);
      Cartesian3.multiplyByScalar(gravityScratch, CesiumMath.randomBetween(0.1, 0.5) * dt, gravityScratch);
      particle.velocity = Cartesian3.add(particle.velocity, gravityScratch, particle.velocity);
    };

    // 粒子系统
    const snow = new ParticleSystem({
      image: './point.png',
      imageSize: new Cartesian2(180.0, 180.0),
      color: Color.YELLOW,
      minimumSpeed: 2,
      maximumSpeed: 4,
      lifetime: 18.0,
      particleLife: 18.0,
      emitter: new CircleEmitter(200.0),
      emissionRate: 2.0,
      modelMatrix: modelMatrix,
      updateCallback: update
    });

    this.app.viewerCesium.scene.primitives.add(snow);
  }

  add2() {
    const modelMatrix = Transforms.eastNorthUpToFixedFrame(Cartesian3.fromDegrees(120.00425066, 30.00217308, 50));

    const size = 20.0;
    const minimumSnowImageSize = new Cartesian2(size, size);
    const maximumSnowImageSize = new Cartesian2(size * 2.0, size * 2.0);

    let gravityScratch = new Cartesian3();
    const update = function (particle: any, dt: any) {
      Cartesian3.normalize(particle.position, gravityScratch);
      Cartesian3.multiplyByScalar(gravityScratch, CesiumMath.randomBetween(0.1, 0.5) * dt, gravityScratch);
      particle.velocity = Cartesian3.add(particle.velocity, gravityScratch, particle.velocity);
    };

    const snow = new ParticleSystem({
      image: './rectangle.png',
      minimumImageSize: minimumSnowImageSize,
      maximumImageSize: maximumSnowImageSize,
      minimumSpeed: 1,
      maximumSpeed: 3,
      lifetime: 15.0,
      particleLife: 8.0,
      emitter: new CircleEmitter(200.0),
      emissionRate: 2.0,
      modelMatrix: modelMatrix,
      updateCallback: update
    });

    this.app.viewerCesium.scene.primitives.add(snow);
  }