Cesium创建火焰粒子_前端_web_建站_vue_react_leaflet_arcgis

<!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 type="text/javascript" src="./js/jquery.min.js"></script>
    <script src="./js/tooltip.js"></script>
    <script src="./js/config.js"></script>
    <script type="text/javascript" src="../../Build/Cesium/Cesium.js"></script>
</head>

<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
    <style>
        #toolbar input {
            vertical-align: middle;
            padding-top: 2px;
            padding-bottom: 2px;
        }

        #toolbar .header {
            font-weight: bold;
        }
    </style>
    <div id="cesiumContainer" class="fullSize"></div>
    <div id="loadingOverlay">
        <h1>Loading...</h1>
    </div>
    <div id="toolbar" class="param-container tool-bar">
        风向：
        <select id="options" style="width: 71%">
            <option value="undf"></option>
            <option value="east">东风</option>
            <option value="south">南风</option>
            <option value="west">西风</option>
            <option value="north">北风</option>
        </select><br>
        <a style="color: white">风速：</a><input id="windlevel" type="text" style="width: 112px;margin-left: 4px"><br>
        <button id="bt" type="button" class="button black">确定</button>
    </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 scene = viewer.scene;
            var widget = viewer.cesiumWidget;

            // 折叠参数面板
            $(".params-setting-anchor").click(function () {
                $(".params-setting").toggleClass("params-setting-hide");
            });





            //Set bounds of our simulation time
            // var start = Cesium.JulianDate.fromDate(new Date(2015, 2, 25, 16));
            // var stop = Cesium.JulianDate.addSeconds(start, 500, new Cesium.JulianDate());
            //
            // //Make sure viewer is at the desired time.
            // viewer.clock.startTime = start.clone();
            // viewer.clock.stopTime = stop.clone();
            // viewer.clock.currentTime = start.clone();
            // viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; //Loop at the end
            // viewer.clock.multiplier = 1;
            // viewer.clock.shouldAnimate = true;

            var viewModelfire = {
                emissionRate: 40.0,
                gravity: 1.0,
                minimumParticleLife: 2,
                maximumParticleLife: 3,
                minimumSpeed: 3.0,
                maximumSpeed: 5.0,
                startScale: 5.0,
                endScale: 6,
                particleSize: 2,
                windSpeed: 10,
                windType: "undf",
                windDirection: [{ type: "west", canshu: new Cesium.Cartesian3(1, 0, 0), x: 1.0, y: 0, z: 0 },//x为正：向西； x为负：向东； y为正：向南向上； y为负：向北向下； z为正：向比向上； z为负：向南向下
                { type: "east", canshu: new Cesium.Cartesian3(-1, 0, 0), x: -1.0, y: 0, z: 0 },
                { type: "south", canshu: new Cesium.Cartesian3(0, 1, 0), x: 0, y: 1.0, z: 0 },
                { type: "north", canshu: new Cesium.Cartesian3(0, -1, 0), x: 0, y: -1.0, z: 0 },
                { type: "undf", canshu: new Cesium.Cartesian3(0, 0, 0), x: 0, y: 0, z: 0 }]
            };


            var viewModelsmoke = {
                emissionRate: 40.0,
                gravity: 2.0,
                minimumParticleLife: 6,
                maximumParticleLife: 7,
                minimumSpeed: 9,
                maximumSpeed: 9.5,
                startScale: 2,
                endScale: 10,
                particleSize: 6.5,
                windSpeed: 10,
                windType: "undf",
                windDirection: [{ type: "west", canshu: new Cesium.Cartesian3(1, 0, 0), x: 1.0, y: 0, z: 0 },//x为正：向西； x为负：向东； y为正：向南向上； y为负：向北向下； z为正：向比向上； z为负：向南向下
                { type: "east", canshu: new Cesium.Cartesian3(-1, 0, 0), x: -1.0, y: 0, z: 0 },
                { type: "south", canshu: new Cesium.Cartesian3(0, 1, 0), x: 0, y: 1.0, z: 0 },
                { type: "north", canshu: new Cesium.Cartesian3(0, -1, 0), x: 0, y: -1.0, z: 0 },
                { type: "undf", canshu: new Cesium.Cartesian3(0, 0, 0), x: 0, y: 0, z: 0 }]
            };

            var promise = scene.open(URL_CONFIG.SCENE_CBD);
            Cesium.when(promise, function (layer) {
                for (var i = 0; i < layer.length; i++) {
                    layer[i].selectEnabled = false
                }
                scene.camera.setView({
                    destination: new Cesium.Cartesian3.fromDegrees(116.45509750748982, 39.90661075211756, 121.84466850338113),
                    orientation: {
                        heading: 6.046736017734375,
                        pitch: -0.2777089418628558,
                        roll: 6.283185307179586
                    }
                });
                smoke();
                fire();
            }, function () {
                var title = '加载SCP失败，请检查网络连接状态或者url地址是否正确？';
                widget.showErrorPanel(title, undefined, e);
            });

            function fire() {

                var pos1 = Cesium.Cartesian3.fromDegrees(120.46611225725592, 32.00063545650358,0);
                var entity = viewer.entities.add({
                    position: pos1,
                });
                var particleSystem2 = scene.primitives.add(new Cesium.ParticleSystem({
                    image: './images/fire.png',
                    startColor: new Cesium.Color(1, 1, 1, 1),
                    endColor: new Cesium.Color(0.5, 0, 0, 0),
                    startScale: viewModelfire.startScale,
                    endScale: viewModelfire.endScale,
                    minimumParticleLife: viewModelfire.minimumParticleLife,
                    maximumParticleLife: viewModelfire.maximumParticleLife,
                    minimumSpeed: viewModelfire.minimumSpeed,
                    maximumSpeed: viewModelfire.maximumSpeed,
                    imageSize: new Cesium.Cartesian2(viewModelfire.particleSize, viewModelfire.particleSize),
                    emissionRate: viewModelfire.emissionRate,
                    lifetime: 6.0,
                    //循环是否开启
                    updateCallback: applyForce,  //设置作用力
                    loop: true,
                    emitter: new Cesium.ConeEmitter(Cesium.Math.toRadians(45.0)),
                    sizeInMeters: true,
                }));

                viewer.scene.preUpdate.addEventListener(function (scene, time) {
                    particleSystem2.modelMatrix = computeModelMatrix(entity, time);
                    particleSystem2.emitterModelMatrix = computeEmitterModelMatrix();
                });

                function computeModelMatrix(entity, time) {
                    return entity.computeModelMatrix(time, new Cesium.Matrix4());
                }

                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(0, 0, 0, hpr);
                    trs.translation = Cesium.Cartesian3.fromElements(0, 0, 0, translation);
                    trs.rotation = Cesium.Quaternion.fromHeadingPitchRoll(hpr, rotation);
                    return Cesium.Matrix4.fromTranslationRotationScale(trs, emitterModelMatrix);
                }


                //重力的方向
                var gravityScratch = new Cesium.Cartesian3();

                //风向
                //控制风向的方法？？？
                //x为正：向西； x为负：向东； y为正：向南向上； y为负：向北向下； z为正：向比向上； z为负：向南向下
                var windDirectionForFire = new Cesium.Cartesian3(1, 0.5, 0);
                //风力  对应风级 每秒多少米
                var windSpeed = 5;
                //风向和重力方向共同作用的结果
                var endDirection = new Cesium.Cartesian3();

                function applyForce(p, dt) {

                    var canshu_x, canshu_y, canshu_z;
                    var windType = viewModelfire.windType;
                    for (var i = 0; i < viewModelfire.windDirection.length; i++) {
                        if (viewModelfire.windDirection[i].type === windType) {
                            windDirectionForFire = viewModelfire.windDirection[i].canshu;
                            canshu_x = viewModelfire.windDirection[i].x;
                            canshu_y = viewModelfire.windDirection[i].y;
                            canshu_z = viewModelfire.windDirection[i].z;
                            break
                        }
                    }
                    windDirectionForFire.x = canshu_x;
                    windDirectionForFire.y = canshu_y;
                    windDirectionForFire.z = canshu_z;


                    // We need to compute a local up vector for each particle in geocentric space.
                    var position = p.position;
                    //console.log(viewModel.windspeed);

                    Cesium.Cartesian3.normalize(position, gravityScratch);
                    //判断windDirectionForFire是否为(0,0,0)，以决定是否执行Cesium.Cartesian3.normalize(windDirection, windDirection);函数
                    if (!Cesium.Cartesian3.equalsEpsilon(windDirectionForFire, new Cesium.Cartesian3(0, 0, 0), 0)) {
                        Cesium.Cartesian3.normalize(windDirectionForFire, windDirectionForFire);
                    }

                    Cesium.Cartesian3.multiplyByScalar(gravityScratch, viewModelfire.gravity * dt, gravityScratch);
                    Cesium.Cartesian3.multiplyByScalar(windDirectionForFire, viewModelfire.windSpeed * dt * 0.3, windDirectionForFire);

                    endDirection = Cesium.Cartesian3.add(gravityScratch, windDirectionForFire, endDirection);

                    p.velocity = Cesium.Cartesian3.add(p.velocity, endDirection, p.velocity);

                }



            }


            function smoke() {
                var pos1 = Cesium.Cartesian3.fromDegrees(116.45435918469913, 39.90935742145429, 150.16445509515142);
                var entity = viewer.entities.add({
                    position: pos1,
                });
                var particleSystem1 = scene.primitives.add(new Cesium.ParticleSystem({
                    image: './images/smoke03.png',
                    startColor: new Cesium.Color(1, 1, 1, 1),
                    endColor: new Cesium.Color(0.5, 0, 0, 0),
                    startScale: viewModelsmoke.startScale,
                    endScale: viewModelsmoke.endScale,
                    minimumParticleLife: viewModelsmoke.minimumParticleLife,
                    maximumParticleLife: viewModelsmoke.maximumParticleLife,
                    minimumSpeed: viewModelsmoke.minimumSpeed,
                    maximumSpeed: viewModelsmoke.maximumSpeed,
                    imageSize: new Cesium.Cartesian2(viewModelsmoke.particleSize, viewModelsmoke.particleSize),
                    emissionRate: viewModelsmoke.emissionRate,
                    lifetime: 6.0,
                    //循环是否开启
                    updateCallback: applyForce,  //设置作用力
                    loop: true,
                    emitter: new Cesium.ConeEmitter(Cesium.Math.toRadians(45.0)),
                    sizeInMeters: true,
                }));

                viewer.scene.preUpdate.addEventListener(function (scene, time) {
                    particleSystem1.modelMatrix = computeModelMatrix(entity, time);
                    particleSystem1.emitterModelMatrix = computeEmitterModelMatrix();
                });

                function computeModelMatrix(entity, time) {
                    return entity.computeModelMatrix(time, new Cesium.Matrix4());
                }

                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(0, 0, 0, hpr);
                    trs.translation = Cesium.Cartesian3.fromElements(0, 0, 0, translation);
                    trs.rotation = Cesium.Quaternion.fromHeadingPitchRoll(hpr, rotation);
                    return Cesium.Matrix4.fromTranslationRotationScale(trs, emitterModelMatrix);
                }


                //重力的方向
                var gravityScratch = new Cesium.Cartesian3();

                //风向
                //控制风向的方法？？？
                //x为正：向西； x为负：向东； y为正：向南向上； y为负：向北向下； z为正：向比向上； z为负：向南向下
                var windDirectionForSmoke = new Cesium.Cartesian3(1, 0.5, 0);
                //风力  对应风级 每秒多少米
                var windSpeed = 5;
                //风向和重力方向共同作用的结果
                var endDirection = new Cesium.Cartesian3();

                function applyForce(p, dt) {

                    var canshu_x, canshu_y, canshu_z;
                    var windType = viewModelsmoke.windType;
                    for (var i = 0; i < viewModelsmoke.windDirection.length; i++) {
                        if (viewModelsmoke.windDirection[i].type === windType) {
                            windDirectionForSmoke = viewModelsmoke.windDirection[i].canshu;
                            canshu_x = viewModelsmoke.windDirection[i].x;
                            canshu_y = viewModelsmoke.windDirection[i].y;
                            canshu_z = viewModelsmoke.windDirection[i].z;
                            break
                        }
                    }
                    windDirectionForSmoke.x = canshu_x;
                    windDirectionForSmoke.y = canshu_y;
                    windDirectionForSmoke.z = canshu_z;


                    // We need to compute a local up vector for each particle in geocentric space.
                    var position = p.position;
                    //console.log(viewModel.windspeed);

                    Cesium.Cartesian3.normalize(position, gravityScratch);
                    //判断windDirectionForFire是否为(0,0,0)，以决定是否执行Cesium.Cartesian3.normalize(windDirection, windDirection);函数
                    if (!Cesium.Cartesian3.equalsEpsilon(windDirectionForSmoke, new Cesium.Cartesian3(0, 0, 0), 0)) {
                        Cesium.Cartesian3.normalize(windDirectionForSmoke, windDirectionForSmoke);
                    }

                    Cesium.Cartesian3.multiplyByScalar(gravityScratch, viewModelfire.gravity * dt, gravityScratch);
                    Cesium.Cartesian3.multiplyByScalar(windDirectionForSmoke, viewModelfire.windSpeed * dt, windDirectionForSmoke);

                    endDirection = Cesium.Cartesian3.add(gravityScratch, windDirectionForSmoke, endDirection);

                    p.velocity = Cesium.Cartesian3.add(p.velocity, endDirection, p.velocity);

                }
            }






            $('#bt').click(function () {

                var windtype = $('#options option:selected').val();
                var windspeed = $('#windlevel').val();
                viewModelfire.windSpeed = windspeed;
                viewModelfire.windType = windtype;
                viewModelsmoke.windSpeed = windspeed;
                viewModelsmoke.windType = windtype;

            });
            //









            $("#toolbar").show();
            $('#loadingbar').remove();
        }
        if (typeof Cesium !== 'undefined') {
            window.startupCalled = true;
            onload(Cesium);
        }
    </script>
</body>

</html>
参考文章：https://blog.csdn.net/u013772845/article/details/90446000
下载地址：
smoke.zip