Cesium基础知识-天气-雨粒子应用

已于 2022-01-20 09:59:41 修改
阅读量577 收藏 1
点赞数
分类专栏： JavaScript 菜鸟学习编程之路 Cesium 文章标签： javascript
于 2022-01-19 13:48:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/QQhelphelp/article/details/122579244
版权

html界面

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>Weather</title>
  7.     <script src="../Build/Cesium/Cesium.js"></script>
  8.     <style>
  9.         @import url(../Build/CesiumUnminified/Widgets/widgets.css);
  11.         html,
  12.         body,
  13.         #cesiumContainer {
  14.             width: 100%;
  15.             height: 100%;
  16.             margin: 0;
  17.             padding: 0;
  18.             overflow: hidden;
  19.         }
  20.     </style>
  21. </head>
  23. <body>
  24.     <div id="cesiumContainer"></div>
  25.     <script src="nineparticle.js"></script>
  26. </body>
  27. </html>

JavaScript代码

  1. viewer = new Cesium.Viewer('cesiumContainer');
  2. //创建雨
  3. function CreateRain() {
  4.     var scene = viewer.scene;
  6.     scene.camera.setView({
  7.         destination: new Cesium.Cartesian3(277096.634865404, 5647834.481964232, 2985563.7039122293),
  8.         orientation: {
  9.             heading: 4.731089976107251,
  10.             pitch: -0.32003481981370063
  11.         }
  12.     });

  13.  
  14.     //雨更新函数,雪粒子受重力下落
  15.     var rainGravityScratch = new Cesium.Cartesian3();
  16.     var rainUpdate = function (particle, dt) {
  17.         rainGravityScratch = Cesium.Cartesian3.normalize(particle.position, rainGravityScratch);
  18.         rainGravityScratch = Cesium.Cartesian3.multiplyByScalar(rainGravityScratch,-1050.0,rainGravityScratch);
  20.         particle.position = Cesium.Cartesian3.add(particle.position, rainGravityScratch, particle.position);
  21.     };

  22.  
  23.     //scene.skyAtmosphere.hueShift = -0.97; //光谱颜色
  24.     //scene.skyAtmosphere.saturationShift = 0.25; //实际明暗分界线
  25.     //scene.skyAtmosphere.brightnessShift = -0.4; //颜色对比强烈
  26.     //scene.fog.density = 0.00025; //雾效果浓度
  27.     //scene.fog.minimumBrightness = 0.01; //雾效透明度
  29.     //雨粒子
  30.     var rainParticleSize = scene.drawingBufferWidth / 100.0; //粒子系统大小
  31.     var rainRadius = 100000.0; //半径
  33.     rainSystem = new Cesium.ParticleSystem({
  34.         modelMatrix: new Cesium.Matrix4.fromTranslation(scene.camera.position),
  35.         speed: -1.0,
  36.         lifetime: 15.0,
  37.         emitter: new Cesium.SphereEmitter(rainRadius),
  38.         startScale: 1.0,
  39.         endScale: 0.0,
  40.         image: "../Apps/SampleData/circular_particle.png",
  41.         emissionRate: 9000.0,
  42.         startColor: new Cesium.Color(0.27, 0.5, 0.70, 0.0),
  43.         endColor: new Cesium.Color(0.27, 0.5, 0.70, 0.98),
  44.         imageSize: new Cesium.Cartesian2(rainParticleSize, rainParticleSize * 2),
  45.         updateCallback: rainUpdate
  46.     });
  47.     scene.primitives.add(rainSystem);
  49. }
  50. CreateRain();
