啥是粒子系统?概念听起来总是如此高深。

其实,简单的说,就是通过对大量的每一个微小粒子的控制(颜色、位置运动),来模拟某些场景。比如,模拟爆炸、下雨、烟雾、等特效什么的。

这里以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,
})

Logo

北京人形旗下天工造物具身智能开源社区,聚焦具身天工与慧思开物两大平台

更多推荐