image.png

<template>
<div class="fullSize" id="cesiumContainer"></div>
</template>

<script>
import "cesium/Widgets/widgets.css";

import Cesium from "cesium/Cesium";

import PolylineTrailMaterialProperty from "@/unit/PolylineTrailMaterialProperty";

export default {
name: "CesiumFire",
//
data() {
return {
viewer: null
};
},

mounted() {
let viewerOption = {
geocoder: false, // 地理位置查询定位控件
homeButton: false, // 默认相机位置控件
timeline: false, // 时间滚动条控件
navigationHelpButton: false, // 默认的相机控制提示控件
fullscreenButton: false, // 全屏控件
scene3DOnly: true, // 每个几何实例仅以3D渲染以节省GPU内存
baseLayerPicker: false, // 底图切换控件
shouldAnimate: true, //是否开始动画
// useDefaultRenderLoop : true,//如果需要控制渲染循环，则设为true
selectionIndicator: true, //是否显示选取指示器组件
// targetFrameRate:60,
vrButton: true,
showRenderLoopErrors: true,
requestAnimationFrame: true,
// showRenderLoopErrors : false,

  animation: false // 控制场景动画的播放速度控件
};
this.viewer = new Cesium.Viewer(this.$el, viewerOption);
this.create();

},

methods: {
create() {
var self = this;
var hpRoll = new Cesium.HeadingPitchRoll(
Cesium.Math.toRadians(-90),
// 0,
0,
0
);
// 添加模型
var junjianET = this.viewer.entities.add({
// 模型父级
parent: self.junjiansEntities,
// 模型位置
position: Cesium.Cartesian3.fromDegrees(118.54, 23.51, 0),
// 模型方向
orientation: this.Cesium.Transforms.headingPitchRollQuaternion(
Cesium.Cartesian3.fromDegrees(119.54, 23.51, 0),
hpRoll
),
// 模型资源
model: {
// 模型路径
show:true,
uri: "3d/junjian/junjian.gltf",
// 模型刻度
PixelSize: 128,

        scale: 20
      }
    });

  this.createFireSystem(junjianET, Cesium.JulianDate.fromDate(new Date(2018, 7, 11)));
   //镜头顺时针旋转九十度，即东向
  var heading = Cesium.Math.toRadians(-20);
  //镜头倾斜30度俯视
  var pitch = Cesium.Math.toRadians(-2);
    this.viewer.zoomTo(
    junjianET,
    new Cesium.HeadingPitchRange(heading, pitch,600)
  );
     
},
  // 创建爆炸粒子特效
createFireSystem(entity, time){
 
  var self = this;
  var particleEntity = new Cesium.ParticleSystem({
        image : 'img/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(5, 5),
        emissionRate : 4,
        lifetime : 16.0,
        emitter: new Cesium.BoxEmitter(new Cesium.Cartesian3(10.0, 10.0, 10.0)),
        modelMatrix : self.computeModelMatrix(entity, time),
        emitterModelMatrix : self.computeEmitterModelMatrix()
  });
 
  var particleSystem = this.viewer.scene.primitives.add(particleEntity);
  setTimeout(() => {
      this.viewer.scene.primitives.remove(particleEntity);
  }, 50000); 
},

computeModelMatrix(entity, time){
    var position = Cesium.Property.getValueOrUndefined(entity.position, time, new Cesium.Cartesian3());
    if (!Cesium.defined(position)) {
        return undefined;
    }
    var orientation = Cesium.Property.getValueOrUndefined(entity.orientation, time, new Cesium.Quaternion());
    if (!Cesium.defined(orientation)) {
        var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(position, undefined, new Cesium.Matrix4());
    } else {
        modelMatrix = Cesium.Matrix4.fromRotationTranslation(Cesium.Matrix3.fromQuaternion(orientation, new Cesium.Matrix3()), position, new Cesium.Matrix4());
    }
    return modelMatrix;
},
computeEmitterModelMatrix(){
   var hpr = Cesium.HeadingPitchRoll.fromDegrees(0.0, 0.0, 0.0, new Cesium.HeadingPitchRoll());
   var trs = new Cesium.TranslationRotationScale();
   trs.translation = Cesium.Cartesian3.fromElements(2.5, 4.0, 1.0, new Cesium.Cartesian3());
   trs.rotation = Cesium.Quaternion.fromHeadingPitchRoll(hpr, new Cesium.Quaternion());
   return Cesium.Matrix4.fromTranslationRotationScale(trs, new Cesium.Matrix4());
}

}
};
</script>

<style lang="scss" >
</style>
结合网上案例，vue+cesium实现着火特效。代码如上，仅供学习：
注意点：
1.shouldAnimate: true, //开启动画；

2. this.createFireSystem(junjianET, Cesium.JulianDate.fromDate(new Date(2018, 7, 11)));调用时，时间参数指定日期，时间日期指定当前时间不生效，不知道为什么，有知道原因的麻烦在文章下面留言告知，谢谢。