Advanced Tutorial

Introduction to particle systems

进阶高级30-45 分钟

粒子系统适合做火焰、烟雾、天气、烟花等效果。它是 CesiumJS 从地理可视化迈向动态氛围表达的重要补充。

Overview

使用粒子系统的正确预期

它不是为了“加点炫酷效果”,而是为了表达事件、状态和氛围。用得好,它能增强现场感;用不好,只会增加视觉噪音。

Use Cases

典型用途

  • 火焰、烟雾、喷射效果。
  • 天气模拟。
  • 事件告警和场景氛围表达。

Starter Code

粒子系统骨架

const particleSystem = new ParticleSystem({
  image: "./smoke.png",
  startScale: 1.0,
  endScale: 4.0,
  minimumParticleLife: 1.5,
  maximumParticleLife: 3.0,
  emissionRate: 12,
});

viewer.scene.primitives.add(particleSystem);

Project Advice

用在业务里要克制

先确认业务含义 粒子效果应表达事件、告警、状态,不该只是装饰。
先小规模验证性能 粒子数量和纹理分辨率都会快速拉高成本。
保持一个视觉焦点 同屏出现多组重粒子时,用户很难知道重点在哪里。

Practice Flow

建议学习方式

  1. 先做最小粒子系统。
  2. 调整颜色、纹理和发射器。
  3. 再把粒子绑定到一个具体位置或对象。
  4. 最后评估它是否真的增强了业务表达。

Good For

适合的场景

  • 事故告警。
  • 火焰和烟雾模拟。
  • 气象或环境效果。

Pitfalls

要克制地使用

  • 粒子数一多,性能会明显下降。
  • 效果越复杂,越要先验证业务价值。
  • 不要让粒子成为用户唯一注意到的内容。