// 爆炸
export function createBlast(viewer, obj, o) {
createParticle(viewer, obj, o, 101)
}
// 喷泉
export function createFountain(viewer, obj, o) {
createParticle(viewer, obj, o, 103)
}
// 烟花
export function createFireworks(viewer, obj, o) {
createParticle(viewer, obj, o, 104)
}
// 粒子的生成方法
export function createParticle(viewer, obj, o, type) {
viewer.clock.shouldAnimate = true
let entity = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(o.position[0], o.position[1], Number(o.position[2] + o.height)),
id: o.id
})
let emitter
if (o.typevalue == '圆形放射') {
if (type == 103) {
emitter = new Cesium.CircleEmitter(0.2)
} else if (type == 104) {
emitter = new Cesium.CircleEmitter(5.0)
} else if (type == 101) {
emitter = new Cesium.CircleEmitter(0.1)
}
} else if (o.typevalue == '球体放射') {
if (type == 103) {
emitter = new Cesium.SphereEmitter(2.5)
} else if (type == 101 || type == 104) {
emitter = new Cesium.SphereEmitter(0.1)
}
} else if (o.typevalue == '圆锥体放射') {
emitter = new Cesium.ConeEmitter(
Cesium.Math.toRadians(45.0)
)
} else if (o.typevalue == '盒状放射') {
if (type == 101) {
emitter = new Cesium.BoxEmitter(
new Cesium.Cartesian3(0.1, 0.1, 0.1)
)
} else {
emitter = new Cesium.BoxEmitter(
new Cesium.Cartesian3(10.0, 10.0, 10.0)
)
}
}
let particleCanvas
function getImage() {
if (!Cesium.defined(particleCanvas)) {
particleCanvas = document.createElement("canvas")
particleCanvas.width = 20
particleCanvas.height = 20
const context2D = particleCanvas.getContext("2d")
context2D.beginPath()
context2D.arc(8, 8, 8, 0, Cesium.Math.TWO_PI, true)
context2D.closePath()
context2D.fillStyle = "rgb(255, 255, 255)"
context2D.fill()
}
return particleCanvas;
}
let img, startColor, endColor, bursts, lifetime
if (type == 101) {
img = require('../image/Blast.png')
startColor = new Cesium.Color(1, 1, 1, 0.3).withAlpha(1)
endColor = new Cesium.Color(0.8, 0.86, 1, 0.4).withAlpha(0)
lifetime = 8
bursts = undefined
} else if (type == 103) {
img = require('../image/fountain.png')
startColor = new Cesium.Color(1, 1, 1, 0.3)
endColor = new Cesium.Color(0.8, 0.86, 1, 0.4)
bursts = undefined
lifetime = 16
} else if (type == 104) {
img = getImage()
startColor = Cesium.Color.fromCssColorString(o.fireworkColor).withAlpha(1)
endColor = Cesium.Color.fromCssColorString(o.fireworkColor).withAlpha(0)
lifetime = 2
bursts = []
for (let j = 0; j < 3; ++j) {
bursts.push(
new Cesium.ParticleBurst({
// time: 0,
time: Cesium.Math.nextRandomNumber() * 2,
minimum: 400.0,
maximum: 400.0
})
)
}
}
let particleSystem = viewer.scene.primitives.add(
new Cesium.ParticleSystem({
id: o.id,
image: img, // 粒子的图片
startColor: startColor, // 起始颜色
endColor: endColor, // 结束颜色
startScale: o.startScale, // 开始大小比例
endScale: o.endScale, // 结束大小比例
minimumParticleLife: o.minimumParticleLife, // 最小生命周期
maximumParticleLife: o.maximumParticleLife, // 最大生命周期
minimumSpeed: o.minimumSpeed, // 最小速度
maximumSpeed: o.maximumSpeed, // 最大速度
bursts: bursts,
imageSize: new Cesium.Cartesian2(
o.particleSize,
o.particleSize * 2
), // 粒子大小
emissionRate: o.emissionRate, // 粒子数量
lifetime: lifetime,
loop: true, // 循环是否开启
emitter: emitter, // 粒子的释放方向
updateCallback: applyGravity, // 重力回调
sizeInMeters: true, // 是否以米为单位
})
)
let gravityScratch = new Cesium.Cartesian3()
function applyGravity(p, dt) {
let position = p.position
Cesium.Cartesian3.normalize(position, gravityScratch)
Cesium.Cartesian3.multiplyByScalar(
gravityScratch,
o.gravity * dt,
gravityScratch
)
p.velocity = Cesium.Cartesian3.add(
p.velocity,
gravityScratch,
p.velocity
)
}
viewer.scene.preUpdate.addEventListener(function (scene, time) {
particleSystem.modelMatrix = computeModelMatrix(entity, time)
particleSystem.emitterModelMatrix = computeEmitterModelMatrix()
})
function computeModelMatrix(entity, time) {
return entity.computeModelMatrix(time, new Cesium.Matrix4())
}
let emitterModelMatrix = new Cesium.Matrix4()
let translation = new Cesium.Cartesian3()
let rotation = new Cesium.Quaternion()
let hpr = new Cesium.HeadingPitchRoll()
let trs = new Cesium.TranslationRotationScale()
// 改变粒子系统的位置
function computeEmitterModelMatrix() {
hpr = Cesium.HeadingPitchRoll.fromDegrees(0.0, 0.0, 0.0, hpr)
trs.translation = Cesium.Cartesian3.fromElements(0, 0, 0, translation)
trs.rotation = Cesium.Quaternion.fromHeadingPitchRoll(hpr, rotation)
return Cesium.Matrix4.fromTranslationRotationScale(
trs,
emitterModelMatrix
)
}
}
粒子系统 生成火焰 喷泉 烟花 等
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 1 需求实现 粒子系统ParticleSystem[https://blog.csdn.net/m0_376028...
- 简介 本系统是由粒子系统组成的图像自动生成系统,单个粒子在画面内自由游走,粒子间彼此相连,最后可生成网状的风格化图...
- 去年底,公司项目需要,准备做动一套态天气效果,经过考虑,决定使用UIKit自带的粒子系统实现。其中做了雨、雪、雾(...