Cesium粒子特效js封装（火焰、水枪、爆炸、喷雾、烟），包含demo图片

最新推荐文章于 2024-05-30 16:45:47 发布
最新推荐文章于 2024-05-30 16:45:47 发布
阅读量7.3k 收藏 78
点赞数 22
文章标签： javascript 前端 开发语言 cesium 粒子
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yopo_AG/article/details/126647549
版权

基于1.9版本cesium封装了几个粒子功能

1.火焰

//火焰特效
export  class FireEffect{
  constructor(viewer) {
    this.viewer=viewer
    this.viewModel={
      emissionRate: 5,
      gravity: 0.0,//设置重力参数
      minimumParticleLife: 1,
      maximumParticleLife: 6,
      minimumSpeed: 1.0,//粒子发射的最小速度
      maximumSpeed: 4.0,//粒子发射的最大速度
      startScale: 0.0,
      endScale: 10.0,
      particleSize: 25.0,
    }
    this.emitterModelMatrix = new Cesium.Matrix4()
    this.translation = new Cesium.Cartesian3()
    this.rotation = new Cesium.Quaternion()
    this.hpr = new Cesium.HeadingPitchRoll()
    this.trs = new Cesium.TranslationRotationScale()
    this.scene = this.viewer.scene
    this.particleSystem=''
    this.entity = this.viewer.entities.add({
      //选择粒子放置的坐标
      position: Cesium.Cartesian3.fromDegrees(
        116.34485552299206,
        39.99754814959118
      ),
    });
    this.init();
  }

  init(){
    const _this=this
    this.viewer.clock.shouldAnimate = true;
    this.viewer.scene.globe.depthTestAgainstTerrain = false;
    this.viewer.trackedEntity = this.entity;
    var particleSystem = this.scene.primitives.add(
      new Cesium.ParticleSystem({
        image: require('../assets/fire.png'),//生成所需粒子的图片路径
        //粒子在生命周期开始时的颜色
        startColor:  new Cesium.Color(1, 1, 1, 1),
        //粒子在生命周期结束时的颜色
        endColor: new Cesium.Color(0.5, 0, 0, 0),
        //粒子在生命周期开始时初始比例
        startScale: _this.viewModel.startScale,
        //粒子在生命周期结束时比例
        endScale: _this.viewModel.endScale,
        //粒子发射的最小速度
        minimumParticleLife: _this.viewModel.minimumParticleLife,
        //粒子发射的最大速度
        maximumParticleLife: _this.viewModel.maximumParticleLife,
        //粒子质量的最小界限
        minimumSpeed: _this.viewModel.minimumSpeed,
        //粒子质量的最大界限
        maximumSpeed: _this.viewModel.maximumSpeed,
        //以像素为单位缩放粒子图像尺寸
        imageSize: new Cesium.Cartesian2(
          _this.viewModel.particleSize,
          _this.viewModel.particleSize
        ),
        //每秒发射的粒子数
        emissionRate: _this.viewModel.emissionRate,
        //粒子系统发射粒子的时间（秒）
        lifetime: 16.0,
        //粒子系统是否应该在完成时循环其爆发
        loop: true,
        //设置粒子的大小是否以米或像素为单位
        sizeInMeters: true,
        //系统的粒子发射器
        emitter: new Cesium.ConeEmitter(Cesium.Math.toRadians(45.0)),//BoxEmitter 盒形发射器，ConeEmitter 锥形发射器，SphereEmitter 球形发射器，CircleEmitter圆形发射器
      })
    );
    this.particleSystem=particleSystem;
    this.preUpdateEvent()
  }

  //场景渲染事件
  preUpdateEvent() {
    let _this=this;
    this.viewer.scene.preUpdate.addEventListener(function (scene, time) {
      //发射器地理位置
      _this.particleSystem.modelMatrix = _this.computeModelMatrix(_this.entity, time);
      //发射器局部位置
      _this.particleSystem.emitterModelMatrix = _this.computeEmitterModelMatrix();
      // 将发射器旋转
      if (_this.viewModel.spin) {
        _this.viewModel.heading += 1.0;
        _this.viewModel.pitch += 1.0;
        _this.viewModel.roll += 1.0;
      }
    });
  }

