使用原生的cesium，就没有这个问题，能正确显示粒子效果，你们可以自己测一下！！！我在你们官方下载最新的cesiumjs
<template>
<div id="cesiumContainer">
</div>
</template>
<script>
import smokeImg from './assets/smoke.png'
export default {
name: 'App',
components: {
},
data() {
return {
viewer: null
};
},
created() {
// localStorage.setItem('initMap', true)
},
mounted() {
this.loadMapTest();
this.drawWater();
},
methods: {
loadMapTest() {
let mapOption = {
//地图可进行切换
//高德影像地图
//url:"https://webst04.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
//google地图（国内暂时被封），后续如果开放可直接f12-->network获取服务
//osm矢量地图
//url:"https://b.tile.openstreetmap.org/{z}/{x}/{y}.png",
//mapbox影像地图(token如果过期，请选择其他地图图层)
//url:"https://api.mapbox.com/styles/v1/marsgis/cki0adkar2b0e19mv9tpiewld/tiles/512/{z}/{x}/{y}@2x?access_token=pk.eyJ1IjoibWFyc2dpcyIsImEiOiJja2Fod2xlanIwNjJzMnhvMXBkMnNqcjVpIn0.WnxikCaN2KV_zn9tLZO77A"
//arcgis影像地图
url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"
};
let imgProvider = new Cesium.UrlTemplateImageryProvider(mapOption);
let viewerOption = {
animation: false,//是否创建动画小器件，左下角仪表
baseLayerPicker: false,//是否显示图层选择器
fullscreenButton: false,//是否显示全屏按钮
geocoder: false,//是否显示geocoder小器件，右上角查询按钮
homeButton: false,//是否显示Home按钮
infoBox: false,//是否显示信息框
sceneModePicker: false,//是否显示3D/2D选择器
scene3DOnly: false,//如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
selectionIndicator: false,//是否显示选取指示器组件
timeline: true,//是否显示时间轴
navigationHelpButton: false,//是否显示右上角的帮助按钮
baselLayerPicker: false,// 将图层选择的控件关掉，才能添加其他影像数据
shadows: true,//是否显示背影
shouldAnimate: true,
imageryProvider: imgProvider,
//加载地形
// terrainProvider: new Cesium.CesiumTerrainProvider({
// url: "http://data.marsgis.cn/terrain",
// })
}
// 创建一个Viewer实例
this.viewer = new Cesium.Viewer('cesiumContainer', viewerOption)
},
//绘制水面波浪效果
drawWater() {
setTimeout(() => {
// this.createWaterSystem({ x: 115.33222244478097, y: 29.84743130583497, z: 10 })
this.smoke();
}, 1000)
},
// 创建粒子系统
createWaterSystem(position) {
let gatePosition = Cesium.Cartesian3.fromDegrees(position.x, position.y, position.z);
let hole = this.viewer.entities.add({ position: gatePosition });
let waterParticleSystem = new Cesium.ParticleSystem({
image: smokeImg,
startColor: Cesium.Color.WHITE.withAlpha(0.0),
endColor: Cesium.Color.WHITE.withAlpha(0.65),
startScale: 10,
endScale: 10,
minimumParticleLife: 1.5,
maximumParticleLife: 1.7,
minimumSpeed: 1.5,
maximumSpeed: 2.5,
imageSize: new Cesium.Cartesian2(10, 10),
emissionRate: 20,
emitter: new Cesium.CircleEmitter(20.0),
// emitter: new Cesium.BoxEmitter(new Cesium.Cartesian3(20.0, 5.0, 5.0)),
modelMatrix: this.computeModelMatrix(hole),
emitterModelMatrix: this.computeEmitterModelMatrix(...[65, 0, 0]),
updateCallback: this.updateCallback
// sizeInMeters: true,
});
// 将粒子系统添加到场景中
// console.log(waterParticleSystem);
this.viewer.scene.primitives.add(waterParticleSystem);
// console.log(window.viewer.scene)
},
computeModelMatrix(entity) {
var position = Cesium.Property.getValueOrUndefined(entity.position, Cesium.JulianDate.now());
let modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(position);
// console.log(modelMatrix);
return modelMatrix;
},
// 计算粒子发射器的位置姿态
computeEmitterModelMatrix(heading, pitch, roll) {
// console.log(heading, pitch, roll);
let hpr = Cesium.HeadingPitchRoll.fromDegrees(heading, pitch, roll);
let trs = new Cesium.TranslationRotationScale();
trs.translation = Cesium.Cartesian3.fromElements(0, 0, 0);
trs.rotation = Cesium.Quaternion.fromHeadingPitchRoll(hpr);
let Matrix4 = Cesium.Matrix4.fromTranslationRotationScale(trs);
return Matrix4
},
// 更新粒子运动状态
updateCallback(p, dt) {
// console.log(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
);
}
},
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
