粒子火焰特效

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 timevar start = Cesium.JulianDate.fromDate(new Date(, 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 endviewer.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.pngstartColor : 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> //触发火焰特效 可以输入位置，修改一下对应的参数