CesiumJS【Pro】- #3 万家灯火

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

文章目录

万家灯火

1 说在前面

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

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

2 实现的功能

  • 自定义Shader

3 思路

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

4 关键代码

4.1 构建OsmBuildings

viewer.scene.primiti
了解本专栏 订阅专栏 解锁全文
Cesium 实战 13 - 模型亮度调整，自定义着色器（CustomShader）完美解决模型太暗的问题
非科班Java出身GISer的博客
01-08 4249
Cesium 实战 - 模型亮度调整，自定义着色器（CustomShader）完美解决模型太暗的问题。
cesium点光源（聚光灯效果）
最新发布
God's asylum的博客
05-19 492
Cesium中的聚光灯效果通过点光源实现，具有方向性，形成圆锥形光照区域。聚光灯的核心特征包括光源位置、照射方向、照射角度和衰减。其数学模型基于方向向量、点积、衰减系数和漫反射计算，最终通过着色器代码在Cesium中实现。示例源码展示了如何在Cesium中创建聚光灯效果，结合地形和光源参数调整，生成动态的光照效果。通过CustomShader，开发者可以灵活控制聚光灯的照射范围和衰减特性，适用于三维场景中的精细光照模拟。
【Cesium】调整3dtiles模型的光照
ximi2231的博客
10-14 5838
在网上查了一些代码，Cesium的光照效果的设置是通过webgl修改白膜的材质来实现的，由于巷道本身有贴图材质，用该方法实现的效果不好。最近有个项目需要把掘进车放到巷道里面，加载出来的效果一片漆黑，看不清模型细节。由于Cesium中材质没有自发光的设置，所以只能设置光源。设置光照角度跟随摄像机视角，并实时刷新光照角度。
Cesium聚光灯
u011454763的博客
08-17 1054
Cesium聚光灯
用cesium的后期处理实现类似three.js中的spotLight效果
嘿嘿，大部分都是前端三维开发的时候遇到的问题，顺手解决了，如果你也遇到了和我一样的问题，希望我的文章可以帮到你
10-16 1345
用cesium的后期处理实现类似three.js中的spotLight效果
20210603-华安证券-邮储银行-601658-变革于万家灯火.pdf
06-04
邮储银行作为中国的大型零售银行，在近年来的业务转型与发展中，展现出了一系列具有前瞻性的战略举措和策略。以下是从给定文档中提取的邮储银行零售银行转型的重要知识点。 首先，邮储银行采取了清晰的战略定位，...
html5夜景放烟花绽放动画效果，万家灯火的新年快乐氛围，高分web源代码！
02-19
html5夜景放烟花绽放动画效果，万家灯火的新年快乐氛围，高分web源代码！ html5夜景放烟花绽放动画效果，万家灯火的新年快乐氛围，高分web源代码！ html5夜景放烟花绽放动画效果，万家灯火的新年快乐氛围，高分web源...
话剧万家灯火观后感精选.doc
10-11
【话剧《万家灯火》概述】 《万家灯火》是一部广受欢迎的平民戏剧，以其深入人心的故事和演员们的精湛表演赢得了高人气。该剧以普通百姓的生活为题材，聚焦于社会热点——房屋拆迁与住房改革，通过何家三兄弟的生活...
话剧万家灯火观后感参考.doc
09-16
话剧万家灯火观后感参考.doc
20.（cesium篇）cesium接入加载OSM城市建筑
地图之家
07-28 5139
20.（cesium篇）cesium接入加载OSM城市建筑
23.（cesium篇）cesium城市建筑物光效.zip
06-08
该资源包的执行效果查看地址：https://blog.youkuaiyun.com/m0_60387551/article/details/123184049 “地图之家”专栏中的“23.（cesium篇）cesium城市建筑物光效”。如下载有问题，可联系博主。 解压密码：cesium
Cesium实现建筑物泛光特效，使用自定义shader实现源码
04-26
很多Cesium的特效都是非常绚丽的，最近看到的是蓝色的炫光特效，非常的好看，研究了一下原来是通过自定义shader实现的，具体的可执行源码，直接在Cesium官方的沙盒里就能看到效果，需要的拿去吧，如果有问题可以私信我。
Cesium 模型光源
阿叁博客
12-29 2039
viewer.scene.light = new Cesium.DirectionalLight({ //去除时间原因影响模型颜色 direction: new Cesium.Cartesian3(0.35492591601301104, -0.8909182691839401, -0.2833588392420772) })
cesium 场景点光源
北京-giser的博客
01-17 1085
cesium 场景点光源
cesium城市建筑物光效（cesium篇.23）
地图之家
08-02 4774
听老人家说：多看美女会长寿 地图之家总目录（建议先查看该内容） 文章末尾处提供保证可运行完整代码包，运行如有问题，可“私信”博主。 效果如下所示： 下面献上完整代码，代码重要位置会做相应解释 <html lang="en"> <head> <meta charset="UTF-8"/> <script src="Build/CesiumUnminified/Cesium.js"></script> <link r
Cesium城市建筑物光效GIS
WwyOle的博客
09-24 364
通过加载建筑物数据并在地图上显示建筑物模型，我们可以使用Cesium的光照效果功能来模拟建筑物的光照效果。在上面的代码中，我们首先创建了一个Cesium的Viewer对象，将地图显示在名为"cesiumContainer"的HTML元素中。一旦建筑物数据加载完毕并在地图上显示出来，我们可以通过Cesium的光照效果功能来模拟建筑物的光照效果。本文将介绍如何使用Cesium和GIS技术来实现城市建筑物的光效模拟，并提供相应的源代码示例。在上面的代码中，我们首先将Cesium的光照效果功能启用。
Cesium 点光源
qq_21476953的博客
05-30 616
原理: 利用shadow map.
cesium发光线
zxz20220722的博客
12-26 857
效果。
Cesium实现聚光灯向舞台照射并旋转运动的效果含全部源码
liyan_gis的专栏
10-31 1351
在实际项目应用过程中，需要实现一个隧道只能巡检的功能，模拟一个隧道的探测器扫描的显示效果需求。实现的原理是采用entity实现的，生成多个多边形polygon，利用坐标赋值的CallbackProperty函数实现，动态修改图形的坐标位置。但是，如果圆周上点数量较多的时候，会出现卡顿的现象，这个需要根据具体圆周的大小，和显示的精度进行调节。
写一个万家灯火的发光的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、付费专栏及课程。

余额充值