粒子火焰特效

js引用代码

//设定火灾的坐标
    var particleSystem;
    function addfire(position) {
        //    viewer.camera.zoomIn(1000000);  114.72981, 23.706387
     /*     var staticPosition=staticPositions; 114.72749099157829, 23.7058309496897708, 51*/
        viewer.entities.removeById('uniqueId');
        var staticPosition = Cesium.Cartesian3.fromDegrees(114.72947391009367,23.705717414432744, 51);//静止的位置，火焰的位置
        viewer.camera.flyTo({ // 精确定位
               destination : new Cesium.Cartesian3.fromDegrees(114.72947391009367,23.705717414432744, 151),
//               orientation : {
//                   heading: 2.36745498231085,
//                   pitch: -1.52538971696467,
//                   roll:0.0012112433713417485,
//                  //2.00745498231085,-1.5038971696467,0.0012112433713417485
//             }
        });
        var credit=viewer.scene.frameState.creditDisplay;
        $("#toolbarfire").show();
         //Set the random number seed for consistent results.
        var scene = viewer.scene;  
        viewer.entities.removeById("addfire");
        scene.primitives.remove(particleSystem);
        Cesium.Math.setRandomNumberSeed(3);

         //Set bounds of our simulation time
         var start = Cesium.JulianDate.fromDate(new Date(2015, 2, 25, 16));
         var stop = Cesium.JulianDate.addSeconds(start, 360, 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; 
         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
         };

         Cesium.knockout.track(viewModel);
         var toolbar = document.getElementById('toolbarfire');
         Cesium.knockout.cleanNode(toolbar);
         Cesium.knockout.applyBindings(viewModel, toolbar);

         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);
         }

         //Generate a random circular pattern with varying heights.
         function computeCirclularFlight(lon, lat, radius) {
             var property = new Cesium.SampledPositionProperty();
             for (var i = 0; i <= 360; i += 45) {
                 var radians = Cesium.Math.toRadians(i);
                 var time = Cesium.JulianDate.addSeconds(start, i, new Cesium.JulianDate());
                 var position = Cesium.Cartesian3.fromDegrees(lon + (radius * 1.5 * Math.cos(radians)), lat + (radius * Math.sin(radians)), Cesium.Math.nextRandomNumber() * 500 + 1750);
                 property.addSample(time, position);
             }
             return property;
         }

         //计算模型随时间变化的位置
         var circularPosition = computeCirclularFlight(113.95662405441563, 22.773078356865265, 0.03);
         
     /*    for(var i=0,i<5,i++){*/
            var entity = viewer.entities.add({ 
                 //Set the entity availability to the same interval as the simulation time.
                 availability : new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
                     start : start,
                     stop : stop
                 })]),
                 position : staticPosition,
                id : 'addfire'
             });
     /*    }*/
         // viewer.trackedEntity = entity; //添加实体以实体为中心点
            
           particleSystem = scene.primitives.add(new Cesium.ParticleSystem({
             image :'/Prison3D/imges/fire.png', ///Prison3D/WebContent/imges/fire.png

             startColor : Cesium.Color.RED.withAlpha(0.7),
             endColor : Cesium.Color.YELLOW.withAlpha(0.6),

             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 :  0.8, //每个粒子的生存时间
            emitter : new Cesium.CircleEmitter(0.5), 
         /*   emitter :   new Cesium.ConeEmitter(Cesium.Math.toRadians(45.0)),*/
             emitterModelMatrix : computeEmitterModelMatrix(),
             forces : [applyGravity]
         }));

         var gravityScratch = new Cesium.Cartesian3();

         //重力效果
         function applyGravity(p, dt) {
             // We need to compute a local up vector for each particle in geocentric space.
             var position = p.position;
             Cesium.Cartesian3.normalize(position, gravityScratch);
             Cesium.Cartesian3.multiplyByScalar(gravityScratch, viewModel.gravity * dt, gravityScratch);

             p.velocity = Cesium.Cartesian3.add(p.velocity, gravityScratch, p.velocity);
         }

         viewer.scene.preRender.addEventListener(function(scene, time) {
             particleSystem.modelMatrix = computeModelMatrix(entity, time);
             // Account for any changes to the emitter model matrix.
             particleSystem.emitterModelMatrix = computeEmitterModelMatrix();
             // Spin the emitter if enabled.
             if (viewModel.spin) {
                 viewModel.heading += 1.0;
                 viewModel.pitch += 1.0;
                 viewModel.roll += 1.0;
             }
         });

         Cesium.knockout.getObservable(viewModel, 'rate').subscribe(
             function(newValue) {
                 particleSystem.rate = parseFloat(newValue);
             }
         );

         Cesium.knockout.getObservable(viewModel, 'particleSize').subscribe(
             function(newValue) {
                 var particleSize = parseFloat(newValue);
                 particleSystem.minimumWidth = particleSize;
                 particleSystem.maximumWidth = particleSize;
                 particleSystem.minimumHeight = particleSize;
                 particleSystem.maximumHeight = particleSize;
             }
         );
          //显示 的类型
         var options = [{
             text : 'Circle',
             onselect : function() {
                  particleSystem.emitter = new Cesium.SphereEmitter(5.0);
             } 
         } ];   
   }
    
    //移除粒子
    function  remofire(){
        viewer.entities.removeById("addfire");
        viewer.scene.primitives.remove(particleSystem);
    }
    
   

 

界面代码

 <div id="toolbar" class="param-container tool-bar"></div>//存放粒子

 <button onclick="addfire('')" >火焰</button> //触发火焰特效  可以输入位置，修改一下对应的参数