ceisum粒子系统实现爆炸效果

啥是粒子系统?概念听起来总是如此高深。

其实,简单的说,就是通过对大量的每一个微小粒子的控制(颜色、位置运动),来模拟某些场景。比如,模拟爆炸、下雨、烟雾、等特效什么的。

这里以ceisum中实现爆炸特效为例,介绍如何在ceisum中实现爆炸效果。

爆炸特效实现的关键有两点:
1、漂亮的png透明火灾爆炸图(需要PS抠图,百度搜一下素材及做法)
2、创建一个粒子系统对象,设定参数

创建粒子对象


var staticPosition = Cesium.Cartesian3.fromDegrees(112,22,50);
var entity44 = viewer.entities.add({
   
    position : staticPosition
})

function computeModelMatrix(entity, time) {
   
   var position = Cesium.Property.getValueOrUndefined
  • 3
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Cesium是一个用于构建虚拟地球应用程序的JavaScript库,可以使用它来绘制爆炸效果。下面是一个简单的示例: 1. 导入Cesium库 ```html <script src="https://cesium.com/downloads/cesiumjs/releases/1.79/Build/Cesium/Cesium.js"></script> <link href="https://cesium.com/downloads/cesiumjs/releases/1.79/Build/Cesium/Widgets/widgets.css" rel="stylesheet"> ``` 2. 创建场景 ```html <div id="cesiumContainer"></div> <script> var viewer = new Cesium.Viewer('cesiumContainer'); </script> ``` 3. 创建爆炸效果 ```html <script> var explosion = viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(0.0, 0.0, 1000.0), billboard: { image: 'path/to/explosion.png', sizeInMeters: true, scaleByDistance: new Cesium.NearFarScalar(1.5e2, 1.0, 1.5e7, 0.0), translucencyByDistance: new Cesium.NearFarScalar(1.5e2, 1.0, 1.5e7, 0.0), }, point: { color: Cesium.Color.YELLOW.withAlpha(0.5), pixelSize: 50, distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 1.5e7), }, properties: { time: 0.0, lifetime: 1.0, }, }); viewer.clock.onTick.addEventListener(function (clock) { var time = explosion.properties.time; var lifetime = explosion.properties.lifetime; if (time > lifetime) { viewer.entities.remove(explosion); return; } var factor = time / lifetime; var size = Cesium.Math.lerp(0.0, 50000.0, factor); explosion.billboard.scale = size; explosion.point.pixelSize = size / 1000.0; explosion.point.color = Cesium.Color.YELLOW.withAlpha(0.5 - 0.5 * factor); explosion.properties.time = time + clock.deltaTime / 1000.0; }); </script> ``` 这段代码创建了一个在(0,0,1000)位置的爆炸效果,使用了一个贴图作为billboard,同时在爆炸中心创建了一个闪烁的点,随着时间的推移,爆炸效果逐渐消失。可以根据需要调整位置、贴图、颜色、大小等参数来创建不同的效果

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值