考班格
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Cesium 场景特效之【下雨特效】
喜欢钻研前端和分享技术
04-16 820
cesium 天气效果
cesium 实现天气效果雨雪雾
11-04
完整cesium实现雨雪雾效果，比较全，欢迎下载交流指正。
Cesium 雾天天气效果 雾气 开关展示
最新发布
mone1314的博客
04-16 176
Cesium雾天效果展示
Cesium高级-1、下雨特效
lying_19的博客
06-14 1383
cesium特效：下雨。通过GLSL片源着色器代码来实现下雨特效。
Cesium 模拟下雨
西柚2015地信小白GISer
09-01 888
代码: //定义下雨场景 着色器 function FragmentShader_Rain() { return "uniform sampler2D colorTexture;\n\ varying vec2 v_textureCoordinates;\n\ \n\ float hash(float x){\n\ return fract(sin(x*133.3)*13.13);\n\ }\n\ \n\ void main...
cesium天气系统
Raccon_的博客
10-14 1278
笔记
cesium-sensor-volumes.js, 适用于Cesium1.71.0
08-17
适用于Cesium1.71.0，引入后即可渲染agi_conicSensor, agi_rectangularSensor, agi_customPatternSensor，agi_Vector等效果，直接引用即可import "/js/cesium-sensor-volumes
cesium-sensor-volumes.js
07-28
适用于Cesium1.58版本
cesium-integrate-three.zip
12-08
cesium 三维地图集成 three.js 的示例，均使用最新版本。 cesium 1.88 ； three r135 。 介绍：https://blog.csdn.net/linzi19900517/article/details/121792022
cesium-terrain-builder-docker:具有量化网格支持的geo-datacesium-terrain-builder应用程序的Dockerfile
05-23
此存储库包含用于应用程序的Dockerfile ，并支持新的格式 -Mesh 。 它是生成从提供量化目支持，如在此描述的。 有关此fork的最新开发的信息，请参阅此。 感谢和在 Terrain Builder和量化网格支持方面的出色工作。 ...
cesium-google-earth-examples:移植到 Cesium 的 Google Earth 插件 API 示例
07-24
谷歌地球插件 API 示例移植到 Cesium，开源 WebGL 虚拟地球和地图引擎。 单击下面的任何示例以运行它。 要了解有关 Cesium 的更多信息，请查看系列教程。 （谷歌地球） （谷歌地球） （谷歌地球） （谷歌地球）...
cesium-天气效果.html
11-18
cesium实现风，雨，雾，晴天气效果
Cesium 场景设置（夜视效果，黑白效果，雨雾雪天气）
07-11
Cesium 场景设置（夜视效果，黑白效果，雨雾雪天气） 参考链接：https://blog.csdn.net/qq_35984445/article/details/125743739 天际线已公布 资源链接：https://download.csdn.net/download/qq_35984445/86744804
cesium添加下雨效果
敲之的博客
04-12 287
cesium添加下雨效果
Cesium雨效果
chudage11的专栏
03-24 625
Cesium雨效果1.Cesium版本1.79.1，雨效果的类代码：2. 页面使用方式3. 效果图 #作为一个WebGL的小白，在前人大牛的肩膀上参考代码，自己整理了一个雨效果图，仅供参考 1.Cesium版本1.79.1，雨效果的类代码： class RainEffect { constructor(viewer, options) { if (!viewer) throw new Error('no viewer object!'); options = opti
071：vue+cesium 实现下雨效果
大剑师兰特的GIS世界
03-01 1036
第071个本示例的目的是介绍如何在vue+cesium中实现下雨效果，这里使用着色器来实现实例特效。
cesium实现下雨下雪特效
qq_40863573的博客
06-17 1510
cesium实现下雨下雪特效
cesium实现天气效果【雨、雪、雾】
qq_43474235的博客
01-01 1457
项目中使用到cesium,为了让立体效果更好看，更应景，为此里面也涉及到了天气效果，其实网上也有一大堆，我也只是其中的一个复制者，唯一不同的是可以通过来改变雨雪的大小等等。
cesium，实现下雨下雪效果切换
youroong的博客
11-08 1539
cesium实现按钮切换下雨下雪晴天的效果
cesium-3d-tiles-tools
10-05
Cesium-3d-tiles-tools是一个工具集，用于处理和操作3D Tiles格式的数据。3D Tiles是一种用于管理和传输大规模的三维地理数据的开放标准。Cesium-3d-tiles-tools具有多种功能，可以使用户更加方便和高效地处理3D ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值