火焰效果如下图所示：
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>火焰</title>
<link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<link href="./css/pretty.css" rel="stylesheet">
<script src="./js/jquery.min.js"></script>
<script src="./js/Sandcastle-header.js"></script>
<script type="text/javascript" src="./js/require.min.js" data-main="js/main"></script>
</head>
<body>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id='loadingbar' class="spinner">
<div class="spinner-container container1">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="spinner-container container2">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="spinner-container container3">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
</div>
<script>
function onload(Cesium) {
var viewer = new Cesium.Viewer('cesiumContainer');
var viewModel = {
rate : 5.0,
gravity : 0.0,
minimumLife : 1.0,
maximumLife : 1.0,
minimumSpeed : 5.0,
maximumSpeed : 5.0,
startScale : 1.0,
endScale : 4.0,
particleSize : 20.0,
transX : 2.5,
transY : 4.0,
transZ : 1.0,
heading : 0.0,
pitch : 0.0,
roll : 0.0,
fly : false,
spin : false,
show : true
};
var entityPosition = new Cesium.Cartesian3();
var entityOrientation = new Cesium.Quaternion();
var rotationMatrix = new Cesium.Matrix3();
var modelMatrix = new Cesium.Matrix4();
function computeModelMatrix(entity, time) {
var position = Cesium.Property.getValueOrUndefined(entity.position, time, entityPosition);
if (!Cesium.defined(position)) {
return undefined;
}
var orientation = Cesium.Property.getValueOrUndefined(entity.orientation, time, entityOrientation);
if (!Cesium.defined(orientation)) {
modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(position, undefined, modelMatrix);
} else {
modelMatrix = Cesium.Matrix4.fromRotationTranslation(Cesium.Matrix3.fromQuaternion(orientation, rotationMatrix), position, modelMatrix);
}
return modelMatrix;
}
var emitterModelMatrix = new Cesium.Matrix4();
var translation = new Cesium.Cartesian3();
var rotation = new Cesium.Quaternion();
var hpr = new Cesium.HeadingPitchRoll();
var trs = new Cesium.TranslationRotationScale();
//计算偏移
function computeEmitterModelMatrix() {
hpr = Cesium.HeadingPitchRoll.fromDegrees(viewModel.heading, viewModel.pitch, viewModel.roll, hpr);
trs.translation = Cesium.Cartesian3.fromElements(viewModel.transX, viewModel.transY, viewModel.transZ, translation);
trs.rotation = Cesium.Quaternion.fromHeadingPitchRoll(hpr, rotation);
return Cesium.Matrix4.fromTranslationRotationScale(trs, emitterModelMatrix);
}
//Compute the entity position property.
var staticPosition = Cesium.Cartesian3.fromDegrees(-112.110693, 36.0994841, 0);
var entity = viewer.entities.add({
//Load the Cesium plane model to represent the entity
model : {
uri : './SampleData/models/Cesium_Ground.gltf',
minimumPixelSize : 64
},
position : staticPosition
});
// viewer.trackedEntity = entity;
// var staticPosition = Cesium.Cartesian3.fromDegrees(-112.110693, 36.0994841, 1000);
// var entity = viewer.entities.add({
// position : staticPosition
// });
// viewer.trackedEntity = entity;
var scene = viewer.scene;
var particleSystem = scene.primitives.add(new Cesium.ParticleSystem({
image : './images/fire.png',
startColor : Cesium.Color.RED.withAlpha(0.7),
endColor : Cesium.Color.YELLOW.withAlpha(0.3),
startScale : viewModel.startScale,
endScale : viewModel.endScale,
minimumLife : viewModel.minimumLife,
maximumLife : viewModel.maximumLife,
minimumSpeed : viewModel.minimumSpeed,
maximumSpeed : viewModel.maximumSpeed,
minimumWidth : viewModel.particleSize,
minimumHeight : viewModel.particleSize,
maximumWidth : viewModel.particleSize,
maximumHeight : viewModel.particleSize,
// Particles per second.
rate : viewModel.rate,
bursts : [
new Cesium.ParticleBurst({time : 5.0, minimum : 300, maximum : 500}),
new Cesium.ParticleBurst({time : 10.0, minimum : 50, maximum : 100}),
new Cesium.ParticleBurst({time : 15.0, minimum : 200, maximum : 300})
],
lifeTime : 16.0,
emitter : new Cesium.CircleEmitter(0.5),
modelMatrix: computeModelMatrix(entity, Cesium.JulianDate.now())
// emitterModelMatrix : computeEmitterModelMatrix()
}));
$('#loadingbar').remove();
}
</script>
</body>
</html>参考博客：
Cesium官方教程9--粒子系统：https://www.cnblogs.com/cesium1/p/10063053.html
Cesium官方教程10--高级粒子特效：https://www.jianshu.com/p/339c3685ba00
cesium粒子系统-火灾模拟：https://blog.csdn.net/A873054267/article/details/86251663
cesium粒子特效参数说明：https://blog.csdn.net/qq_18144905/article/details/80915263
Cesiumjs – How to remove primitives from scene ：
http://www.phpmind.com/blog/2015/11/cesiumjs-how-to-remove-primitives-from-scene/
拓展：点击粒子后，删除粒子效果。通过获得点击粒子的_textureAtlasGUID属性和scene.primitives的_textureAtlasGUID循环对比。比对上则将其隐藏或移除。
