【cesium】 加载白膜数据,打造科技感建筑泛光效果

一些智慧城市项目经常需要加载建筑白膜数据(3dtiles),并制作炫酷的炫光效果,在cesium中可以使用自定义着色器修改白膜建筑的外观。上效果图

Cesium version: 1.123

Vue2.5.2

 async fetchData() {
          //  Cesium.ExperimentalFeatures.enableModelExperimental = true 
            debugger
            var height = -1.1406325468715177e-9;
            var heading = 0;
            const tileset = await  Cesium.Cesium3DTileset.fromUrl(
              '../../static/lix/tileset.json', //测试数据上海东方明珠建筑数据
             );
             
            this.viewer.scene.primitives.add(tileset,{
                    disableDepthTestDistance: Number.POSITIVE_INFINITY
                });
                tileset.style = new Cesium.Cesium3DTileStyle({
                    color: {
                            conditions: [["true", "color('rgb(51, 153, 255)',1)"]],
                    },
            });
            var customShader = new Cesium.CustomShader({
                //不考虑光照模型
                lightingModel: Cesium.LightingModel.UNLIT,
                //修改片元着色器
                fragmentShaderText: `
                void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {
                            float _baseHeight = 0.0; // 物体的基础高度,需要修改成一个合适的建筑基础高度
                            float _heightRange = 60.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 / 360.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;
        
        },

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值