  computeModelMatrix(entity, time) {
    return entity.computeModelMatrix(time, new Cesium.Matrix4());
  }

  computeEmitterModelMatrix() {
    this.hpr = Cesium.HeadingPitchRoll.fromDegrees(0.0, 0.0, 0.0, this.hpr);
    this.trs.translation = Cesium.Cartesian3.fromElements(
      -4.0,
      0.0,
      1.4,
      this.translation
    );
    this.trs.rotation = Cesium.Quaternion.fromHeadingPitchRoll(this.hpr, this.rotation);

    return Cesium.Matrix4.fromTranslationRotationScale(
      this.trs,
      this.emitterModelMatrix
    );
  }

  removeEvent(){
    this.viewer.scene.preUpdate.removeEventListener(this.preUpdateEvent, this);
    this.emitterModelMatrix = undefined;
    this.translation = undefined;
    this.rotation = undefined;
    this.hpr = undefined;
    this.trs = undefined;
  }

  //移除粒子特效
  remove() {
    ()=>{return this.removeEvent()}; //清除事件
    this.viewer.scene.primitives.remove(this.particleSystem); //删除粒子对象
    this.viewer.entities.remove(this.entity); //删除entity
  }

}

2.水枪

export  class waterEffect{
  constructor(viewer) {
    this.viewer=viewer
    this.viewModel={
      emissionRate: 5,
      gravity: 0.0,//设置重力参数
      minimumParticleLife: 1,
      maximumParticleLife: 6,
      minimumSpeed: 1.0,//粒子发射的最小速度
      maximumSpeed: 4.0,//粒子发射的最大速度
      startScale: 0.0,
      endScale: 10.0,
      particleSize: 25.0,
    }
    this.emitterModelMatrix = new Cesium.Matrix4()
    this.translation = new Cesium.Cartesian3()
    this.rotation = new Cesium.Quaternion()
    this.hpr = new Cesium.HeadingPitchRoll()
    this.trs = new Cesium.TranslationRotationScale()
    this.scene = this.viewer.scene
    this.particleSystem=''
    this.entity = this.viewer.entities.add({
      //选择粒子放置的坐标
      position: Cesium.Cartesian3.fromDegrees(
        116.34485552299206,
        39.99754814959118
      ),
    });
    this.init();
  }

  init(){
    const _this=this
    this.viewer.clock.shouldAnimate = true;
    this.viewer.scene.globe.depthTestAgainstTerrain = false;
    this.viewer.trackedEntity = this.entity;
    var particleSystem = this.scene.primitives.add(
      new Cesium.ParticleSystem({
        image: require('../assets/water.png'),//生成所需粒子的图片路径
        //粒子在生命周期开始时的颜色
        startColor: new Cesium.Color(1, 1, 1, 0.6),
        //粒子在生命周期结束时的颜色
        endColor: new Cesium.Color(0.80, 0.86, 1, 0.4),
        //粒子在生命周期开始时初始比例
        startScale: _this.viewModel.startScale,
        //粒子在生命周期结束时比例
        endScale: _this.viewModel.endScale,
        //粒子发射的最小速度
        minimumParticleLife: _this.viewModel.minimumParticleLife,
        //粒子发射的最大速度
        maximumParticleLife: _this.viewModel.maximumParticleLife,
        //粒子质量的最小界限
        minimumSpeed: _this.viewModel.minimumSpeed,
        //粒子质量的最大界限
        maximumSpeed: _this.viewModel.maximumSpeed,
        //以像素为单位缩放粒子图像尺寸
        imageSize: new Cesium.Cartesian2(
          _this.viewModel.particleSize,
          _this.viewModel.particleSize
        ),
        //每秒发射的粒子数
        emissionRate: _this.viewModel.emissionRate,
        //粒子系统发射粒子的时间（秒）
        lifetime: 16.0,
        //设置粒子的大小是否以米或像素为单位
        sizeInMeters: true,
        //系统的粒子发射器
        emitter: new Cesium.CircleEmitter(0.2),//BoxEmitter 盒形发射器，ConeEmitter 锥形发射器，SphereEmitter 球形发射器，CircleEmitter圆形发射器
        //回调函数，实现各种喷泉、烟雾效果
        updateCallback: (p, dt) => {
          return this.applyGravity(p, dt);
        },
      })
    );
    this.particleSystem=particleSystem;
    this.preUpdateEvent()
  }

