ceisum粒子系统实现爆炸效果
·
啥是粒子系统?概念听起来总是如此高深。
其实,简单的说,就是通过对大量的每一个微小粒子的控制(颜色、位置运动),来模拟某些场景。比如,模拟爆炸、下雨、烟雾、等特效什么的。
这里以ceisum中实现爆炸特效为例,介绍如何在ceisum中实现爆炸效果。
爆炸特效实现的关键有两点:
1、漂亮的png透明火灾爆炸图(需要PS抠图,百度搜一下素材及做法)
2、创建一个粒子系统对象,设定参数
创建粒子对象
var staticPosition = Cesium.Cartesian3.fromDegrees(112,22,50);
var entity44 = viewer.entities.add({
position : staticPosition
})
function computeModelMatrix(entity, time) {
var position = Cesium.Property.getValueOrUndefined(entity.position);
let modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(position);
return modelMatrix;
}
function computeEmitterModelMatrix() {
let hpr = Cesium.HeadingPitchRoll.fromDegrees(0, 0, 0);
let trs = new Cesium.TranslationRotationScale();
trs.translation = Cesium.Cartesian3.fromElements(2.5,4, 1);
trs.rotation = Cesium.Quaternion.fromHeadingPitchRoll(hpr);
let result=Cesium.Matrix4.fromTranslationRotationScale(trs);
return result
}
viewer.scene.primitives.add(new Cesium.ParticleSystem({
image : './Apps/SampleData/fire.png',
startColor : Cesium.Color.RED.withAlpha(0.7),
endColor : Cesium.Color.YELLOW.withAlpha(0.3),
startScale : 0,
endScale : 10,
//设定粒子寿命可能持续时间的最小限值(以秒为单位),在此限值之上将随机选择粒子的实际寿命。
minimumParticleLife : 1,
maximumParticleLife : 6,
minimumSpeed :1,
maximumSpeed : 4,
imageSize : new Cesium.Cartesian2(55, 55),
// Particles per second.
emissionRate : 4,
lifetime : 160.0,
//cesium内置的发射器,圆形发射器,因此参数是一个半径值
//还有锥形发射器,new Cesium.ConeEmitter(Cesium.Math.toRadians(45.0))
//长方形发射器,new Cesium.BoxEmitter(new Cesium.Cartesian3(1.0, 1.0, 1.0))
//半球发射器,new Cesium.SphereEmitter(0.5)
emitter : new Cesium.CircleEmitter(5.0),
//将粒子系统从模型转换为世界坐标的4x4变换矩阵
modelMatrix : computeModelMatrix(entity44),
//在粒子系统局部坐标系中变换粒子系统发射器的4x4变换矩阵
emitterModelMatrix : computeEmitterModelMatrix()
}))
注意:如果发现爆炸效果无法按预期实现动画效果,检查一下是否开启了
shouldAnimate
new Cesium.Viewer(this.cesiumContainer, {
shouldAnimate: true,
})
更多推荐
所有评论(0)