Cesium 入门教程（十三）：粒子系统实例

Cesium 粒子系统（Particle System）是用于创建动态视觉效果的强大工具，可模拟烟雾、火焰、雨滴、爆炸效果等自然现象或特殊视觉元素。

一，Cesium 实际示例（含源代码）

1. vue+cesium：粒子系统喷泉效果

查看源代码：https://dajianshi.blog.csdn.net/article/details/145706886

2. vue+cesium：粒子系统定点喷射红色烟雾效果

查看源代码：https://dajianshi.blog.csdn.net/article/details/145686424

3. vue+cesium：粒子系统实现局部下雪场景

查看源代码：https://dajianshi.blog.csdn.net/article/details/146007258

4. vue+cesium：粒子系统实现局部下雨场景

查看源代码：https://dajianshi.blog.csdn.net/article/details/146008424

二，粒子系统基础知识

1. 粒子系统基本概念

• 粒子（Particle）：系统中的最小单元，具有位置、速度、大小、颜色等属性。
• 粒子发射器（Emitter）：定义粒子的初始生成位置和方向（如点发射器、盒子发射器）。
• 粒子更新器（Updater）：控制粒子生命周期内的行为（如速度变化、颜色渐变、大小改变）。
• 生命周期（Lifetime）：粒子从创建到消失的时间。

2. 核心组成与配置

一个完整的粒子系统通过 ParticleSystem 类创建，主要配置参数包括：

// 创建粒子系统
const particleSystem = new Cesium.ParticleSystem({// 粒子外观（纹理）image: "path/to/particle.png",imageSize: new Cesium.Cartesian2(10, 10), // 粒子大小（宽×高）// 发射器配置（点发射器：从某点向四周发射）emitter: new Cesium.PointEmitter(),emissionRate: 50, // 每秒发射粒子数量// 粒子生命周期lifetime: 5.0, // 粒子存活时间（秒）loop: true, // 是否循环发射// 速度与方向speed: 10.0, // 初始速度velocityRandomness: 0.5, // 速度随机性（0-1）// 大小与变化startSize: 5.0,endSize: 20.0, // 生命周期结束时的大小// 颜色与透明度startColor: Cesium.Color.RED.withAlpha(0.8),endColor: Cesium.Color.YELLOW.withAlpha(0.0), // 逐渐消失// 系统位置modelMatrix: Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(116, 40, 1000) // 北京上空1000米),// 最大粒子数量（性能控制）maximumParticles: 1000
});// 添加到场景
viewer.scene.primitives.add(particleSystem);

3. 常用发射器类型

发射器决定粒子的初始生成位置和方向：

• PointEmitter：从点发射（默认）。
• BoxEmitter：从立方体区域发射：

  new Cesium.BoxEmitter(new Cesium.Cartesian3(10, 10, 10)) // 10×10×10米的立方体
  

• SphereEmitter：从球体区域发射：

  new Cesium.SphereEmitter(5.0) // 半径5米的球体
  

• ConeEmitter：从圆锥体区域发射（有方向倾向）：

  new Cesium.ConeEmitter(Cesium.Math.toRadians(30)) // 30°锥角
  

4. 粒子行为控制（更新器）

通过配置更新器可实现复杂的粒子运动效果：

• 速度衰减：

  new Cesium.VelocityOrientationProperty() // 粒子朝向运动方向
  

• 重力影响：

  new Cesium.GravityParticleUpdater({gravity: new Cesium.Cartesian3(0, 0, -9.8) // 模拟重力（向下）
  })
  

• 风力影响：

  new Cesium.WindParticleUpdater({wind: new Cesium.Cartesian3(5, 0, 0) // 沿X轴方向的风
  })
  

5. 性能优化

• 限制最大粒子数：通过 maximumParticles 控制，避免过多粒子导致卡顿。
• 简化纹理：使用小尺寸、低复杂度的粒子纹理（如256×256以下）。
• 合理设置生命周期：避免过长的 lifetime 导致粒子堆积。
• 视距剔除：当粒子系统远离相机时自动隐藏：

  particleSystem.distanceDisplayCondition = new Cesium.DistanceDisplayCondition(0, 5000);
  

6. 高级应用

• 动态参数调整：在运行时修改粒子属性实现交互效果：

  // 点击时增加发射速率
  viewer.screenSpaceEventHandler.setInputAction(() => {particleSystem.emissionRate = 200;// 3秒后恢复setTimeout(() => particleSystem.emissionRate = 50, 3000);
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
  

• 粒子系统跟随实体：将粒子绑定到移动的实体（如飞机尾迹）：

  particleSystem.modelMatrix = entity.computeModelMatrix(viewer.clock.currentTime);
  

7. 常见应用场景

• 自然现象：雨滴、雪花、烟雾、火焰、喷泉。
• 特殊效果：爆炸、尾气、光晕、魔法效果。
• 交互反馈：点击位置的粒子效果、路径轨迹标记。

通过灵活配置粒子系统的参数，可在 Cesium 场景中创建丰富的动态视觉效果，增强场景的沉浸感和表现力。

三、Cesium 入门教程 -系列文章列表

• Cesium 入门教程（一）：应该如何学习Cesium
• Cesium 入门教程（二）：界面的基础配置
• Cesium 入门教程（三）：加载不同的地图底图
• Cesium 入门教程（四）：利用entity显示图形
• Cesium 入门教程（五）：利用Primitive生成图形
• Cesium 入门教程（六）：不同的材质设置
• Cesium 入门教程（七）：加载、导出2D文件数据
• Cesium 入门教程（八）：加载3D瓦片及模型
• Cesium 入门教程（九）：通过鼠标绘制图形
• Cesium 入门教程（十）：利用shader、后处理重构图形
• Cesium 入门教程（十一）：camera相机功能展示
• Cesium 入门教程（十二）：时间动画实例
• Cesium 入门教程（十三）：粒子系统实例
• Cesium 入门教程（十四）：鼠标键盘交互