Cesium粒子系统、火焰粒子、喷水粒子

Cesium粒子系统、火焰效果、喷泉效果

前言

Cesium中可以使用粒子系统来实现现实生活中的一些效果，比如喷泉、火焰等效果。

实现效果

实现思路

通过Cesium自带的粒子系统实现

关键代码

// 火焰粒子标绘类
import ParticlePlotBase from "../PlotBase"
import PlotTypes from "../PlotTypes"export default class FirePlot extends ParticlePlotBase {constructor(viewer, geoFeature) {super(viewer, geoFeature);this.properties.plotType = PlotTypes.FIRE;this.properties.plotName = "火焰";this.style = geoFeature.properties.style || this.getDefaultStyle();this.properties.style = this.style;this.init();}init() {//需要一个entity提供位置信息this.entity = this.viewer.entities.add({position: this.position,});this.particleSystem = this.createParticleSystem();this.viewer.scene.primitives.add(this.particleSystem);this.addEvent();}//添加事件addEvent() {this.emitterModelMatrix = new Cesium.Matrix4();this.translation = new Cesium.Cartesian3();this.rotation = new Cesium.Quaternion();this.hpr = new Cesium.HeadingPitchRoll();this.trs = new Cesium.TranslationRotationScale();this.viewer.scene.preUpdate.addEventListener(this.preUpdateEvent, this);}removeEvent() {this.viewer.scene.preUpdate.removeEventListener(this.preUpdateEvent, this);this.emitterModelMatrix = undefined;this.translation = undefined;this.rotation = undefined;this.hpr = undefined;this.trs = undefined;}//场景渲染事件preUpdateEvent(scene, time) {this.particleSystem.modelMatrix = this.entity.computeModelMatrix(time, new Cesium.Matrix4());this.hpr = Cesium.HeadingPitchRoll.fromDegrees(0.0, 0.0, 0.0, this.hpr);this.trs.translation = Cesium.Cartesian3.fromElements(0, 0, 0, this.translation);this.trs.rotation = Cesium.Quaternion.fromHeadingPitchRoll(this.hpr, this.rotation);this.particleSystem.emitterModelMatrix = Cesium.Matrix4.fromTranslationRotationScale(this.trs, this.emitterModelMatrix);}//创建粒子对象createParticleSystem() {return new Cesium.ParticleSystem({image: this.style.fireImage,startColor: new Cesium.Color(1, 1, 1, 1),endColor: new Cesium.Color(0.5, 0, 0, 0),startScale: this.style.startScale,endScale: this.style.endScale,minimumParticleLife: this.style.minimumParticleLife,maximumParticleLife: this.style.maximumParticleLife,minimumSpeed: this.style.minimumSpeed,maximumSpeed: this.style.maximumSpeed,imageSize: new Cesium.Cartesian2(this.style.particleSize, this.style.particleSize),emissionRate: this.style.emissionRate,lifetime: 16.0,loop: true,emitter: new Cesium.ConeEmitter(Cesium.Math.toRadians(45.0)),sizeInMeters: true,});}//移除remove() {this.removeEvent(); //清除事件this.viewer.scene.primitives.remove(this.particleSystem); //删除粒子对象this.viewer.entities.remove(this.entity); //删除entity}updateStyle() {this.particleSystem.startScale = this.style.startScale;this.particleSystem.endScale = this.style.endScale;this.particleSystem.minimumParticleLife = this.style.minimumParticleLife;this.particleSystem.maximumParticleLife = this.style.maximumParticleLife;this.particleSystem.minimumSpeed = this.style.minimumSpeed;this.particleSystem.maximumSpeed = this.style.maximumSpeed;this.particleSystem.imageSize = new Cesium.Cartesian2(this.style.particleSize, this.style.particleSize);this.particleSystem.emissionRate = this.style.emissionRate;}//默认样式信息getDefaultStyle() {return {fireImage: "../../../static/images/effects/fire.png",startScale: 3,endScale: 1.5,minimumParticleLife: 1.5,maximumParticleLife: 1.8,minimumSpeed: 7,maximumSpeed: 9,particleSize: 2,emissionRate: 200,}}
}

// 喷泉粒子标绘类
import ParticlePlotBase from "../PlotBase"
import PlotTypes from "../PlotTypes"export default class FountainPlot extends ParticlePlotBase {constructor(viewer, geoFeature) {super(viewer, geoFeature);this.properties.plotType = PlotTypes.FOUNTAIN;this.properties.plotName = "火焰";this.style = geoFeature.properties.style || this.getDefaultStyle();this.properties.style = this.style;this.init();}init() {//需要一个entity提供位置信息this.entity = this.viewer.entities.add({position: this.position,});this.particleSystem = this.createParticleSystem();this.viewer.scene.primitives.add(this.particleSystem);this.addEvent();}//添加事件addEvent() {this.emitterModelMatrix = new Cesium.Matrix4();this.translation = new Cesium.Cartesian3();this.rotation = new Cesium.Quaternion();this.hpr = new Cesium.HeadingPitchRoll();this.trs = new Cesium.TranslationRotationScale();this.viewer.scene.preUpdate.addEventListener(this.preUpdateEvent, this);}removeEvent() {this.viewer.scene.preUpdate.removeEventListener(this.preUpdateEvent, this);this.emitterModelMatrix = undefined;this.translation = undefined;this.rotation = undefined;this.hpr = undefined;this.trs = undefined;}//场景渲染事件preUpdateEvent(scene, time) {this.particleSystem.modelMatrix = this.entity.computeModelMatrix(time, new Cesium.Matrix4());this.hpr = Cesium.HeadingPitchRoll.fromDegrees(0.0, 0.0, 0.0, this.hpr);this.trs.translation = Cesium.Cartesian3.fromElements(0, 0, 0, this.translation);this.trs.rotation = Cesium.Quaternion.fromHeadingPitchRoll(this.hpr, this.rotation);this.particleSystem.emitterModelMatrix = Cesium.Matrix4.fromTranslationRotationScale(this.trs, this.emitterModelMatrix);}//创建粒子对象createParticleSystem() {this.gravityScratch = new Cesium.Cartesian3();return new Cesium.ParticleSystem({image: this.style.fountainImage,startColor: new Cesium.Color(1, 1, 1, 0.6),endColor: new Cesium.Color(0.80, 0.86, 1, 0.4),startScale: this.style.startScale,endScale: this.style.endScale,minimumParticleLife: this.style.minimumParticleLife,maximumParticleLife: this.style.maximumParticleLife,minimumSpeed: this.style.minimumSpeed,maximumSpeed: this.style.maximumSpeed,imageSize: new Cesium.Cartesian2(this.style.particleSize, this.style.particleSize),emissionRate: this.style.emissionRate,lifetime: 16.0,//粒子发射器emitter: new Cesium.CircleEmitter(0.2),updateCallback: (p, dt) => {return this.applyGravity(p, dt);},sizeInMeters: true,performance: false,});}applyGravity(p, dt) {// We need to compute a local up vector for each particle in geocentric space. Cesium.Cartesian3.normalize(p.position, this.gravityScratch);Cesium.Cartesian3.multiplyByScalar(this.gravityScratch, this.style.gravity * dt, this.gravityScratch);p.velocity = Cesium.Cartesian3.add(p.velocity, this.gravityScratch, p.velocity);}updateStyle() {}//移除remove() {this.removeEvent(); //清除事件this.viewer.scene.primitives.remove(this.particleSystem); //删除粒子对象this.viewer.entities.remove(this.entity); //删除entity}//默认样式信息getDefaultStyle() {return {fountainImage: "../../../static/images/effects/fountain.png",emissionRate: 40.0,gravity: -3.5,minimumParticleLife: 6,maximumParticleLife: 7,minimumSpeed: 9,maximumSpeed: 9.5,startScale: 1,endScale: 7,particleSize: 1,}}
}

详情参见 Cesium实战专栏

Cesium粒子系统、火焰粒子、喷水粒子相关推荐

Web 3D烟雾火焰喷水粒子效果-WebGL/Threejs技术倾心打造
Threejs实现粒子效果 ThreeJS是一个3D的JS库,封装了WebGL的功能.就是在浏览器端开发3D图形相关的程序的一个库或者说一个标准.实现烟雾.火焰.喷水粒子效果典型"5毛特效& ...
Cesium创建火焰粒子
Cesium创建火焰粒子createParticleFire: function(options) {var entity = viewer.entities.add({ position:optio ...
Cesium之粒子---简单粒子特效
首先,来个最简单的粒子特效: 雨: var rainParticleSize = 15.0;var rainRadius = 100000.0;var rainImageSize = new Cesi ...
手把手教你使用Unity制作一个飞机喷射火焰尾气的粒子效果
文章目录零.最终效果一.飞机模型二.飞机喷射火焰尾气制作 1.贴图 2.材质球 3.创建粒子 3.设置粒子的Renderer,将材质球赋值给粒子 4.设置粒子的Shape,调整喷射区域和角度 5 ...
粒子系统--火焰 [OpenGL-Transformfeedback]
火焰粒子系统前言火焰的物理模型火焰粒子系统构建实现效果演示前言本次带来火焰粒子系统的实现,这里的火焰是火堆型,使用的图形API为OpenGL3.3+,采用OpenGL的trasnform ...
粒子耗尽粒子滤波_如何使用粒子的强大蓝牙API
粒子耗尽粒子滤波 This post is originally from www.jaredwolff.com 这篇文章最初来自www.jaredwolff.com I was defeated. ...
Cesium粒子系统-喷水效果
Cesium提供了ParticleSystem供我们使用,可以用实现一些比较高级的特效,具体效果如下图: 首先我们定义三个函数,第一个函数用来设置该粒子系统的位置,第二个函数用来控制粒子系统中粒子发射 ...
【IOS-COCOS2D游戏开发之十】添加粒子系统特效并解决粒子特效与LAYER之间的坐标问题；...
本站文章均为李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/iphone-cocos2d/472.html ...
【iOS-Cocos2d游戏开发之十】添加粒子系统特效并解决粒子特效与Layer之间的坐标问题；
李华明Himi 原创,转载务必在明显处注明: 转载自 [黑米GameDev街区] 原文链接: http://www.himigame.com/iphone-cocos2d/472.html 一直以 ...

Cesium粒子系统、火焰粒子、喷水粒子

Cesium粒子系统、火焰效果、喷泉效果

前言

实现效果

实现思路

关键代码

Cesium粒子系统、火焰粒子、喷水粒子相关推荐

最新文章

热门文章