  //场景渲染事件
  preUpdateEvent() {
    let _this=this;
    this.viewer.scene.preUpdate.addEventListener(function (scene, time) {
      //发射器地理位置
      _this.particleSystem.modelMatrix = _this.computeModelMatrix(_this.entity, time);
      //发射器局部位置
      _this.particleSystem.emitterModelMatrix = _this.computeEmitterModelMatrix();
      // 将发射器旋转
      if (_this.viewModel.spin) {
        _this.viewModel.heading += 1.0;
        _this.viewModel.pitch += 1.0;
        _this.viewModel.roll += 1.0;
      }
    });
  }

  computeModelMatrix(entity, time) {
    return entity.computeModelMatrix(time, new Cesium.Matrix4());
  }

  computeEmitterModelMatrix() {
    this.hpr = Cesium.HeadingPitchRoll.fromDegrees(0.0, 0.0, 0.0, this.hpr);
    this.trs.translation = Cesium.Cartesian3.fromElements(
      -4.0,
      0.0,
      1.4,
      this.translation
    );
    this.trs.rotation = Cesium.Quaternion.fromHeadingPitchRoll(this.hpr, this.rotation);

    return Cesium.Matrix4.fromTranslationRotationScale(
      this.trs,
      this.emitterModelMatrix
    );
  }

  applyGravity(p, dt){
    var gravityScratch = new Cesium.Cartesian3()
    var position = p.position
    Cesium.Cartesian3.normalize(position, gravityScratch)
    Cesium.Cartesian3.fromElements(
      20 * dt,
      gravityScratch.y * dt,
      -30 * dt,
      gravityScratch
    );
    p.velocity = Cesium.Cartesian3.add(p.velocity, gravityScratch, p.velocity)
  }

  removeEvent(){
    this.viewer.scene.preUpdate.removeEventListener(this.preUpdateEvent, this);
    this.emitterModelMatrix = undefined;
    this.translation = undefined;
    this.rotation = undefined;
    this.hpr = undefined;
    this.trs = undefined;
  }

  //移除粒子特效
  remove() {
    ()=>{return this.removeEvent()}; //清除事件
    this.viewer.scene.primitives.remove(this.particleSystem); //删除粒子对象
    this.viewer.entities.remove(this.entity); //删除entity
  }

}

3.爆炸

//爆炸特效
export  class explotEffect{
  constructor(viewer) {
    this.viewer=viewer
    this.viewModel={
      emissionRate: 5,
      gravity: 0.0,//设置重力参数
      minimumParticleLife: 1,
      maximumParticleLife: 6,
      minimumSpeed: 1.0,//粒子发射的最小速度
      maximumSpeed: 4.0,//粒子发射的最大速度
      startScale: 0.0,
      endScale: 10.0,
      particleSize: 25.0,
    }
    this.emitterModelMatrix = new Cesium.Matrix4()
    this.translation = new Cesium.Cartesian3()
    this.rotation = new Cesium.Quaternion()
    this.hpr = new Cesium.HeadingPitchRoll()
    this.trs = new Cesium.TranslationRotationScale()
    this.scene = this.viewer.scene
    this.particleSystem=''
    this.entity = this.viewer.entities.add({
      //选择粒子放置的坐标
      position: Cesium.Cartesian3.fromDegrees(
        116.34485552299206,
        39.99754814959118
      ),
    });
    this.init();
  }

