VUE3-Cesium（粒子发射-ParticleSystem）

目录

1.实现原理

2.烟雾粒子效果

3.雨滴粒子粒子

1.实现原理

使用ParticleSystem实现粒子发射，该方式负责粒子系统管理粒子集合的更新和显示。

通过new Cesium.ParticleSystem ( options )创建，options选项如下：

NameTypeDescriptionoptionsObjectoptionalObject with the following properties: NameTypeDefaultDescriptionshowBooleantrue 可选是否显示粒子系统。updateCallbackParticleSystem.updateCallback可选每帧都要调用一次回调函数以更新粒子。emitterParticleEmitternew CircleEmitter(0.5) 可选该系统的粒子发射器。modelMatrixMatrix4Matrix4.IDENTITY 可选将粒子系统从模型转换为世界坐标的4x4转换矩阵。emitterModelMatrixMatrix4Matrix4.IDENTITY 可选在粒子系统局部坐标系内转换粒子系统发射器的4x4转换矩阵。emissionRateNumber5 可选每秒要发射的粒子数。burstsArray.可选ParticleBurst 的数组，在周期性的时间发射粒子爆发。loopBooleantrue 可选粒子系统完成后是否应该循环爆发。scaleNumber1.0 可选设置缩放比例，以在粒子的生命周期内应用于粒子的图像。startScaleNumber可选在粒子寿命开始时应用于粒子图像的初始比例。endScaleNumber可选在粒子寿命结束时应用于粒子图像的最终比例。colorColorColor.WHITE 可选设置粒子在其粒子寿命期间的颜色。startColorColor可选粒子在其生命初期的颜色。endColorColor可选粒子寿命结束时的颜色。imageObject可选用于广告牌的URI，HTMLImageElement或HTMLCanvasElement。imageSizeCartesian2new Cartesian2(1.0, 1.0) 可选如果设置，则将覆盖用来缩放粒子图像尺寸（以像素为单位）的minimumImageSize和maximumImageSize输入。minimumImageSizeCartesian2可选设置宽度的最小范围，以高度为单位，在该范围之上可以随机缩放粒子图像的尺寸（以像素为单位）。maximumImageSizeCartesian2可选设置最大宽度宽度（以高度为单位），在该范围内可以随机缩放粒子图像的尺寸（以像素为单位）。sizeInMetersBoolean可选设置粒子的大小是米还是像素。 true 以米为单位调整粒子大小；否则，大小以像素为单位。speedNumber1.0 可选如果设置，则用该值覆盖minimumSpeed和maximumSpeed输入。minimumSpeedNumber可选设置以米/秒为单位的最小界限，高于该界限时，将随机选择粒子的实际速度。maximumSpeedNumber可选设置以米/秒为单位的最大范围，在该范围内将随机选择粒子的实际速度。lifetimeNumberNumber.MAX_VALUE 可选粒子系统发射粒子的时间（以秒为单位）。particleLifeNumber5.0 可选如果设置，则使用此值覆盖minimumParticleLife和maximumParticleLife输入。minimumParticleLifeNumber可选设置以秒为单位的粒子生命的可能持续时间的最小范围，在该时间范围内可以随机选择粒子的实际生命。maximumParticleLifeNumber可选设置粒子寿命的可能持续时间的最大限制（以秒为单位），在该范围内将随机选择粒子的实际寿命。massNumber1.0 可选设置最小和最大颗粒质量（以千克为单位）。minimumMassNumber可选设置粒子质量的最小范围（以千克为单位）。粒子的实际质量将被选择为高于该值的随机量。maximumMassNumber可选设置最大粒子质量（以千克为单位）。粒子的实际质量将选择为低于此值的随机量。

ParticlesSytem中提供以下成员：

2.烟雾粒子效果

var particlesSystem = viewer.scene.primitives.add(
    new Cesium.ParticleSystem({
      image: "./texture/smoke.png",
      // 设置初始颜色
      startColor: Cesium.Color.YELLOW,
      // 设置结束的颜色
      endColor: Cesium.Color.WHITE.withAlpha(0.1),
      // 设置粒子的最大数量
      imageSize: new Cesium.Cartesian2(100, 100),
      // 设置发射器
      // 圆形发射器
      // emitter: new Cesium.CircleEmitter(200),
      // 矩形发射器
      // emitter: new Cesium.BoxEmitter(new Cesium.Cartesian3(100, 100, 1000)),
      // 锥型设置
      // emitter: new Cesium.ConeEmitter(Math.PI / 4),
      // 球体发射器
      emitter: new Cesium.SphereEmitter(500),
      startScale: 1.0,
      endScale: 4.0,
      particleLife: 5.0,
      speed: 1.0,

      emissionRate: 6,

      lifetime: 15.0,
      modelMatrix: box.computeModelMatrix(
        viewer.clock.startTime,
        new Cesium.Matrix4()
      ),
    })
  );

实现效果：

3.雨滴粒子粒子

实现代码：

  var gravityVector = new Cesium.Cartesian3();
  var graviry = -6;
  var particlesSystem = viewer.scene.primitives.add(
    new Cesium.ParticleSystem({
      image: "./Assets/particles/raindrops.png",
      // 设置初始颜色
      startColor: Cesium.Color.WHITE,
      // 设置结束的颜色
      endColor: Cesium.Color.WHITE.withAlpha(0.1),
      // 设置粒子的最大数量
      // imageSize: new Cesium.Cartesian2(40, 40),
      // 设置发射器
      // 圆形发射器
      // emitter: new Cesium.CircleEmitter(200),
      // 矩形发射器
      emitter: new Cesium.BoxEmitter(new Cesium.Cartesian3(1000, 1000, 1000)),
      // 锥型设置
      // emitter: new Cesium.ConeEmitter(Math.PI / 4),
      // 球体发射器
      // emitter: new Cesium.SphereEmitter(500),
      startScale: 1.0,
      endScale: 4.0,
      particleLife: 5.0,
      // speed: 1.0,
      // 设置随机的速度
      minimumSpeed: 1.0,
      maximumSpeed: 5.0,
      // 每秒钟设置粒子发射的数量
      emissionRate: 1000,
      // 控制发射在不同阶段的数量
      bursts: [
        new Cesium.ParticleBurst({
          time: 0.0,
          minimum: 2,
          maximum: 5,
        }),
        new Cesium.ParticleBurst({
          time: 10.0,
          minimum: 100,
          maximum: 150,
        }),
        new Cesium.ParticleBurst({
          time: 15.0,
          minimum: 5,
          maximum: 10,
        }),
      ],
      lifetime: 15.0,

      // 设置粒子随机的大小
      minimumImageSize: new Cesium.Cartesian2(10, 10),
      maximumImageSize: new Cesium.Cartesian2(40, 40),
      modelMatrix: box.computeModelMatrix(
        viewer.clock.startTime,
        new Cesium.Matrix4()
      ),
      updateCallback: (p, dt) => {
        var position = p.position;
        Cesium.Cartesian3.normalize(position, gravityVector);
        Cesium.Cartesian3.multiplyByScalar(
          gravityVector,
          graviry,
          gravityVector
        );

        p.velocity = Cesium.Cartesian3.add(
          p.velocity,
          gravityVector,
          p.velocity
        );
      },
    })
  );

实现效果：