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

发布于：2025-08-30 ⋅ 阅读:(17) ⋅ 点赞:(0)

文章目录


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 入门教程 -系列文章列表

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布