Cesium特效——城市白模的科技动效的各种效果

最终效果图如下:

实现方法:

步骤一:使用cesiumlib生产白模,格式为3dtiles

注意事项:采用其他方式可能导致白模贴地,从而导致不能实现该效果,例如把步骤二的服务地址改为Cesium Sandcastle 里的3dtiles服务,就不能实现效果图里的效果。原因是cesiumlib生成的白模服务本质上是错误的,是都在一个平面上。所以为保证精确度,场景需要小一些。

设置拉伸高度。

提交处理:

步骤二:设置样式(style)、customShader

导入3dtiles服务:

  const tileset = await Cesium.Cesium3DTileset.fromUrl(
    "第一步生成的3dtiles数据发布的服务地址"
  );
  viewer.scene.primitives.add(tileset);

设置样式:

const style = new Cesium.Cesium3DTileStyle({
    color: {
      conditions: [
        ["${Floor} < 10.0", "color('#00356A')"], // 深蓝色
        ["(${Floor} >= 10.0) && (${Floor} < 20.0)", "color('#0099FF')"], // 亮蓝色
        ["(${Floor} >= 20.0) && (${Floor} < 30.0)", "color('#0066CC')"], // 电蓝色
        ["(${Floor} >= 30.0) && (${Floor} < 60.0)", "color('#00FFFF')"], // 荧光蓝
        ["${Floor} >= 60.0", "color('#0033CC')"], // 深蓝色
      ],
    },
  });
tileset.style = style;

设置shader:

// 增加自定义shader
  let customShader = new Cesium.CustomShader({
    //PBR(基于物理的渲染)或 UNLIT,具体取决于所需的结果。
    lightingModel: Cesium.LightingModel.UNLIT,
    fragmentShaderText: `
            void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {
                float _baseHeight = 0.0; // 物体的基础高度,需要修改成一个合适的建筑基础高度
                float _heightRange = 30.0; // 高亮的范围(_baseHeight ~ _baseHeight + _heightRange) 默认是 0-60米
                float _glowRange = 300.0; // 光环的移动范围(高度)
                float vtxf_height = fsInput.attributes.positionMC.z-_baseHeight;
                float vtxf_a11 = fract(czm_frameNumber / 120.0) * 3.14159265 * 2.0;
                float vtxf_a12 = vtxf_height / _heightRange + sin(vtxf_a11) * 0.1;
                material.diffuse*= vec3(vtxf_a12, vtxf_a12, vtxf_a12);
                float vtxf_a13 = fract(czm_frameNumber / 120.0);
                float vtxf_h = clamp(vtxf_height / _glowRange, 0.0, 1.0);
                vtxf_a13 = abs(vtxf_a13 - 0.5) * 2.0;
                float vtxf_diff = step(0.005, abs(vtxf_h - vtxf_a13));
                material.diffuse += material.diffuse * (1.0 - vtxf_diff);
            }	 	
            `,
  });
  tileset.customShader = customShader;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/958363.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

仿 RabbitMQ 的消息队列3(实战项目)

七. 消息存储设计 上一篇博客已经将消息统计文件的读写代码实现了&#xff0c;下一步我们将实现创建队列文件和目录。 实现创建队列文件和目录 初始化 0\t0 这样的初始值. //创建队列对应的文件和目录&#xff1a;public void createQueueFile(String queueName) throws IO…

无人机 PX4 飞控 | PX4源码添加自定义参数方法并用QGC显示与调整

无人机 PX4 飞控 | PX4源码添加自定义参数方法并用QGC显示与调整 0 前言 之前文章添加了一个自定义的模块&#xff0c;本篇文章在之前的自定义模块中&#xff0c;添加两个自定义参数 使用QGC显示出来&#xff0c;并通过QGC调整参数值&#xff0c;代码实现参数更新 新增的参…

【真机调试】前端开发:移动端特殊手机型号有问题,如何在电脑上进行调试?

目录 前言一、怎么设置成开发者模式&#xff1f;二、真机调试基本步骤&#xff1f; &#x1f680;写在最后 前言 edge浏览器 edge://inspect/#devices 谷歌浏览器&#xff08;开tizi&#xff09; chrome://inspect 一、怎么设置成开发者模式&#xff1f; Android 设备 打开设…

2024年第十五届蓝桥杯青少组国赛(c++)真题—快速分解质因数

快速分解质因数 完整题目和在线测评可点击下方链接前往&#xff1a; 快速分解质因数_C_少儿编程题库学习中心-嗨信奥https://www.hixinao.com/tiku/cpp/show-3781.htmlhttps://www.hixinao.com/tiku/cpp/show-3781.html 若如其他赛事真题可自行前往题库中心查找&#xff0c;题…

Linux系统下速通stm32的clion开发环境配置

陆陆续续搞这个已经很久了。 因为自己新电脑是linux系统无法使用keil&#xff0c;一开始想使用vscode里的eide但感觉不太好用&#xff1b;后面想直接使用cudeide但又不想妥协&#xff0c;想趁着这个机会把linux上的其他单片机开发配置也搞明白&#xff1b;而且非常想搞懂cmake…

【FFmpeg】FLV 格式分析 ③ ( Tag Body 数据块体结构 - Vedio Data 视频数据 )

文章目录 一、Tag Body 数据块体结构 - Video Data 视频数据1、Vedio Data 视频数据 类型标识2、Vedio Data 视频数据 结构分析3、Composition Time Offset 字段涉及的时间计算4、AVC Packet Type 字段说明① AVC Sequence Header 类型② AVC NALU 类型③ AVC End of Sequence …

尚硅谷大数据数仓项目superset db upgrade报错解决(2025.1.23解决)

