cesium粒子系统-火灾模拟

最新推荐文章于 2024-04-28 00:25:13 发布

A873054267

最新推荐文章于 2024-04-28 00:25:13 发布

阅读量8.3k

点赞数 5

分类专栏： cesium 文章标签： cesium 火灾模拟粒子系统

本文链接：https://blog.csdn.net/A873054267/article/details/86251663

版权

cesium 专栏收录该内容

78 篇文章 86 订阅

订阅专栏

网上有很多教程，但是基本都是写了一半，某些代码丢失，对于初学者来说无法改出效果。因此经各人成功试验后精简了代码，方便初学者理解。

实现思路：

1 火灾得有一个发生地，那么可以理解为粒子系统的发射源。故而我们首先应该定义一个发射源实体。

//粒子系统的起点，发射源
var staticPosition = Cesium.Cartesian3.fromDegrees(116.34516786934411,39.99753297677145,3.614538127977399);
var entity44 = viewer.entities.add({
    position : staticPosition
});

第二步：发射源已经有了，那么我们需要用cesium的粒子系统来将火星发射出来，那么这里面就涉及到很多问题。

火的颜色，火蔓延的快慢，火蔓延的方向，等等一系列属性，cesium给我们提供了很多属性。

可以看出粒子系统其实和其他的模型什么的没有任何区别，都是以primitive方式添加进入场景。

那么下面一步步解读需要的参数

viewer.scene.primitives.add(new Cesium.ParticleSystem({
    image : './Apps/SampleData/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(55, 55),
    // Particles per second.
    emissionRate : 4,
    lifetime : 160.0,
//cesium内置的发射器，圆形发射器，因此参数是一个半径值
//还有锥形发射器，new Cesium.ConeEmitter(Cesium.Math.toRadians(45.0))
//长方形发射器，new Cesium.BoxEmitter(new Cesium.Cartesian3(1.0, 1.0, 1.0))
//半球发射器，new Cesium.SphereEmitter(0.5)
    emitter : new Cesium.CircleEmitter(5.0),
//将粒子系统从模型转换为世界坐标的4x4变换矩阵
    modelMatrix : computeModelMatrix(entity44),
//在粒子系统局部坐标系中变换粒子系统发射器的4x4变换矩阵。
    emitterModelMatrix : computeEmitterModelMatrix()

}));

再来看看这两个关键的转换函数到底是什么东西呢，不想去研究了，就是cesium提供给我们的一个接口。其实感觉不应该有这个接口的，entity已经是世界坐标的了，这根本没有传入任何有用的信息。如果以我理解，还是理解为粒子系统的发射源位置设置吧。其实应该封装为entity就可以了

function computeModelMatrix(entity) {
    var position = Cesium.Property.getValueOrUndefined(entity.position);
    let modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(position);
    return modelMatrix;
}

//这个相对容易理解一些，其实就是粒子散播的形态，其实状态，翻转角度等等

function computeEmitterModelMatrix() {
   let  hpr = Cesium.HeadingPitchRoll.fromDegrees(0, 0, 0);
    let trs = new Cesium.TranslationRotationScale();
    trs.translation = Cesium.Cartesian3.fromElements(2.5,4, 1);
    trs.rotation = Cesium.Quaternion.fromHeadingPitchRoll(hpr);
    let result=Cesium.Matrix4.fromTranslationRotationScale(trs);
    return result
}

可以看到很多文章采用了viewmodel的形式，实际上就是将这些参数统一管理了。

最后上一张效果图吧

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Use correct character set. -->
    <meta charset="utf-8">
    <!-- Tell IE to use the latest, best version. -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>Hello World!</title>
    <script src="./Build/Cesium/Cesium.js"></script>
    <style>
        @import url(./Build/Cesium/Widgets/widgets.css);
        html, body, #cesiumContainer {
            width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
        }

    </style>
</head>
<body>
<div id="cesiumContainer"></div>

