Cesium学习笔记(十):粒子系统(Particle System)
粒子系统是Cesium1.35最新的更新,让我们一起来看看吧
1. 例子
首先先来一架飞机
var entity = viewer.entities.add({model : {uri : '../Apps/SampleData/models/CesiumAir/Cesium_Air.gltf',minimumPixelSize : 64},position : Cesium.Cartesian3.fromDegrees(-112.110693, 36.0994841, 1000.0)
});
viewer.trackedEntity = entity;
然后我们需要拿到飞机模型的位置
// 计算当前时间点飞机模型的位置矩阵
function computeModelMatrix(entity, time) {//获取位置var position = Cesium.Property.getValueOrUndefined(entity.position, time, new Cesium.Cartesian3());if (!Cesium.defined(position)) {return undefined;}//获取方向var modelMatrix;var orientation = Cesium.Property.getValueOrUndefined(entity.orientation, time, new Cesium.Quaternion());if (!Cesium.defined(orientation)) {modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(position, undefined, new Cesium.Matrix4());} else {modelMatrix = Cesium.Matrix4.fromRotationTranslation(Cesium.Matrix3.fromQuaternion(orientation, new Cesium.Matrix3()), position, new Cesium.Matrix4());}return modelMatrix;
}
接着设置好粒子发射器的位置
// 计算引擎(粒子发射器)位置矩阵
function computeEmitterModelMatrix() {//方向hpr = Cesium.HeadingPitchRoll.fromDegrees(0.0, 0.0, 0.0, new Cesium.HeadingPitchRoll());var trs = new Cesium.TranslationRotationScale();//以modelMatrix(飞机)中心为原点的坐标系的xyz轴位置偏移trs.translation = Cesium.Cartesian3.fromElements(2.5, 3.5, 1.0, new Cesium.Cartesian3());trs.rotation = Cesium.Quaternion.fromHeadingPitchRoll(hpr, new Cesium.Quaternion());return Cesium.Matrix4.fromTranslationRotationScale(trs, new Cesium.Matrix4());
}
最后就可以加载我们的粒子系统看看效果了
var particleSystem = viewer.scene.primitives.add(new Cesium.ParticleSystem({image : '../Apps/SampleData/fire.png',startScale : 1.0,endScale : 4.0,minimumLife : 1.0,maximumLife : 1.5,speed : 5.0,width : 20,height : 20,lifeTime : 16.0,//主模型参数(位置)modelMatrix : computeModelMatrix(entity, Cesium.JulianDate.now()),// 发射器参数emitter : new Cesium.CircleEmitter(0.5),rate : 5.0,emitterModelMatrix : computeEmitterModelMatrix(),//颜色startColor: Cesium.Color.RED.withAlpha(0.7),endColor: Cesium.Color.YELLOW.withAlpha(0.3),forces: [applyGravity]
}));
2. 粒子发射器
Cesium内置了4种发射器,可以看到我这里用的是CircleEmitter
,下面一起看看几种发射器发出来的粒子是啥样的
CircleEmitter
emitter : new Cesium.CircleEmitter(0.5)
这种发射器发射的粒子是一个圆形,所以需要一个半径,这样看可能看不出来,我们可以一瞬间把粒子量加大就能看出来了
ConeEmitter
emitter : new Cesium.ConeEmitter(Cesium.Math.toRadians(45.0))
这种发出来的稍微有点散,没有CircleEmitter那么聚集,因为它是以一个锥形进行发散的,这样就需要传一个角度了
啧啧,很适合做核弹效果,蘑菇云哎
BoxEmitter和SphereEmitter
剩下两种感觉差不多,我就一起说了,顺带对比下
BoxEmitter这种是从一个长方体中将粒子散发出来,需要传一个Cartesian3,存放长宽高
emitter : new Cesium.BoxEmitter(new Cesium.Cartesian3(1.0, 1.0, 1.0))
SphereEmitter是从一个球中将粒子散发出来,需要一个半径
emitter : new Cesium.SphereEmitter(0.5)
来看一下效果,感觉差不多,我们需要从高空才能看出区别
BoxEmitter
SphereEmitter
3. bursts
之前我们看见的效果其实都是用bursts做出来的,bursts就是让粒子系统周期性的做出一些额外的爆发效果,用法很简单
var particleSystem = viewer.scene.primitives.add(new Cesium.ParticleSystem({...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})],...
}));
我们需要传入一个ParticleBurst类型的array,存的就是你想要的效果
4. 其他的一些属性
粒子系统中很多属性都有min和max以及其本身,比如life就有minimumLife、maximumLife和life三个,但是如果你设置了life属性,那么minimumLife和maximumLife就会失效,其他的属性也是如此
还有一些比较有趣的属性,比如颜色,你可以设置startColor和endColor来设置颜色的渐变
其中rate是粒子的发射速率,也就是每秒发射的粒子数
在默认的情况下粒子的loop是为true的,如果需要的话可以把它关闭,再配合bursts并把粒子的速率rate设为0,可以做出很不错的爆炸效果
除了这些还有很多的属性比如speed、width、height等等,详细的可以见官方API
5. 重力效果
这可是一个重头戏,官方给我们提供了一个计算方法(原谅我的数学,一脸懵逼)
//你需要的重力倍数,不过这个重力似乎是反过来的,负的才是增大重力
var gravity = 0;
var gravityScratch = new Cesium.Cartesian3();
function applyGravity(p, dt) {// Compute a local up vector for each particle in geocentric space.var position = p.position;Cesium.Cartesian3.normalize(position, gravityScratch);Cesium.Cartesian3.multiplyByScalar(gravityScratch, gravity * dt, gravityScratch);p.velocity = Cesium.Cartesian3.add(p.velocity, gravityScratch, p.velocity);
}
你只需要在粒子系统的初始化里面加上一句就可以了
particleSystem: {...forces: [applyGravity],...
}
让我们看看100倍重力是什么效果
嘿嘿,挺有意思的,让我们来点更有意思的,让飞机飞起来看看效果如何呢
我们不需要改任何代码,还记得之前那个转圈的飞机么(不知道的戳这里),我们只需要把之前那些代码加在后面,并加上一个更新位置的方法就可以了(毕竟在动嘛)
viewer.scene.preRender.addEventListener(function(scene, time) {//重新计算位置particleSystem.modelMatrix = computeModelMatrix(entity, time);
});
总共加了这些
//计算当前时间点飞机模型的位置矩阵
function computeModelMatrix(entity, time) {//获取位置var position = Cesium.Property.getValueOrUndefined(entity.position, time, new Cesium.Cartesian3());if (!Cesium.defined(position)) {return undefined;}//获取方向var orientation = Cesium.Property.getValueOrUndefined(entity.orientation, time, new Cesium.Quaternion());if (!Cesium.defined(orientation)) {var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(position, undefined, new Cesium.Matrix4());} else {modelMatrix = Cesium.Matrix4.fromRotationTranslation(Cesium.Matrix3.fromQuaternion(orientation, new Cesium.Matrix3()), position, new Cesium.Matrix4());}return modelMatrix;
}//计算引擎(粒子发射器)位置矩阵
function computeEmitterModelMatrix() {//方向hpr = Cesium.HeadingPitchRoll.fromDegrees(0.0, 0.0, 0.0, new Cesium.HeadingPitchRoll());var trs = new Cesium.TranslationRotationScale();//以modelMatrix(飞机)中心为原点的坐标系的xyz轴位置偏移trs.translation = Cesium.Cartesian3.fromElements(2.5, 3.5, 1.0, new Cesium.Cartesian3());trs.rotation = Cesium.Quaternion.fromHeadingPitchRoll(hpr, new Cesium.Quaternion());return Cesium.Matrix4.fromTranslationRotationScale(trs, new Cesium.Matrix4());
}//粒子系统参数
var particleSystem = viewer.scene.primitives.add(new Cesium.ParticleSystem({image : '../Apps/SampleData/fire.png',startScale : 1.0,endScale : 4.0,minimumLife : 1.0,maximumLife : 1.5,speed : 5.0,width : 20,height : 20,lifeTime : 16.0,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})],//主模型参数(位置)modelMatrix : computeModelMatrix(entity, Cesium.JulianDate.now()),// 发射器参数emitter : new Cesium.CircleEmitter(0.5),rate : 5.0,emitterModelMatrix : computeEmitterModelMatrix(),//颜色startColor: Cesium.Color.RED.withAlpha(0.7),endColor: Cesium.Color.YELLOW.withAlpha(0.3),forces: [applyGravity]
}));//重力计算
var gravityScratch = new Cesium.Cartesian3();
function applyGravity(p, dt) {var position = p.position;Cesium.Cartesian3.normalize(position, gravityScratch);Cesium.Cartesian3.multiplyByScalar(gravityScratch, 1 * dt, gravityScratch);p.velocity = Cesium.Cartesian3.add(p.velocity, gravityScratch, p.velocity);
}//刷新位置
viewer.scene.preRender.addEventListener(function(scene, time) {particleSystem.modelMatrix = computeModelMatrix(entity, time);
});
效果还是不错的
Cesium学习笔记(十):粒子系统(Particle System)相关推荐
- windows内核开发学习笔记十五:IRP结构
windows内核开发学习笔记十五:IRP结构 IRP(I/O Request Package)在windows内核中,有一种系统组件--IRP,即输入输出请求包.当上层应用程序需要访问底层输入输 ...
- IOS之学习笔记十五(协议和委托的使用)
1.协议和委托的使用 1).协议可以看下我的这篇博客 IOS之学习笔记十四(协议的定义和实现) https://blog.csdn.net/u011068702/article/details/809 ...
- 吴恩达《机器学习》学习笔记十四——应用机器学习的建议实现一个机器学习模型的改进
吴恩达<机器学习>学习笔记十四--应用机器学习的建议实现一个机器学习模型的改进 一.任务介绍 二.代码实现 1.准备数据 2.代价函数 3.梯度计算 4.带有正则化的代价函数和梯度计算 5 ...
- 吴恩达《机器学习》学习笔记十二——机器学习系统
吴恩达<机器学习>学习笔记十二--机器学习系统 一.设计机器学习系统的思想 1.快速实现+绘制学习曲线--寻找重点优化的方向 2.误差分析 3.数值估计 二.偏斜类问题(类别不均衡) 三. ...
- 吴恩达《机器学习》学习笔记十——神经网络相关(2)
吴恩达<机器学习>学习笔记十--神经网络相关(2) 一. 代价函数 二. 反向传播算法 三. 理解反向传播算法 四. 梯度检测 五. 随机初始化 1.全部初始化为0的问题 2.随机初始化的 ...
- Mr.J-- jQuery学习笔记(十九)--自定义动画实现图标特效
之前有写过自定义动画Mr.J-- jQuery学习笔记(十八)--自定义动画 这次实现一个小demo 图标特效 页面渲染 <!DOCTYPE html> <html lang=&qu ...
- Mr.J-- jQuery学习笔记(十六)--展开和收起动画折叠菜单的实现
之前写过动画的隐藏与显示:Mr.J-- jQuery学习笔记(十四)--动画显示隐藏 动画隐藏与显示的一个小demo--对联广告:Mr.J-- jQuery学习笔记(十五)--实现页面的对联广告 与动 ...
- Mr.J-- jQuery学习笔记(十五)--实现页面的对联广告
请看之前的:Mr.J-- jQuery学习笔记(十四)--动画显示隐藏 话不多说,直接上demo <!DOCTYPE html> <html lang="en"& ...
- kvm虚拟化学习笔记(十)之kvm虚拟机快照备份
KVM虚拟化学习笔记系列文章列表 ---------------------------------------- kvm虚拟化学习笔记(一)之kvm虚拟化环境安装 http://koumm.blog ...
- mysql 临时表 事务_MySQL学习笔记十:游标/动态SQL/临时表/事务
逆天十三少 发表于:2020-11-12 08:12 阅读: 90次 这篇教程主要讲解了MySQL学习笔记十:游标/动态SQL/临时表/事务,并附有相关的代码样列,我觉得非常有帮助,现在分享出来大家一 ...
最新文章
- 【shiro】使用shiro搭建的项目,页面引用js,报错:Uncaught SyntaxError: Unexpected token ...
- Android不使用支持库请求运行时权限
- manjaro安装teamviewer实现远程连接
- 【数据结构与算法】之判断一个整数是否是 4 的幂次方的高逼格算法
- 征战蓝桥 —— 2013年第四届 —— C/C++A组第8题——买不到的数目
- 全排列变种:限定 排列的差值范围 及 排列中的元素个数
- 利用软碟通软件制作Ubuntu16.04系统启动盘
- 网页连接的服务器失败是怎么回事啊,网页怎么连接服务器失败
- Hbase常用基础命令
- Windows Phone7成为诺基亚核心目标
- 【hiho一下 第147周】小Hi的烦恼
- 微信小程序 宠物论坛1
- php掷骰子小游戏代码,C语言实现掷骰子游戏代码及解析
- python SMTP发送带图片的邮件时,报TypeError: Could not guess image MIME subtype错误的解决办法
- uart口图片_串口(USART)框图的讲解
- LINUX - 实时LINUX内核(PREEMPT_RT)的编译安装以及测试
- 新手之使用FileZilla完整教程
- 压缩感知的尽头: 原子范数最小化
- 新数据整合的五大方式
- servlet3.1规范翻译:前言