VUE3-Cesium（粒子发射-ParticleSystem）

目录

1.实现原理

2.烟雾粒子效果

3.雨滴粒子粒子

---

1.实现原理

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

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

Name	Type	Description
options	Object	optionalObject with the following properties: Name Type Default Description show Boolean true 可选是否显示粒子系统。 updateCallback ParticleSystem.updateCallback 可选每帧都要调用一次回调函数以更新粒子。 emitter ParticleEmitter new CircleEmitter(0.5) 可选该系统的粒子发射器。 modelMatrix Matrix4 Matrix4.IDENTITY 可选将粒子系统从模型转换为世界坐标的4x4转换矩阵。 emitterModelMatrix Matrix4 Matrix4.IDENTITY 可选在粒子系统局部坐标系内转换粒子系统发射器的4x4转换矩阵。 emissionRate Number 5 可选每秒要发射的粒子数。 bursts Array.< ParticleBurst > 可选ParticleBurst 的数组，在周期性的时间发射粒子爆发。 loop Boolean true 可选粒子系统完成后是否应该循环爆发。 scale Number 1.0 可选设置缩放比例，以在粒子的生命周期内应用于粒子的图像。 startScale Number 可选在粒子寿命开始时应用于粒子图像的初始比例。 endScale Number 可选在粒子寿命结束时应用于粒子图像的最终比例。 color Color Color.WHITE 可选设置粒子在其粒子寿命期间的颜色。 startColor Color 可选粒子在其生命初期的颜色。 endColor Color 可选粒子寿命结束时的颜色。 image Object 可选用于广告牌的URI，HTMLImageElement或HTMLCanvasElement。 imageSize Cartesian2 new Cartesian2(1.0, 1.0) 可选如果设置，则将覆盖用来缩放粒子图像尺寸（以像素为单位）的minimumImageSize和maximumImageSize输入。 minimumImageSize Cartesian2 可选设置宽度的最小范围，以高度为单位，在该范围之上可以随机缩放粒子图像的尺寸（以像素为单位）。 maximumImageSize Cartesian2 可选设置最大宽度宽度（以高度为单位），在该范围内可以随机缩放粒子图像的尺寸（以像素为单位）。 sizeInMeters Boolean 可选设置粒子的大小是米还是像素。 true 以米为单位调整粒子大小；否则，大小以像素为单位。 speed Number 1.0 可选如果设置，则用该值覆盖minimumSpeed和maximumSpeed输入。 minimumSpeed Number 可选设置以米/秒为单位的最小界限，高于该界限时，将随机选择粒子的实际速度。 maximumSpeed Number 可选设置以米/秒为单位的最大范围，在该范围内将随机选择粒子的实际速度。 lifetime Number Number.MAX_VALUE 可选粒子系统发射粒子的时间（以秒为单位）。 particleLife Number 5.0 可选如果设置，则使用此值覆盖minimumParticleLife和maximumParticleLife输入。 minimumParticleLife Number 可选设置以秒为单位的粒子生命的可能持续时间的最小范围，在该时间范围内可以随机选择粒子的实际生命。 maximumParticleLife Number 可选设置粒子寿命的可能持续时间的最大限制（以秒为单位），在该范围内将随机选择粒子的实际寿命。 mass Number 1.0 可选设置最小和最大颗粒质量（以千克为单位）。 minimumMass Number 可选设置粒子质量的最小范围（以千克为单位）。粒子的实际质量将被选择为高于该值的随机量。 maximumMass Number 可选设置最大粒子质量（以千克为单位）。粒子的实际质量将选择为低于此值的随机量。

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
        );
      },
    })
  );

实现效果：

全部源码：

<template>
  <div id="cesiumContainer" ref="cesiumContainer"></div>
</template>

<script setup>
import { onMounted } from "vue";
import * as Cesium from "cesium";
import "./Widgets/widgets.css";
import flightData from "@/assets/json/plane.json";
// console.log(flightData);

// 设置cesium的token
Cesium.Ion.defaultAccessToken =" ";
// cesium默认资源路径
window.CESIUM_BASE_URL = "/";
// 设置默认的视角为中国
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
  // 西边经度
  89.5,
  // 南边维度
  20.4,
  // 东边经度
  110.4,
  // 北边维度
  61.2
);

onMounted(() => {
  var viewer = new Cesium.Viewer("cesiumContainer", {
    infoBox: false,
    terrainProvider: new Cesium.createWorldTerrain({
      requestWaterMask: true,
      requestVertexNormals: true,
    }),
  });

  // 设置沙箱允许使用JS
  // var iframe = document.getElementsByClassName("cesium-infoBox-iframe")[0];
  // iframe.setAttribute(
  //   "sandbox",
  //   "allow-same-origin allow-scripts allow-popups allow-forms"
  // );
  // iframe.setAttribute("src", "");

  // // 隐藏cesiumLogo
  viewer.cesiumWidget.creditContainer.style.display = "none";

  // Cesium全球3.5亿做建筑物，数据来源openStreetMap地图
  var buildings = viewer.scene.primitives.add(new Cesium.createOsmBuildings());

  // 创建一个盒子放置在广州塔
  var box = viewer.entities.add({
    name: "广州塔",
    position: Cesium.Cartesian3.fromDegrees(113.3191, 23.109, 0),
    box: {
      dimensions: new Cesium.Cartesian3(100.0, 100.0, 1000),
      material: Cesium.Color.RED.withAlpha(0),
    },
  });

  var gravityVector = new Cesium.Cartesian3();
  var graviry = -6;
  var particlesSystem = viewer.scene.primitives.add(
    new Cesium.ParticleSystem({
      image: "./Assets/particles/12.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
        );
      },
    })
  );

  var particlesSystem2 = 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(40, 40),
      // 设置发射器
      // 圆形发射器
      // 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()
      ),
    })
  );

  viewer.zoomTo(viewer.entities);
});
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
#cesiumContainer {
  width: 100vw;
  height: 100vh;
}
</style>