CesiumJS【Pro】- #3 万家灯火

已于 2024-08-10 20:02:31 修改
阅读量473 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： MyCesiumJS Pro 文章标签： cesium
于 2023-03-09 21:48:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AlanL/article/details/129432184
本文介绍如何利用Cesium 1.87版本后的自定义Shader功能，为3DTileset创建万家灯火的视觉效果。通过Cesium.createOsmBuildings建立三维建筑，并借助自定义纹理实现动态灯光变化。展望中提到可以结合时间控制灯光开关，增加霓虹灯效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

文章目录

万家灯火

1 说在前面

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

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

2 实现的功能

  • 自定义Shader</
了解本专栏 订阅专栏 解锁全文
20.（cesium篇）cesium接入加载OSM城市建筑
地图之家
07-28 4906
20.（cesium篇）cesium接入加载OSM城市建筑
cesium点光源（聚光灯效果）
最新发布
God's asylum的博客
05-19 143
Cesium中的聚光灯效果通过点光源实现，具有方向性，形成圆锥形光照区域。聚光灯的核心特征包括光源位置、照射方向、照射角度和衰减。其数学模型基于方向向量、点积、衰减系数和漫反射计算，最终通过着色器代码在Cesium中实现。示例源码展示了如何在Cesium中创建聚光灯效果，结合地形和光源参数调整，生成动态的光照效果。通过CustomShader，开发者可以灵活控制聚光灯的照射范围和衰减特性，适用于三维场景中的精细光照模拟。
Cesium聚光灯
u011454763的博客
08-17 998
Cesium聚光灯
用cesium的后期处理实现类似three.js中的spotLight效果
嘿嘿，大部分都是前端三维开发的时候遇到的问题，顺手解决了，如果你也遇到了和我一样的问题，希望我的文章可以帮到你
10-16 1147
用cesium的后期处理实现类似three.js中的spotLight效果
Cesium 模型光源
阿叁博客
12-29 1957
viewer.scene.light = new Cesium.DirectionalLight({ //去除时间原因影响模型颜色 direction: new Cesium.Cartesian3(0.35492591601301104, -0.8909182691839401, -0.2833588392420772) })
cesium 场景点光源
北京-giser的博客
01-17 994
cesium 场景点光源
cesium城市建筑物光效（cesium篇.23）
地图之家
08-02 4630
听老人家说：多看美女会长寿 地图之家总目录（建议先查看该内容） 文章末尾处提供保证可运行完整代码包，运行如有问题，可“私信”博主。 效果如下所示： 下面献上完整代码，代码重要位置会做相应解释 <html lang="en"> <head> <meta charset="UTF-8"/> <script src="Build/CesiumUnminified/Cesium.js"></script> <link r
Cesium 实战 13 - 模型亮度调整，自定义着色器（CustomShader）完美解决模型太暗的问题
非科班Java出身GISer的博客
01-08 3765
Cesium 实战 - 模型亮度调整，自定义着色器（CustomShader）完美解决模型太暗的问题。
Cesium城市建筑物光效GIS
WwyOle的博客
09-24 321
通过加载建筑物数据并在地图上显示建筑物模型，我们可以使用Cesium的光照效果功能来模拟建筑物的光照效果。在上面的代码中，我们首先创建了一个Cesium的Viewer对象，将地图显示在名为"cesiumContainer"的HTML元素中。一旦建筑物数据加载完毕并在地图上显示出来，我们可以通过Cesium的光照效果功能来模拟建筑物的光照效果。本文将介绍如何使用Cesium和GIS技术来实现城市建筑物的光效模拟，并提供相应的源代码示例。在上面的代码中，我们首先将Cesium的光照效果功能启用。
23.（cesium篇）cesium城市建筑物光效.zip
06-08
该资源包的执行效果查看地址：https://blog.csdn.net/m0_60387551/article/details/123184049 “地图之家”专栏中的“23.（cesium篇）cesium城市建筑物光效”。如下载有问题，可联系博主。 解压密码：cesium
Cesium 点光源
qq_21476953的博客
05-30 526
原理: 利用shadow map.
Cesium实现建筑物泛光特效，使用自定义shader实现源码
04-26
很多Cesium的特效都是非常绚丽的，最近看到的是蓝色的炫光特效，非常的好看，研究了一下原来是通过自定义shader实现的，具体的可执行源码，直接在Cesium官方的沙盒里就能看到效果，需要的拿去吧，如果有问题可以私信我。
cesium发光线
zxz20220722的博客
12-26 809
效果。
Cesium实现聚光灯向舞台照射并旋转运动的效果含全部源码
liyan_gis的专栏
10-31 1281
在实际项目应用过程中，需要实现一个隧道只能巡检的功能，模拟一个隧道的探测器扫描的显示效果需求。实现的原理是采用entity实现的，生成多个多边形polygon，利用坐标赋值的CallbackProperty函数实现，动态修改图形的坐标位置。但是，如果圆周上点数量较多的时候，会出现卡顿的现象，这个需要根据具体圆周的大小，和显示的精度进行调节。
cesium 实现体积光 （Volumetric Light） 圣光 （Godrays）
baidu_38716385的博客
04-23 2730
cesium 实现体积光（Volumetric Light），又称圣光（Godrays），基于cesium使用后处理接口,使用径向模糊算法实现。不需要修改源码。融合两张图片的webgl算法
Cesium高级教程-自定义光源-光照原理
xt3d的博客
11-05 886
关于光照原理可以参考WebGL编程指南第八章的相关内容，里面有非常详细的介绍。本章的重点在于如何在Cesium中去实现，而不是研究光照的原理，要看原理随便百度一下文章多如牛毛。获取WebGL编程指南可以百度搜索下载电子版，或者联系作者获取在编程世界中，所有抽象的问题最后最会都可以转变为数学公式的表达，以点光源为例，计算公式为最后的颜色=光源颜色 x 物体基底色 x（ 光线方向 . 物体法线 ），所以如果要在Cesium中实现点光源，首先需要弄明白公式中每个参与运算的变量是什么？如何获取？
Cesium 实战 - 模型亮度调整（解决模型非常暗的问题）
非科班Java出身GISer的博客
05-22 5881
Cesium 实战 - 模型亮度调整（解决模型非常暗的问题）。
【cesium】打造科技感建筑泛光效果
yb305
12-31 296
一些智慧城市项目经常需要加载建筑白膜数据（3dtiles），并制作炫酷的炫光效果，在cesium中可以使用自定义着色器修改白膜建筑的外观。当然，这个影像底色不好看，也需要改一改，需要使用cesium1.87+提供的。API，来自定义shader。
cesium 3d建筑物光效 泛光实体
God's asylum的博客
02-09 1699
cesium城市泛光特效，直接复制即可
写一个万家灯火的发光的js背景特效
05-24
以下是一个简单的万家灯火背景特效的JS代码： ```html <!DOCTYPE html> <html> <head> <title>万家灯火背景特效</title> <style type="text/css"> body { margin: 0; padding: 0; height: 100vh; background-color: #000; overflow: hidden; } canvas { position: absolute; top: 0; left: 0; z-index: -1; } </style> </head> <body> <canvas id="myCanvas"></canvas> <script type="text/javascript"> window.onload = function() { var canvas = document.getElementById(&#39;myCanvas&#39;); canvas.width = window.innerWidth; canvas.height = window.innerHeight; var ctx = canvas.getContext(&#39;2d&#39;); var particles = []; function Particle() { this.x = canvas.width * Math.random(); this.y = canvas.height * Math.random(); this.vx = (Math.random() - 0.5) * 5; this.vy = (Math.random() - 0.5) * 5; this.radius = 5; } Particle.prototype.draw = function() { ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2); ctx.fillStyle = &#39;rgba(255, 255, 255, 0.8)&#39;; ctx.fill(); }; Particle.prototype.update = function() { this.x += this.vx; this.y += this.vy; if (this.x < 0 || this.x > canvas.width) { this.vx *= -1; } if (this.y < 0 || this.y > canvas.height) { this.vy *= -1; } }; for (var i = 0; i < 1000; i++) { particles.push(new Particle()); } function loop() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < particles.length; i++) { particles[i].draw(); particles[i].update(); } requestAnimationFrame(loop); } loop(); }; </script> </body> </html> ``` 该代码会在页面背景中生成许多随机移动的白色圆点，效果类似于万家灯火。可以通过调整代码中的参数来改变特效的效果，例如圆点数量、运动速度、颜色透明度等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

满天飞飞

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

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

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

打赏作者

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

抵扣说明：

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

余额充值