<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, // 默認(rèn)相機(jī)位置控件
timeline: false, // 時(shí)間滾動(dòng)條控件
navigationHelpButton: false, // 默認(rèn)的相機(jī)控制提示控件
fullscreenButton: false, // 全屏控件
scene3DOnly: true, // 每個(gè)幾何實(shí)例僅以3D渲染以節(jié)省GPU內(nèi)存
baseLayerPicker: false, // 底圖切換控件
shouldAnimate: true, //是否開始動(dòng)畫
// useDefaultRenderLoop : true,//如果需要控制渲染循環(huán)导匣，則設(shè)為true
selectionIndicator: true, //是否顯示選取指示器組件
// targetFrameRate:60,
vrButton: true,
showRenderLoopErrors: true,
requestAnimationFrame: true,
// showRenderLoopErrors : false,
animation: false // 控制場景動(dòng)畫的播放速度控件
};
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({
// 模型父級(jí)
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)));
//鏡頭順時(shí)針旋轉(zhuǎn)九十度，即東向
var heading = Cesium.Math.toRadians(-20);
//鏡頭傾斜30度俯視
var pitch = Cesium.Math.toRadians(-2);
this.viewer.zoomTo(
junjianET,
new Cesium.HeadingPitchRange(heading, pitch,600)
);
},
// 創(chuàng)建爆炸粒子特效
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>
結(jié)合網(wǎng)上案例绅络，vue+cesium實(shí)現(xiàn)著火特效跋理。代碼如上，僅供學(xué)習(xí)：
注意點(diǎn)：
1.shouldAnimate: true, //開啟動(dòng)畫；
- this.createFireSystem(junjianET, Cesium.JulianDate.fromDate(new Date(2018, 7, 11)));調(diào)用時(shí)终畅，時(shí)間參數(shù)指定日期，時(shí)間日期指定當(dāng)前時(shí)間不生效竟闪，不知道為什么离福，有知道原因的麻煩在文章下面留言告知，謝謝炼蛤。