<script>
    Cesium.Ion.defaultAccessToken='你的token';
    var viewer = new Cesium.Viewer('cesiumContainer',{
        imageryProvider : Cesium.createOpenStreetMapImageryProvider({
            url : 'https://a.tile.openstreetmap.org/'
        }),
        showRenderLoopErrors : false,
        shouldAnimate : true
    });

        //粒子系统的起点，发射源
        var staticPosition = Cesium.Cartesian3.fromDegrees(116.34516786934411,39.99753297677145,3.614538127977399);
        var entity44 = viewer.entities.add({
            position : staticPosition
        });
        function computeModelMatrix(entity, time) {
            var position = Cesium.Property.getValueOrUndefined(entity.position);
            let modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(position);
            return modelMatrix;
        }
        function computeEmitterModelMatrix() {
           let  hpr = Cesium.HeadingPitchRoll.fromDegrees(0, 0, 0);
            let trs = new Cesium.TranslationRotationScale();
            trs.translation = Cesium.Cartesian3.fromElements(2.5,4, 1);
            trs.rotation = Cesium.Quaternion.fromHeadingPitchRoll(hpr);
            let result=Cesium.Matrix4.fromTranslationRotationScale(trs);
            return result
        }
        viewer.scene.primitives.add(new Cesium.ParticleSystem({
            image : './Apps/SampleData/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(55, 55),
            // Particles per second.
            emissionRate : 4,
            lifetime : 160.0,
            emitter : new Cesium.CircleEmitter(5.0),
            modelMatrix : computeModelMatrix(entity44, Cesium.JulianDate.now()),
            emitterModelMatrix : computeEmitterModelMatrix()

        }));
    viewer.camera.setView({
        destination : Cesium.Cartesian3.fromDegrees(116.34485552299206, 39.99754814959118, 50.0)
    });
    var czml1 = [{
        "id" : "document",
        "name" : "CZML Path",
        "version" : "1.0"
    },
        {
            "id" : "path1",
            "name" : "室内巡游",
            "availability" : "2012-08-04T10:00:00Z/2012-08-04T10:01:00Z",
            "model":{
                id:'man',
                gltf:'./Apps/SampleData/models/CesiumMan/Cesium_Man.glb',
                scale:1.5
            },
            "position" : {
                "epoch" : "2012-08-04T10:00:04Z",
                "cartographicDegrees" :[0, 116.34516622115855, 39.99754559861802, 1.4358370822487558, 0.5, 116.3451515714621, 39.99754316187817, 1.4472761189415653, 1, 116.34514418262488, 39.99754463699455, 1.3847979138207984, 1.5, 116.34512893231951, 39.99755386861538, 1.3994720156905107, 2, 116.34511359627606, 39.99756441424462, 1.2797107255483013, 2.5, 116.34509375877481, 39.997571801736534, 1.2819555762065262, 3, 116.34506886933903, 39.99757304406058, 1.2819942546426253, 3.5, 116.34504607691461, 39.997572870502665, 1.281520021636971, 4, 116.34502326613281, 39.99757292219763, 1.2810785562022367, 4.5, 116.34499628504915, 39.997572204988046, 1.2804746492914671, 5, 116.34497163407586, 39.99757186226559, 1.2796624797776481, 5.5, 116.34495023182379, 39.997576375532404, 1.2808647144607634, 6, 116.34493716081708, 39.997593688718844, 1.3231141924809213, 6.5, 116.3449378710588, 39.99761777443204, 1.331892344717667, 7, 116.34493974694192, 39.9976580456965, 1.3466267356243455, 7.5, 116.34494890457218, 39.99768634703769, 1.3571063670200398, 8, 116.34497400438633, 39.99770033921738, 1.3621076296615493, 8.5, 116.34499595167571, 39.99771140577055, 1.3344925458008186, 9, 116.34500250680549, 39.997740672915135, 1.340301861113734, 9.5, 116.34500577191483, 39.99777412171119, 1.3501524306893025, 10, 116.34500410433891, 39.99780840648532, 1.363977252653577, 10.5, 116.34499951328665, 39.997842788488185, 1.3800212138865176, 11, 116.34497872471779, 39.997853343165204, 1.399458173912945, 11.5, 116.34494795951751, 39.997860556787764, 1.519311251743494,12.5,116.34490331164557,39.99786244605072,1.5199583709717506,
                    13,116.34488130828254,39.99786607129636,1.5199588206613734,
                    13.5,116.34487001026608,39.99786800718744,1.5197042210108793,
                    14,116.34484588663742,39.99787194842681,1.0066577813905804,
                    14.5,116.34482087809651,39.99787257625113,1.0055455803132909]
            }
        },
        {
            "id" : "path2",
            "name" : "路径2",
            "availability" : "2012-08-04T10:00:00Z/2012-08-04T10:01:00Z",
            "model":{
                id:'man',
                gltf:'./Apps/SampleData/models/CesiumMan/Cesium_Man.glb',
                scale:1.5
            },
            "position" : {
                "epoch" : "2012-08-04T10:00:06Z",
                "cartographicDegrees" :[0, 116.34517877740605, 39.997500266954845, 1.3329442046223556, 0.5, 116.34515287323391, 39.99750657792597, 1.3322001513478716, 1, 116.34513636672115, 39.99751302876223, 1.3368451929771314, 1.5, 116.34512554998938, 39.9975226472686, 1.3380447275943368, 2, 116.34512558221812, 39.99753825840927, 1.3978790839914457, 2.5, 116.34511454894705, 39.997559828183384, 1.4113770289306002, 3, 116.3450999523243, 39.99757095596699, 1.2828717251091106, 3.5, 116.34505543944223, 39.99757157774801, 1.2789160798592716, 4, 116.34501055002879, 39.997570332428445, 1.2807252892965244, 4.5, 116.34495881749777, 39.99757282358187, 1.2822568654919801, 5, 116.34494150587064, 39.997587611344294, 1.3232764134398836, 5.5, 116.34493675828212, 39.99761750439082, 1.3288259357216794, 6, 116.3449362440613, 39.997648143402124, 1.3454676109441734, 6.5, 116.34494327799642, 39.99767771540586, 1.3530581192156492, 7, 116.34497659793601, 39.9976991262085, 1.3609197982645296, 7.5, 116.34498998681592, 39.9977520509213, 1.355097399254095, 8, 116.34499644681232, 39.99780589095795, 1.3675342317833608, 8.5, 116.3449870352594, 39.99784321877945, 1.3872611481333186, 9, 116.34494738827755, 39.9978583616259, 1.518215678045846, 9.5, 116.34491933458501, 39.997866367883326, 1.523811537824287, 10, 116.34488334878459, 39.99786855199748, 1.5209548035477818, 10.5, 116.34486983170088, 39.997868318237124, 1.521047365264118, 11, 116.3448513758715, 39.997874191968535, 1.0038824176617733, 11.5, 116.34481112249772, 39.99787134564725, 0.9123952298999893]
            }
        },
        {
            "id" : "path3",
            "name" : "路径3",
            "availability" : "2012-08-04T10:00:00Z/2012-08-04T10:02:00Z",
            "model":{
                id:'man',
                gltf:'./Apps/SampleData/models/CesiumMan/Cesium_Man.glb',
                scale:1.5
            },
            "position" : {
                "epoch" : "2012-08-04T10:00:05Z",
                "cartographicDegrees" :[0, 116.34517877740605, 39.997500266954845, 1.3329442046223556, 0.5, 116.34515287323391, 39.99750657792597, 1.3322001513478716, 1, 116.34513636672115, 39.99751302876223, 1.3368451929771314, 1.5, 116.34512554998938, 39.9975226472686, 1.3380447275943368, 2, 116.34512558221812, 39.99753825840927, 1.3978790839914457, 2.5, 116.34511454894705, 39.997559828183384, 1.4113770289306002, 3, 116.3450999523243, 39.99757095596699, 1.2828717251091106, 3.5, 116.34505543944223, 39.99757157774801, 1.2789160798592716, 4, 116.34501055002879, 39.997570332428445, 1.2807252892965244, 4.5, 116.34495881749777, 39.99757282358187, 1.2822568654919801, 5, 116.34494150587064, 39.997587611344294, 1.3232764134398836, 5.5, 116.34493675828212, 39.99761750439082, 1.3288259357216794, 6, 116.3449362440613, 39.997648143402124, 1.3454676109441734, 6.5, 116.34494327799642, 39.99767771540586, 1.3530581192156492, 7, 116.34497659793601, 39.9976991262085, 1.3609197982645296, 7.5, 116.34498998681592, 39.9977520509213, 1.355097399254095, 8, 116.34499644681232, 39.99780589095795, 1.3675342317833608, 8.5, 116.3449870352594, 39.99784321877945, 1.3872611481333186, 9, 116.34494738827755, 39.9978583616259, 1.518215678045846, 9.5, 116.34491933458501, 39.997866367883326, 1.523811537824287, 10, 116.34488334878459, 39.99786855199748, 1.5209548035477818, 10.5, 116.34486983170088, 39.997868318237124, 1.521047365264118, 11, 116.3448513758715, 39.997874191968535, 1.0038824176617733, 11.5, 116.34481112249772, 39.99787134564725, 0.9123952298999893]
            }
        },
        {
            "id" : "path4",
            "name" : "路径4",
            "availability" : "2012-08-04T10:00:00Z/2012-08-04T10:02:00Z",
            "model":{
                id:'man',
                gltf:'./Apps/SampleData/models/CesiumMan/Cesium_Man.glb',
                scale:1.5
            },
            "position" : {
               "epoch" : "2012-08-04T10:00:09Z",
                "cartographicDegrees" :[0, 116.34485552299206, 39.99754814959118, 1.2649494387618647, 0.5, 116.34487987654865, 39.997561445767246, 1.2782573881272106, 1, 116.34489047320696, 39.997576762439884, 1.2817872329938123, 1.5, 116.34490049632792, 39.997591561392156, 1.2872051795982384, 2, 116.34490286739292, 39.99759878219847, 1.2898418821433957, 2.5, 116.34491820720476, 39.99761395701384, 1.334398941482275, 3, 116.34493903549595, 39.99763565333379, 1.3407760193662634, 3.5, 116.34494156480143, 39.99765791689267, 1.3423920309634636, 4, 116.344959035242, 39.9976798462412, 1.3494385533963487, 4.5, 116.34498504014508, 39.9977000340487, 1.3401002760679508, 5, 116.3449931259383, 39.997732087112574, 1.34553345521329, 5.5, 116.34499692822102, 39.99775980138847, 1.3521305287565226, 6, 116.34499669751732, 39.99779199998451, 1.3629069850229656, 6.5, 116.34499961574662, 39.99782256744425, 1.3683532993986944, 7, 116.34499203993688, 39.997846465993945, 1.3846723950054465, 7.5, 116.34497468916209, 39.99785896855107, 1.3992971426774892, 8, 116.34494260129159, 39.99786434457999, 1.5152662800730983, 8.5, 116.34491872288267, 39.99786893337762, 1.5218805654695076, 9, 116.34489295568162, 39.99786938048424, 1.526005265310128, 9.5, 116.34487243018098, 39.997872759283524, 1.5232993341996783, 10, 116.34483936222412, 39.997878422104655, 1.0048479994147639, 10.5, 116.34481073513723, 39.9978819523145, 0.9196376439098137]
            }
        },
        {
            "id" : "path5",
            "name" : "路径5",
            "availability" : "2012-08-04T10:00:00Z/2012-08-04T10:02:00Z",
            "model":{
                id:'man',
                gltf:'./Apps/SampleData/models/CesiumMan/Cesium_Man.glb',
                scale:1.5
            },
            "position" : {
               "epoch" : "2012-08-04T10:00:04Z",
                "cartographicDegrees" :[0, 116.34513183506888, 39.99763888016214, 1.4320775058351793, 0.5, 116.34511206604893, 39.997628334722414, 1.4323765873535759, 1, 116.34508911273538, 39.99761460604701, 1.4231310093084715, 1.5, 116.34506957377029, 39.997605075496715, 1.4153862155135397, 2, 116.34505680288856, 39.997590690292135, 1.4186323718053022, 2.5, 116.34504962284348, 39.997572152154895, 1.2818782663349486, 3, 116.34501041191497, 39.99757213827308, 1.279196542129951, 3.5, 116.34496198834248, 39.99757301131938, 1.2788279435997236, 4, 116.34494200853896, 39.99759245920989, 1.3232797282903137, 4.5, 116.34494256218913, 39.997642147800526, 1.3407027417698631, 5, 116.34494630389732, 39.99768165606101, 1.3564869053822615, 5.5, 116.34499383744708, 39.99771847119645, 1.3389726178897765, 6, 116.34500405146665, 39.997777919716995, 1.353108192123541, 6.5, 116.34500071389246, 39.99782338852011, 1.3729830173656825, 7, 116.34497304750637, 39.99784867830319, 1.4014828028883624, 7.5, 116.34493633161055, 39.99786370128853, 1.520850566444909, 8, 116.3449154157496, 39.99786517176936, 1.5213682569419988, 8.5, 116.34488411265775, 39.997859961533685, 1.5173380897827478, 9, 116.3448696460885, 39.99785868530527, 1.5180646654187768, 9.5, 116.34482966656012, 39.99785770512394, 0.9975104194861178]
            }
        }
    ];
    viewer.dataSources.add(Cesium.CzmlDataSource.load(czml1)).then(function(ds){
        var entities = ds.entities.values;
        for(var i=0;i<entities.length;i++){
            var s = entities[i];
            s.orientation = new  Cesium.VelocityOrientationProperty(s.position);
        }
    })


</script>


</body>
<script ></script>
</html>

A873054267

关注

5
点赞
踩
41

收藏

觉得还不错? 一键收藏
13
评论
cesium粒子系统-火灾模拟

网上有很多教程，但是基本都是写了一半，某些代码丢失，对于初学者来说无法改出效果。因此经各人成功试验后精简了代码，方便初学者理解。实现思路：1 火灾得有一个发生地，那么可以理解为粒子系统的发射源。故而我们首先应该定义一个发射源实体。//粒子系统的起点，发射源var staticPosition = Cesium.Cartesian3.fromDegrees(116.34516786...
复制链接

扫一扫

专栏目录