<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, //开启动画；
- this.createFireSystem(junjianET, Cesium.JulianDate.fromDate(new Date(2018, 7, 11)));调用时，时间参数指定日期，时间日期指定当前时间不生效，不知道为什么，有知道原因的麻烦在文章下面留言告知，谢谢。
