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

最终效果图如下:

实现方法:

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

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

设置拉伸高度。

提交处理:

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

导入3dtiles服务:

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

设置样式:

javascript 复制代码
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:

javascript 复制代码
// 增加自定义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;
}
相关推荐
Ashlee_code1 天前
香港券商櫃台系統跨境金融研究
java·python·科技·金融·架构·系统架构·区块链
SYNCON22 天前
[新启航]白光干涉仪与激光干涉仪的区别及应用解析
科技·3d·制造
杭州泽沃电子科技有限公司2 天前
工业环境电缆火灾预防的分布式光纤在线监测
运维·人工智能·科技·安全
一念&2 天前
今日科技热点 | 量子计算突破、AI芯片与5G加速行业变革
人工智能·科技·量子计算
attitude.x2 天前
GEO优化供应商:AI搜索时代的“答案”构建与移山科技的引领,2025高性价比实战指南
人工智能·科技
是乐谷2 天前
燧原科技招大模型训练算法工程师
科技·算法
门思科技2 天前
LoRaWAN 的网络拓扑全解析:架构、原理与应用实践
服务器·网络·人工智能·科技·物联网·架构
星域智链2 天前
车载 GPS 与手机导航的终极对决:谁在复杂路况下更胜一筹?
大数据·科技·ai
小鹿的工作手帐3 天前
有鹿机器人:智慧清洁新时代的引领者
人工智能·科技·机器人
我的offer在哪里3 天前
8 月 20 日科技新动态:多领域创新成果涌现
科技