  init(){
    const _this=this
    this.viewer.clock.shouldAnimate = true;
    this.viewer.scene.globe.depthTestAgainstTerrain = false;
    this.viewer.trackedEntity = this.entity;
    var particleSystem = this.scene.primitives.add(
      new Cesium.ParticleSystem({
        image: require('../assets/explot.png'),//生成所需粒子的图片路径
        //粒子在生命周期开始时的颜色
        startColor: Cesium.Color.RED.withAlpha(0.7),
        //粒子在生命周期结束时的颜色
        endColor: Cesium.Color.YELLOW.withAlpha(0.3),
        //粒子在生命周期开始时初始比例
        startScale: _this.viewModel.startScale,
        //粒子在生命周期结束时比例
        endScale: _this.viewModel.endScale,
        //粒子发射的最小速度
        minimumParticleLife: _this.viewModel.minimumParticleLife,
        //粒子发射的最大速度
        maximumParticleLife: _this.viewModel.maximumParticleLife,
        //粒子质量的最小界限
        minimumSpeed: _this.viewModel.minimumSpeed,
        //粒子质量的最大界限
        maximumSpeed: _this.viewModel.maximumSpeed,
        //以像素为单位缩放粒子图像尺寸
        imageSize: new Cesium.Cartesian2(
          _this.viewModel.particleSize,
          _this.viewModel.particleSize
        ),
        //每秒发射的粒子数
        emissionRate: _this.viewModel.emissionRate,
        //粒子系统发射粒子的时间（秒）
        lifetime: 16.0,
        //设置粒子的大小是否以米或像素为单位
        sizeInMeters: true,
        //系统的粒子发射器
        emitter: new Cesium.CircleEmitter(5.0),//BoxEmitter 盒形发射器，ConeEmitter 锥形发射器，SphereEmitter 球形发射器，CircleEmitter圆形发射器

      })
    );
    this.particleSystem=particleSystem;
    this.preUpdateEvent()
  }

  //场景渲染事件
  preUpdateEvent() {
    let _this=this;
    this.viewer.scene.preUpdate.addEventListener(function (scene, time) {
      //发射器地理位置
      _this.particleSystem.modelMatrix = _this.computeModelMatrix(_this.entity, time);
      //发射器局部位置
      _this.particleSystem.emitterModelMatrix = _this.computeEmitterModelMatrix();
      // 将发射器旋转
      if (_this.viewModel.spin) {
        _this.viewModel.heading += 1.0;
        _this.viewModel.pitch += 1.0;
        _this.viewModel.roll += 1.0;
      }
    });
  }

  computeModelMatrix(entity, time) {
    return entity.computeModelMatrix(time, new Cesium.Matrix4());
  }

  computeEmitterModelMatrix() {
    this.hpr = Cesium.HeadingPitchRoll.fromDegrees(0.0, 0.0, 0.0, this.hpr);
    this.trs.translation = Cesium.Cartesian3.fromElements(
      -4.0,
      0.0,
      1.4,
      this.translation
    );
    this.trs.rotation = Cesium.Quaternion.fromHeadingPitchRoll(this.hpr, this.rotation);

    return Cesium.Matrix4.fromTranslationRotationScale(
      this.trs,
      this.emitterModelMatrix
    );
  }


  removeEvent(){
    this.viewer.scene.preUpdate.removeEventListener(this.preUpdateEvent, this);
    this.emitterModelMatrix = undefined;
    this.translation = undefined;
    this.rotation = undefined;
    this.hpr = undefined;
    this.trs = undefined;
  }

  //移除粒子特效
  remove() {
    ()=>{return this.removeEvent()}; //清除事件
    this.viewer.scene.primitives.remove(this.particleSystem); //删除粒子对象
    this.viewer.entities.remove(this.entity); //删除entity
  }

}

4.喷雾

//喷雾特效
export  class sprayEffect{
  constructor(viewer) {
    this.viewer=viewer
    this.viewModel={
      emissionRate: 5,
      gravity: 0.0,//设置重力参数
      minimumParticleLife: 1,
      maximumParticleLife: 6,
      minimumSpeed: 1.0,//粒子发射的最小速度
      maximumSpeed: 4.0,//粒子发射的最大速度
      startScale: 0.0,
      endScale: 10.0,
      particleSize: 25.0,
    }
    this.emitterModelMatrix = new Cesium.Matrix4()
    this.translation = new Cesium.Cartesian3()
    this.rotation = new Cesium.Quaternion()
    this.hpr = new Cesium.HeadingPitchRoll()
    this.trs = new Cesium.TranslationRotationScale()
    this.scene = this.viewer.scene
    this.particleSystem=''
    this.entity = this.viewer.entities.add({
      //选择粒子放置的坐标
      position: Cesium.Cartesian3.fromDegrees(
        116.34485552299206,
        39.99754814959118
      ),
    });
    this.init();
  }