尚硅谷大数据数仓项目superset db upgrade报错解决&#xff08;2025.1.23解决&#xff09;和 superset安装MySQL报错解决 解决方法&#xff08;2025.1.23解决&#xff09; 0.卸载之前安装好的Superset -- 退出当前环境 conda deactivate-- 卸载Superset conda remove -n sup…

vue3+uniapp开发鸿蒙初体验

去年7月20号&#xff0c;uniapp官网就已经开始支持鸿蒙应用开发了&#xff0c;话不多说&#xff0c;按照现有规则进行配置实现一下鸿蒙开发效果&#xff1b; 本文基于macOS Monterey 版本 12.6.5实现 开发鸿蒙的前置准备 这里就直接说我的版本&#xff1a; DevEco Studio 5.…

996引擎 - 前期准备-配置开发环境

996引擎 - 前期准备 官网搭建服务端、客户端单机搭建 开发环境配置后端开发环境配置环境 前端开发环境配置环境 后端简介前端简介GUILayoutGUIExport 官网 996传奇引擎官网 所有资料从官网首页开始&#xff0c;多探索。 文档&#xff1a; 996M2-服务端Lua 996M2-客户端Lua 搭…

Python FastAPI 实战应用指南

文章目录 1. 前言2. FastAPI 的优势3. FastAPI 快速入门3.1 安装3.2 最简单的 API 案例 4. 基础功能应用4.1 模型验证和参数校验4.2 实现高级计划&#xff1a;用于实时功能和快速发布 5. 高级应用5.1 实现 OAuth2 认证5.2 提供 WebSocket 支持 6. 总结 1. 前言 FastAPI 是一个…

Vue3 项目打包并部署到Nginx

一、安装Nginx 官网下载链接&#xff1a; nginx: downloadhttps://nginx.org/en/download.htmlhttps://nginx.org/en/download.html 下载后解压并双击 nginx.exe 启动服务&#xff1a; 打开浏览器&#xff0c;访问 http://localhost/ &#xff0c;若出现如下页面&#xff0c…

二叉树(了解)c++

二叉树是一种特殊的树型结构&#xff0c;它的特点是: 每个结点至多只有2棵子树(即二叉树中不存在度大于2的结点) 并且二叉树的子树有左右之分&#xff0c;其次序不能任意颠倒&#xff0c;因此是一颗有序树 以A结点为例&#xff0c;左边的B是它的左孩子&#xff0c;右边的C是…

会议签到系统的架构和实现

会议签到系统的架构和实现 摘要:通过定制安卓会议机开机APP呈现签到界面&#xff0c;并且通过W/B结构采集管理签到信息&#xff0c;实现会议签到的功能。为达到此目标本文将探讨使用Redis提供后台数据支持&#xff1b;使用SocketIo处理适时消息&#xff1b;使用Flask进行原型开…

PIC单片机HEX文件格式分析

在调试PIC单片机在bootloader程序时&#xff0c;需要将hex文件转换为bin文件&#xff0c;在转换之前先了解一下hex文件中数据是如何定义的。 直接打开一个LED灯闪烁的程序生成的hex文件&#xff0c;芯片型号为PIC18F46K80 可以看到每条数据都是由6部分组成的&#xff0c;下面分…

17-使用椭圆制作鼻子

17-使用椭圆制作鼻子_哔哩哔哩_bilibili17-使用椭圆制作鼻子是一次性学会 Canvas 动画绘图&#xff08;核心精讲50个案例&#xff09;2023最新教程的第18集视频&#xff0c;该合集共计53集&#xff0c;视频收藏或关注UP主&#xff0c;及时了解更多相关视频内容。https://www.bi…

通过 Visual Studio Code 启动 IPython

在Visual Studio Code 中&#xff0c;你可以使用内置的终端来启动 ipython&#xff0c;当然首先要安装好ipython。 安装ipython的方法是在cmd里面输入以下命令安装&#xff1a; pip install ipython 启动ipython的步骤如下&#xff1a; 打开 VSCode 终端&#xff1a; 在 VSCo…

网络(三) 协议

目录 1. IP协议; 2. 以太网协议; 3. DNS协议, ICMP协议, NAT技术. 1. IP协议: 1.1 介绍: 网际互连协议, 网络层是进行数据真正传输的一层, 进行数据从一个主机传输到另一个主机. 网络层可以将数据主机进行传送, 那么传输层保证数据可靠性, 一起就是TCP/IP协议. 路径选择: 确…

Qt基础项目篇——Qt版Word字处理软件

一、核心功能 本软件为多文档型程序&#xff0c;界面是标准的 Windows 主从窗口 拥有&#xff1a;主菜单、工具栏、文档显示区 和 状态栏。 所要实现的东西&#xff0c;均在下图了。 开发该软件&#xff0c;主要分为下面三个阶段 1&#xff09;界面设计开发 多窗口 MDI 程序…

Python+langchain+通义千问qwen(大模型实现自己的聊天机器人)

Langchain langchain是一个用于开发由语言模型驱动的应用程序的框架&#xff0c;致力于简化AI模型应用的开发。简单来说&#xff0c;langchain就是一个&#xff08;帮助开发者轻松完成AI模型应用开发的&#xff09;框架,现在支持python和js两个版本&#xff0c;它集成多种大语…

FPGA中场战事

2023年10月3日,英特尔宣布由桑德拉里维拉(Sandra Rivera)担任“分拆”后独立运营的可编程事业部首席执行官。 从数据中心和人工智能(DCAI)部门总经理,转身为执掌该业务的CEO,对她取得像AMD掌门人苏姿丰博士类似的成功,无疑抱以厚望。 十年前,英特尔花费167亿美元真金白银…