cesium粒子实现广州塔小蛮腰烟花特效

上一节我们学习了:cesium着色器编写区域光墙今天我们要学习的是cesium粒子实现广州塔小蛮腰烟花特效。

效果截图

动态效果

准备烟花图片

首先需要准备一张烟花图片，作为粒子纹理图

创建盒子

我们需要一个盒子来控制粒子烟花的释放范围

this.boxEntity = viewer.entities.add({
  name: "box",
  position: Cesium.Cartesian3.fromDegrees(113.3191, 23.109, 250),
  box: {
    dimensions: new Cesium.Cartesian3(100.0, 100.0, 500),
    material: Cesium.Color.RED.withAlpha(0),
  },
});

创建粒子实现烟花效果

这里我们使用 ParticleSystem 来实现烟花效果，Cesium 的 ParticleSystem 类用于在场景中创建和模拟粒子系统。这使得你可以创建如雨、雪、火、喷泉等效果。

var particleSystem = new Cesium.ParticleSystem({
  // 粒子纹理
  image: smoke,
  // 粒子图像大小
  //   imageSize: new Cesium.Cartesian2(20, 20),
  // 粒子图像大小随机
  minimumImageSize: new Cesium.Cartesian2(10, 10),
  maximumImageSize: new Cesium.Cartesian2(30, 30),
  //   设置开始的颜色
  startColor: color,
  //   设置结束的颜色
  endColor: Cesium.Color.WHITE.withAlpha(0),
  //   开始的时候粒子的大小
  startScale: 0.1,
  //   结束的时候粒子的大小
  endScale: 2.0,
  //   速度，米/秒
  //   speed: 5.0,
  // 随机的发射速度
  minimumSpeed: 1.0,
  maximumSpeed: 10.0,
  //   设置发射器
  //   emitter: new Cesium.CircleEmitter(1000),
  emitter: new Cesium.BoxEmitter(new Cesium.Cartesian3(250, 250, 800)),
  // 发射率，设置每秒产生粒子数量
  emissionRate: 3,
  //  粒子的生命周期，秒
  lifetime: 5.0,
  //   设置粒子发射的位置
  modelMatrix: this.boxEntity.computeModelMatrix(
    viewer.clock.currentTime,
    new Cesium.Matrix4()
  ),
})

实例演示地址

粒子实现广州塔小蛮腰烟花特效

当前内容为观看threejs视频 Three.js可视化企业实战WEBGL课课程-粒子实现广州塔小蛮腰烟花特效-实践的学习笔记

当前学习笔记实例代码下载

代码运行环境：vue3 + vite + js nodejs 14