  init(){
    const _this=this
    this.viewer.clock.shouldAnimate = true;
    this.viewer.scene.globe.depthTestAgainstTerrain = false;
    this.viewer.trackedEntity = this.entity;
    var particleSystem = this.scene.primitives.add(
      new Cesium.ParticleSystem({
        image: require('../assets/fire.png'),//生成所需粒子的图片路径
        //粒子在生命周期开始时的颜色
        startColor: Cesium.Color.RED.withAlpha(0.7),
        //粒子在生命周期结束时的颜色
        endColor: Cesium.Color.YELLOW.withAlpha(0.3),
        //粒子在生命周期开始时初始比例
        startScale: _this.viewModel.startScale,
        //粒子在生命周期结束时比例
        endScale: _this.viewModel.endScale,
        //粒子发射的最小速度
        minimumParticleLife: _this.viewModel.minimumParticleLife,
        //粒子发射的最大速度
        maximumParticleLife: _this.viewModel.maximumParticleLife,
        //粒子质量的最小界限
        minimumSpeed: _this.viewModel.minimumSpeed,
        //粒子质量的最大界限
        maximumSpeed: _this.viewModel.maximumSpeed,
        //以像素为单位缩放粒子图像尺寸
        imageSize: new Cesium.Cartesian2(
          _this.viewModel.particleSize,
          _this.viewModel.particleSize
        ),
        //每秒发射的粒子数
        emissionRate: _this.viewModel.emissionRate,
        //粒子系统发射粒子的时间（秒）
        lifetime: 16.0,
        //设置粒子的大小是否以米或像素为单位
        sizeInMeters: true,
        //系统的粒子发射器
        emitter: new Cesium.CircleEmitter(2.0),//BoxEmitter 盒形发射器，ConeEmitter 锥形发射器，SphereEmitter 球形发射器，CircleEmitter圆形发射器
        //回调函数，实现各种喷泉、烟雾效果
        updateCallback: (p, dt) => {
          return this.applyGravity(p, dt);
        },
      })
    );
    this.particleSystem=particleSystem;
    this.preUpdateEvent()
  }

  //场景渲染事件
  preUpdateEvent() {
    let _this=this;
    this.viewer.scene.preUpdate.addEventListener(function (scene, time) {
      //发射器地理位置
      _this.particleSystem.modelMatrix = _this.computeModelMatrix(_this.entity, time);
      //发射器局部位置
      _this.particleSystem.emitterModelMatrix = _this.computeEmitterModelMatrix();
      // 将发射器旋转
      if (_this.viewModel.spin) {
        _this.viewModel.heading += 1.0;
        _this.viewModel.pitch += 1.0;
        _this.viewModel.roll += 1.0;
      }
    });
  }

  computeModelMatrix(entity, time) {
    return entity.computeModelMatrix(time, new Cesium.Matrix4());
  }

  computeEmitterModelMatrix() {
    this.hpr = Cesium.HeadingPitchRoll.fromDegrees(0.0, 0.0, 0.0, this.hpr);
    this.trs.translation = Cesium.Cartesian3.fromElements(
      -4.0,
      0.0,
      1.4,
      this.translation
    );
    this.trs.rotation = Cesium.Quaternion.fromHeadingPitchRoll(this.hpr, this.rotation);

    return Cesium.Matrix4.fromTranslationRotationScale(
      this.trs,
      this.emitterModelMatrix
    );
  }

  applyGravity(p, dt){
    var gravityScratch = new Cesium.Cartesian3()
    var position = p.position
    Cesium.Cartesian3.normalize(position, gravityScratch)
    Cesium.Cartesian3.fromElements(
      20 * dt,
      gravityScratch.y * dt,
      -30 * dt,
      gravityScratch
    );
    p.velocity = Cesium.Cartesian3.add(p.velocity, gravityScratch, p.velocity)
  }

