Cesium中的粒子系统是一种强大的图形技术，用于模拟复杂的物理效果，如火、烟、云、烟花等。粒子系统通过控制大量微小图像（粒子）的初始位置、速度、生命周期等属性来生成这些复杂效果。以下是对Cesium中粒子系统的详细解析：

一、粒子系统基本概念

粒子系统由多个粒子组成，每个粒子都是一个小的图像或纹理。当这些粒子以一定的速度和轨迹运动时，它们可以组合成各种复杂的视觉效果。粒子系统通过控制每个粒子的属性（如位置、速度、大小、颜色等）来实现这些效果。

二、粒子系统的主要组件

  1. 粒子（Particle）：
  • 是粒子系统的基本单元，每个粒子都具有自己的属性，如位置、速度、大小、颜色等。
  • 粒子的属性可以是静态的，也可以是动态的，可以在粒子的生命周期内发生变化。
  1. 发射器（Emitter）：
  • 负责生成粒子，并控制粒子的初始位置和速度方向。
  • Cesium提供了多种发射器类型，如圆形发射器（CircleEmitter）、盒子发射器（BoxEmitter）、锥形发射器（ConeEmitter）和球形发射器（SphereEmitter）等。
  1. 粒子系统（ParticleSystem）：
  • 是管理粒子和发射器的容器，负责创建、更新和销毁粒子。
  • 粒子系统具有多种参数，如发射率（emissionRate）、生命周期（lifetime）、粒子生命（particleLife）等，用于控制粒子的生成和表现。

三、粒子系统的关键属性

  1. 发射率（emissionRate）：
  • 控制每秒发射的粒子数量，用于调整粒子的密度。
  1. 粒子生命（particleLife）：
  • 设置每个粒子的生命周期，即粒子从生成到消亡的时间。
  • 可以使用minimumParticleLife和maximumParticleLife来设置粒子生命周期的最小值和最大值，以实现随机生命周期的效果。
  1. 发射器模型矩阵（emitterModelMatrix）：
  • 用于将发射器从局部坐标系转换到粒子系统的坐标系中。
  1. 模型矩阵（modelMatrix）：
  • 用于将粒子系统从模型坐标系转换到世界坐标系中。
  1. 粒子大小和颜色：
  • 可以通过startScale和endScale设置粒子在生命周期内的大小变化。
  • 使用startColor和endColor可以在粒子的生命周期内对颜色进行插值处理。
  1. 粒子速度和加速度：
  • 可以通过speed、minimumSpeed和maximumSpeed设置粒子的速度。
  • 可以使用更新回调（updateCallback）函数来修改粒子的速度和加速度，以实现更复杂的运动效果。

四、粒子系统的应用

粒子系统在Cesium中广泛应用于模拟自然现象（如烟雾、火焰）、视觉效果（如爆炸、烟花）以及增强现实（AR）和虚拟现实（VR）等领域。通过调整粒子系统的各种参数和属性，可以创造出丰富多彩的视觉效果。

在 CesiumJS 中，Cesium.ParticleSystem 是一个用于在三维场景中创建粒子系统的类。粒子系统常用于模拟如烟雾、火焰、爆炸等效果。下面是如何在 Cesium 中使用 Cesium.ParticleSystem 的基本步骤：

// 创建一个粒子系统  
var particleSystem = viewer.scene.primitives.add(new Cesium.ParticleSystem({  
    image: 'path/to/particle.png', // 粒子图片  
    imageSize: new Cesium.Cartesian2(25, 25), // 粒子大小  
    startColor: Cesium.Color.WHITE.withAlpha(0.5), // 初始颜色  
    endColor: Cesium.Color.TRANSPARENT, // 结束颜色  
    particleLife: 5000, // 粒子生命周期（毫秒）  
    speed: 50.0, // 粒子速度  
    emissionRate: 100, // 每秒发射的粒子数  
    emitter: new Cesium.SphereEmitter(1.5), // 发射器形状和大小  
    burst: new Cesium.ParticleBurst({  
        time: 0.0,  
        minimum: 1000,  
        maximum: 2000  
    }),  
    lifetime: 10000, // 粒子系统生命周期（毫秒）  
    updateCallback: function(particle) {  
        // 自定义粒子属性更新函数  
        // 例如：根据时间改变粒子颜色  
        var t = (particle.age / particle.lifetime) * 4.0 * Math.PI;  
        particle.color = Cesium.Color.fromHsl(0.5, 1.0, 0.5 + Math.cos(t) * 0.5);  
    },  
    modelMatrix: Cesium.Transforms.eastNorthUpToFixedFrame(  
        Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 300000.0)  
    ) // 粒子系统位置  
}));
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.

4. 自定义和调整

你可以通过调整 ParticleSystem 的属性来自定义粒子的外观和行为。上述代码示例中，我们设置了粒子的图片、大小、颜色、生命周期、速度、发射率等。

5. 清理

如果你需要移除粒子系统，可以使用 viewer.scene.primitives.remove(particleSystem);。

注意事项

  • 确保你的粒子图片路径是正确的。

若用Vue框架，建议用import语句引入图片，否则可能找不到路径

import fireImg from "@/assets/image/scene3/fire3.png"
  • 1.

  • 根据你的需求调整粒子的各种属性。

位置设置，矩阵modelMatrix:

modelMatrix: Cesium.Transforms.eastNorthUpToFixedFrame(  
        Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 300000.0)  
    ) // 粒子系统位置
  • 1.
  • 2.
  • 3.

 Cesium中创建局部坐标系-CSDN博客

  • Cesium Ion 访问令牌是可选的，但如果你使用 Cesium Ion 提供的服务（如地形、影像等），则需要提供。

问题：粒子的纹理直接偏移地球？？？

作者先以为版本原因不支持，尝试了Cesium1.95旧版本也是支持的

后来仔细分析，是不是异步原因，模型还没加载完成，纹理图片就直接加载上了

果然就是这个问题！！！！异步！！！async、await

Cesium粒子系统及其纹理图片加载问题_粒子系统

编辑

Cesium粒子系统及其纹理图片加载问题_自定义_02

编辑