cesium粒子特效

火焰效果如下图所示：

代码如下:

<!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循环对比。比对上则将其隐藏或移除。

猜你喜欢