  removeEvent(){
    this.viewer.scene.preUpdate.removeEventListener(this.preUpdateEvent, this);
    this.emitterModelMatrix = undefined;
    this.translation = undefined;
    this.rotation = undefined;
    this.hpr = undefined;
    this.trs = undefined;
  }

  //移除粒子特效
  remove() {
    ()=>{return this.removeEvent()}; //清除事件
    this.viewer.scene.primitives.remove(this.particleSystem); //删除粒子对象
    this.viewer.entities.remove(this.entity); //删除entity
  }

}

5.烟

//烟特效
export  class smokeEffect{
  constructor(viewer) {
    this.viewer=viewer
    this.viewModel={
      emissionRate: 5,
      gravity: 0.0,//设置重力参数
      minimumParticleLife: 1,
      maximumParticleLife: 6,
      minimumSpeed: 1.0,//粒子发射的最小速度
      maximumSpeed: 4.0,//粒子发射的最大速度
      startScale: 0.0,
      endScale: 10.0,
      particleSize: 25.0,
    }
    this.emitterModelMatrix = new Cesium.Matrix4()
    this.translation = new Cesium.Cartesian3()
    this.rotation = new Cesium.Quaternion()
    this.hpr = new Cesium.HeadingPitchRoll()
    this.trs = new Cesium.TranslationRotationScale()
    this.scene = this.viewer.scene
    this.particleSystem=''
    this.entity = this.viewer.entities.add({
      //选择粒子放置的坐标
      position: Cesium.Cartesian3.fromDegrees(
        116.34485552299206,
        39.99754814959118
      ),
    });
    this.init();
  }

  init(){
    const _this=this
    this.viewer.clock.shouldAnimate = true;
    this.viewer.scene.globe.depthTestAgainstTerrain = false;
    this.viewer.trackedEntity = this.entity;
    var particleSystem = this.scene.primitives.add(
      new Cesium.ParticleSystem({
        image: require('../assets/fire.png'),//生成所需粒子的图片路径
        //粒子在生命周期开始时的颜色
        startColor: Cesium.Color.RED.withAlpha(0.7),
        //粒子在生命周期结束时的颜色
        endColor: Cesium.Color.YELLOW.withAlpha(0.3),
        //粒子在生命周期开始时初始比例
        startScale: _this.viewModel.startScale,
        //粒子在生命周期结束时比例
        endScale: _this.viewModel.endScale,
        //粒子发射的最小速度
        minimumParticleLife: _this.viewModel.minimumParticleLife,
        //粒子发射的最大速度
        maximumParticleLife: _this.viewModel.maximumParticleLife,
        //粒子质量的最小界限
        minimumSpeed: _this.viewModel.minimumSpeed,
        //粒子质量的最大界限
        maximumSpeed: _this.viewModel.maximumSpeed,
        //以像素为单位缩放粒子图像尺寸
        imageSize: new Cesium.Cartesian2(
          _this.viewModel.particleSize,
          _this.viewModel.particleSize
        ),
        //每秒发射的粒子数
        emissionRate: _this.viewModel.emissionRate,
        //粒子系统发射粒子的时间（秒）
        lifetime: 16.0,
        //设置粒子的大小是否以米或像素为单位
        sizeInMeters: true,
        //系统的粒子发射器
        emitter: new Cesium.CircleEmitter(2.0),//BoxEmitter 盒形发射器，ConeEmitter 锥形发射器，SphereEmitter 球形发射器，CircleEmitter圆形发射器
        //回调函数，实现各种喷泉、烟雾效果
        updateCallback: (p, dt) => {
          return this.applyGravity(p, dt);
        },
      })
    );
    this.particleSystem=particleSystem;
    this.preUpdateEvent()
  }

  //场景渲染事件
  preUpdateEvent() {
    let _this=this;
    this.viewer.scene.preUpdate.addEventListener(function (scene, time) {
      //发射器地理位置
      _this.particleSystem.modelMatrix = _this.computeModelMatrix(_this.entity, time);
      //发射器局部位置
      _this.particleSystem.emitterModelMatrix = _this.computeEmitterModelMatrix();
      // 将发射器旋转
      if (_this.viewModel.spin) {
        _this.viewModel.heading += 1.0;
        _this.viewModel.pitch += 1.0;
        _this.viewModel.roll += 1.0;
      }
    });
  }

