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;
}
相关推荐
SoFlu软件机器人4 小时前
飞算科技:以原创之力,开启Java开发新纪元与行业数智变革
人工智能·科技
189228048619 小时前
NX947NX955美光固态闪存NX962NX966
大数据·服务器·网络·人工智能·科技
Ashlee_code12 小时前
北极圈金融科技革命:奥斯陆证券交易所的绿色跃迁之路 ——从Visma千倍增长到碳信用衍生品,解码挪威资本市场的技术重构
科技·算法·金融·重构·架构·系统架构·区块链
GAOJ_K17 小时前
滚珠花键在汽车制造中有哪些高要求?
科技·自动化·汽车·制造
qq10549415161 天前
江协科技STM32 12-2 BKP备份寄存器&RTC实时时钟
科技·stm32·实时音视频
v先v关v住v获v取1 天前
热能小车cad【12张】三维图+设计说明书
科技
图灵学术计算机论文辅导1 天前
提示+掩膜+注意力=Mamba三连击,跨模态任务全面超越
论文阅读·人工智能·经验分享·科技·深度学习·考研·计算机视觉
I'm a winner2 天前
LaTeX 复杂图形绘制教程:从基础到进阶
经验分享·笔记·科技
永洪科技2 天前
永洪科技华西地区客户交流活动成功举办!以AI之力锚定增长确定性
大数据·人工智能·科技·数据分析·数据可视化
科士威传动2 天前
滚珠导轨在电子制造中的流畅性优势
科技·自动化·制造