Cesium中的粒子系统是一种强大的图形技术,用于模拟复杂的物理效果,如火、烟、云、烟花等。粒子系统通过控制大量微小图像(粒子)的初始位置、速度、生命周期等属性来生成这些复杂效果。以下是对Cesium中粒子系统的详细解析:
一、粒子系统基本概念
粒子系统由多个粒子组成,每个粒子都是一个小的图像或纹理。当这些粒子以一定的速度和轨迹运动时,它们可以组合成各种复杂的视觉效果。粒子系统通过控制每个粒子的属性(如位置、速度、大小、颜色等)来实现这些效果。
二、粒子系统的主要组件
- 粒子(Particle):
- 是粒子系统的基本单元,每个粒子都具有自己的属性,如位置、速度、大小、颜色等。
- 粒子的属性可以是静态的,也可以是动态的,可以在粒子的生命周期内发生变化。
- 发射器(Emitter):
- 负责生成粒子,并控制粒子的初始位置和速度方向。
- Cesium提供了多种发射器类型,如圆形发射器(
CircleEmitter
)、盒子发射器(BoxEmitter
)、锥形发射器(ConeEmitter
)和球形发射器(SphereEmitter
)等。
- 粒子系统(ParticleSystem):
- 是管理粒子和发射器的容器,负责创建、更新和销毁粒子。
- 粒子系统具有多种参数,如发射率(
emissionRate
)、生命周期(lifetime
)、粒子生命(particleLife
)等,用于控制粒子的生成和表现。
三、粒子系统的关键属性
- 发射率(emissionRate):
- 控制每秒发射的粒子数量,用于调整粒子的密度。
- 粒子生命(particleLife):
- 设置每个粒子的生命周期,即粒子从生成到消亡的时间。
- 可以使用
minimumParticleLife
和maximumParticleLife
来设置粒子生命周期的最小值和最大值,以实现随机生命周期的效果。
- 发射器模型矩阵(emitterModelMatrix):
- 用于将发射器从局部坐标系转换到粒子系统的坐标系中。
- 模型矩阵(modelMatrix):
- 用于将粒子系统从模型坐标系转换到世界坐标系中。
- 粒子大小和颜色:
- 可以通过
startScale
和endScale
设置粒子在生命周期内的大小变化。 - 使用
startColor
和endColor
可以在粒子的生命周期内对颜色进行插值处理。
- 粒子速度和加速度:
- 可以通过
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)
) // 粒子系统位置
}));
4. 自定义和调整
你可以通过调整 ParticleSystem
的属性来自定义粒子的外观和行为。上述代码示例中,我们设置了粒子的图片、大小、颜色、生命周期、速度、发射率等。
5. 清理
如果你需要移除粒子系统,可以使用 viewer.scene.primitives.remove(particleSystem);
。
注意事项
- 确保你的粒子图片路径是正确的。
若用Vue框架,建议用import语句引入图片,否则可能找不到路径
import fireImg from "@/assets/image/scene3/fire3.png"
- 根据你的需求调整粒子的各种属性。
位置设置,矩阵modelMatrix:
modelMatrix: Cesium.Transforms.eastNorthUpToFixedFrame(
Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 300000.0)
) // 粒子系统位置
- Cesium Ion 访问令牌是可选的,但如果你使用 Cesium Ion 提供的服务(如地形、影像等),则需要提供。
问题:粒子的纹理直接偏移地球???
作者先以为版本原因不支持,尝试了Cesium1.95旧版本也是支持的
后来仔细分析,是不是异步原因,模型还没加载完成,纹理图片就直接加载上了
果然就是这个问题!!!!异步!!!async、await
编辑
编辑