  computeModelMatrix(entity, time) {
    return entity.computeModelMatrix(time, new Cesium.Matrix4());
  }

  computeEmitterModelMatrix() {
    this.hpr = Cesium.HeadingPitchRoll.fromDegrees(0.0, 0.0, 0.0, this.hpr);
    this.trs.translation = Cesium.Cartesian3.fromElements(
      -4.0,
      0.0,
      1.4,
      this.translation
    );
    this.trs.rotation = Cesium.Quaternion.fromHeadingPitchRoll(this.hpr, this.rotation);

    return Cesium.Matrix4.fromTranslationRotationScale(
      this.trs,
      this.emitterModelMatrix
    );
  }

  applyGravity(p, dt){
    var gravityScratch = new Cesium.Cartesian3()
    var position = p.position
    Cesium.Cartesian3.normalize(position, gravityScratch)
    Cesium.Cartesian3.fromElements(
      20 * dt,
      30 * dt,
      gravityScratch.y * dt,
      gravityScratch
    );
    p.velocity = Cesium.Cartesian3.add(p.velocity, gravityScratch, p.velocity)
  }

  removeEvent(){
    this.viewer.scene.preUpdate.removeEventListener(this.preUpdateEvent, this);
    this.emitterModelMatrix = undefined;
    this.translation = undefined;
    this.rotation = undefined;
    this.hpr = undefined;
    this.trs = undefined;
  }

  //移除粒子特效
  remove() {
    ()=>{return this.removeEvent()}; //清除事件
    this.viewer.scene.primitives.remove(this.particleSystem); //删除粒子对象
    this.viewer.entities.remove(this.entity); //删除entity
  }

}

粒子图片
水滴粒子
在这里插入图片描述
火焰粒子
在这里插入图片描述
爆炸粒子
在这里插入图片描述

yopo_AG
关注
  • 22
    点赞
  • 踩
  • 78
    收藏
    觉得还不错? 一键收藏
  • 19
    评论
