CesiumJS【Pro】- #3 万家灯火

已于 2024-06-26 09:42:55 修改
阅读量246 收藏 2
点赞数
分类专栏： MyCesiumJS Pro 文章标签： cesium
于 2023-03-09 21:48:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AlanL/article/details/129432184
版权
MyCesiumJS Pro 专栏收录该内容
17 篇文章 12 订阅 ¥299.90 ¥399.90
订阅专栏

文章目录

万家灯火

在这里插入图片描述

说在前面

从 Cesium 1.87开始，支持了自定义Shader，可以为3DTileset 编写自己的Shader脚本代码了。在此之前，要修改的样式，只能通过属性值，简单的修改颜色（和传统gis的条件专题图一样，比如高度大于100米的建筑物表面赋予红色）别无新意。

本文通过Cesium.CustomShader，简单实现一个万家灯火的效果。

实现的功能

  • 自定义Shader

思路

  • 通过Cesium.createOsmBuildings构建三维建筑
  • 通过自定义纹理实现万家灯火的效果

关键代码

1 构建OsmBuildings

viewer.scene.primitives.add(
    Cesium
了解本专栏 订阅专栏 解锁全文
满天飞飞
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
Cesium实现聚光灯向舞台照射并旋转运动的效果含全部源码
liyan_gis的专栏
10-31 1013
在实际项目应用过程中，需要实现一个隧道只能巡检的功能，模拟一个隧道的探测器扫描的显示效果需求。实现的原理是采用entity实现的，生成多个多边形polygon，利用坐标赋值的CallbackProperty函数实现，动态修改图形的坐标位置。但是，如果圆周上点数量较多的时候，会出现卡顿的现象，这个需要根据具体圆周的大小，和显示的精度进行调节。
Cesium聚光灯
u011454763的博客
08-17 856
Cesium聚光灯
用cesium的后期处理实现类似three.js中的spotLight效果
weixin_44604262的博客
10-16 713
用cesium的后期处理实现类似three.js中的spotLight效果
Cesium-CustomShader给3dtiles加贴图
weixin_44212242的博客
04-12 4114
使用CustomShader为改变3dtiles渲染效果
cesium 自定义贴图，shadertoy移植教程。
最新发布
weixin_44265800的博客
12-13 1320
cesium中提供了一些高级的api，可以自己写一些shader来制作炫酷的效果。ShaderToy 是一个可以在线编写、测试和分享图形渲染着色器的网站。它提供了一个图形化的编辑器，可以让用户编写基于 WebGL 的 GLSL 着色器代码，并实时预览渲染结果。ShaderToy 支持多种渲染效果，包括 2D 和 3D 图形、粒子系统、动画等。用户可以通过调整着色器代码中的参数来实现各种不同的视觉效果。
20210603-华安证券-邮储银行-601658-变革于万家灯火.pdf
06-04
20210603-华安证券-邮储银行-601658-变革于万家灯火.pdf
html5夜景放烟花绽放动画效果，万家灯火的新年快乐氛围，高分web源代码！
02-19
html5夜景放烟花绽放动画效果，万家灯火的新年快乐氛围，高分web源代码！ html5夜景放烟花绽放动画效果，万家灯火的新年快乐氛围，高分web源代码！ html5夜景放烟花绽放动画效果，万家灯火的新年快乐氛围，高分web源...
话剧万家灯火观后感精选.doc
10-11
【话剧《万家灯火》概述】 《万家灯火》是一部广受欢迎的平民戏剧，以其深入人心的故事和演员们的精湛表演赢得了高人气。该剧以普通百姓的生活为题材，聚焦于社会热点——房屋拆迁与住房改革，通过何家三兄弟的生活...
话剧万家灯火观后感参考.doc
09-16
话剧万家灯火观后感参考.doc
万家灯火时.doc
09-19
万家灯火时.doc
白天黑夜切换实例
10-12
白天黑夜切换实例
Cesium地图中地形文件的生成与加载使用手册.docx
05-08
cesium地形数据的加载和生成。自己整理出来的一个文档，希望能帮助到朋友们。 有问题可以进行讨论交流。谢谢
SuperMap iClient3D for Cesium 构建隧道
SuperMap技术控
04-27 1842
②在绘制隧道走向时，我们根据绘制坐标计算出隧道的方向向量，从而获取线的角度，在这个角度基础上±90°，得到隧道垂直方向，方向+距离即可计算出目标点的世界坐标。第一步获取隧道截面坐标（红色点），第二步利用隧道方向向量，绘制出基于截面坐标且平行与隧道的线段（通视分析），第三步得到线段与地形的交点（蓝色点），第四步用得到的交点坐标将地形挖开。从图中可以看出，隧道口被堵死，我们需要拿到隧道与地形相交部分的节点坐标，然后将地形挖开。该方案的难点在于，如何根据隧道的截面坐标，将地形挖洞，使洞口与隧道模型完全吻合。
了解cesium 资产仓库和OSM building
bcbobo21cn的专栏
03-24 531
cesium osm 3d building 图层；
Cesium 1.87+实现建筑泛光效果
u011115373的博客
02-16 4310
Cesium 3dtiles建筑泛光效果 <!DOCTYPE html> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <ti
createOsmBuildingsAsync createWorldTerrainAsync
web_xiaochen的博客
12-09 469
cesium在1.104.0后就不再支持createWorldTerrain，createOsmBuildings，采用了异步加载的方法。然后调用就行了，我这里是截取的代码，initViewer返回的是viewer对象，大家都懂，自己改下。
Vue+Cesium构建三维项目
唐小爷的博客
06-13 570
Vue+Cesium构建三维项目
Cesium模拟光源特效
u011454763的博客
08-17 1300
参考Shadertoy代码实现光斑点的运动特效，两种方式可实现。1、后处理；2、创建自定义primitive
cesium 时间影响光照效果、地形照明、水体效果
既然青春留不住，还是做个大叔好!
08-27 2471
白膜可以 //UTC var utc=Cesium.JulianDate.fromDate(new Date("2021/07/04 04:00:00")); //北京时间=UTC+8=GMT+8 this.viewer.clockViewModel.currentTime = Cesium.JulianDate.addHours(utc,8,new Cesium.JulianDate());
写一个万家灯火的发光的js背景特效
05-24
以下是一个简单的万家灯火背景特效的JS代码： ```html <!DOCTYPE html> 万家灯火背景特效 body { margin: 0; padding: 0; height: 100vh; background-color: #000; overflow: hidden; } ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

满天飞飞

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值