Cesium特效原生js，火焰，烟雾，喷泉，水系，辉光，建筑光影
07-16
Cesium特效原生js，火焰，烟雾，喷泉，水系，辉光，建筑光影，车辆轨迹运动，天空盒，军事标绘，流动线，流动箭头，面，动态墙，雷达点，扩散点，标注点，建筑物显示动画，建筑物分层分户.zip
Cesium-demo学习三维，学习JS封装Cesium
07-13
Cesium-demo学习三维，学习JS封装Cesium； 使用命令 vue add vue-cli-plugin-cesium 下载 npm install
Cesium 实现电弧球（噪声函数实现）
最新发布
北京-giser的博客
05-30 206
Cesium 实现电弧球（噪声函数实现）
Cesium粒子特效喷泉特效代码及模型.zip
08-08
基于webgl开发的粒子特效,喷泉效果,包括喷泉的gltf模型,粒子图片以及完整vue组件代码
Cesium特效-2023年汇总
wzwxwc1987的专栏
01-03 1102
2023年Cesium特效总结
Cesium材质特效
【cacrle】的博客
01-27 2036
现有的gis开发方向较流行的是webgis开发，其中Cesium是一款开源的WebGIS库，主要用于实时地球和空间数据的可视化和分析。它提供了丰富的地图显示和数据可视化功能，并能实现三维可视化开发。本文将使用一些特殊的材质，如视频材质、自定义材质和Cesium内置的一些特殊效果类、粒子系统等实现一些特效场景的模拟，包括云、雾、动态水面、雷达扫描、流动线、电子围栏、粒子烟花、粒子火焰及粒子天气等。
Cesium开发高级篇 | 04粒子系统
暮紫月升
03-27 4213
在三维GIS系统中，我们经常会看到一些常见的特效，比如雨雪雾天气、烟火、爆炸、喷泉等，这些都可以通过粒子系统实现，今天我就来带领大家学习一下Cesium中的粒子系统。 1.什么是粒子系统 粒子系统是一种图形技术，可以模拟复杂的物理效果。粒子系统是小图像的集合，即由一堆很小的图片组成，当把它们聚集到一起观看时，就会形成一个复杂的“模糊不清”的物体，如火、烟、天气或烟花等。这些复杂的效果其实是通过控制每一个粒子对象的初始位置、速度、生命周期等行为来完成的，可以说粒子系统控制着每个粒子对象随着时间的显示和变化。
VUE3-Cesium（粒子发射-ParticleSystem）
damadashen的博客
06-13 1445
Cesium中粒子系统ParticlesSytem详解及使用（烟雾效果、雨滴效果）
cesium模型爆炸案例
weixin_49608678的博客
09-14 2541
ceisum模型爆炸主着色器代码
Cesium特效-2022年汇总
wzwxwc1987的专栏
03-09 1208
2022年基于cesium实现的各种特效
Cesium 粒子系统卡死
资深三维GIS开发
03-29 686
基于cesium的粒子系统做了个爆炸的效果，当在我本地写demo的时候爆炸是没问题的，但是当运用到我的框架里的时候就会卡死页面。后来经过细致的排查，是因为我框架中有个地方用了。方法，此方法和粒子系统不兼容，会导致页面崩溃！
粒子效果实现简单火焰特效
03-21
粒子效果实现简单火焰特效，资源包包括粒子特效预制体，粒子火焰形状的动画贴图以及制作的材质。（制作时要把场景的光调暗）
Cesium-demoV1.1版本学习三维，学习JS封装Cesium
07-15
Cesium-demoV1.1版本学习三维，学习JS封装Cesium；本人用于学习的Demo 使用命令 vue add vue-cli-plugin-cesium 下载 npm install 运行 npm run serve
Cesium之粒子---简单粒子特效
一个缺乏逻辑的残疾人的专栏
01-29 2915
首先，来个最简单的粒子特效： 雨： var rainParticleSize = 15.0; var rainRadius = 100000.0; var rainImageSize = new Cesium.Cartesian2(rainParticleSize, rainParticleSize * 2.0); var rainGravityScratch = new Cesium.Cartesian3(); var rainUpdate =
cesium粒子特效
心生的小鱼专栏
04-16 3559
火焰效果如下图所示： 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <meta ...
基于Cesium粒子特效的带烟雾火焰特效
行走的过客
08-04 766
基于Cesium的粒子特效火焰烟雾渲染。
Vue.js2+Cesium1.103.0 十一、Three.js 炸裂效果
qq_37236395的博客
08-29 855
【代码】Vue.js2+Cesium1.103.0 十一、Three.js 炸裂效果。
cesium粒子爆炸效果
m0_63701303的博客
01-05 840
cesium粒子爆炸效果
ceisum粒子系统实现爆炸效果
youlinhuanyan的博客
04-20 4037
啥是粒子系统？概念听起来总是如此高深。 其实，简单的说，就是通过对大量的每一个微小粒子的控制（颜色、位置运动），来模拟某些场景。比如，模拟爆炸、下雨、烟雾、等特效什么的。 这里以ceisum中实现爆炸特效为例，介绍如何在ceisum中实现爆炸效果。 ...
cesium 粒子爆炸
03-09
Cesium粒子爆炸是一种基于Cesium.js库的特效，用于在Web浏览器中创建逼真的粒子爆炸效果。Cesium.js是一个用于构建地球、地图和空间应用的JavaScript库，它提供了强大的3D地理空间可视化功能。 要实现Cesium粒子爆炸效果，可以使用Cesium.js库中的粒子系统功能。通过设置粒子的初始位置、速度颜色、大小属性，可以模拟出爆炸时粒子的散射效。同时，可以使用Cesium.js提供的动画功能，使得粒子在一段时间内逐渐消失或改变形态，增加动态效果。 以下是实现Cesium粒子爆炸效果的大致步骤： 1. 创建一个Cesium场景，并加载所需的地图或模型。 2. 创建一个粒子系统对象，并设置其属性，如初始位置、速度、颜色、大小等。 3. 将粒子系统添加到场景中，使其可见。 4. 使用动画功能，控制粒子的消失或形态变化。
评论 19
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值