Cesium-建筑物光环效果

最近在学习Cesium，将使用到的技术、知识分享给你们，共同窗习、共同进步，若有错误，还请不吝赐教。

这个效果比较简单，直接上代码。

一：加载3dtiles

Cesium.Ion.defaultAccessToken = cesium_defaultAccessToken;  // cesium验证
var viewer = new Cesium.Viewer('cesiumContainer', {});        
// 加载3dtiles建筑
var Cesiumtileset = new Cesium.Cesium3DTileset({
     url: "../data/zzl-baimo/tileset.json",
     show: true,
     name:"建筑物",
});
// 添加到primitives中，并手动记录 name，方便查找
var Cesium3DTilesetJZW = viewer.scene.primitives.add(Cesiumtileset);
Cesium3DTilesetJZW.name = "jzw";
viewer.flyTo(Cesiumtileset,{
     duration:0.5,  // 时间
     offset:new Cesium.HeadingPitchRange(1.682848565519711, -0.23204901325136928, 120)             // 偏移
});
复制代码

白膜建筑效果以下：

二：触发特效

制做Shader，进行填充

function func_1() {
        // 找到须要光环效果的3dtiles
        var confprimitives = viewer.scene.primitives._primitives;
        confprimitives.map((val) => {
            if (val.name == "jzw") {
                val.show = true;    // 显示 3dtiles
                let customShader = `                      varying vec3 v_positionEC;                      void main(void){                          vec4 position = czm_inverseModelView * vec4(v_positionEC,1); // 位置                          float glowRange = 20.0; // 光环的移动范围(高度)                          gl_FragColor = vec4(0.2, 0.5, 1.0, 1.0); // 颜色                          gl_FragColor *= vec4(vec3(position.z / 10.0), 1.0); // 渐变                          // 动态光环                          float time = fract(czm_frameNumber / 180.0);                          time = abs(time - 0.5) * 2.0;                          float diff = step(0.005, abs( clamp(position.z / glowRange, 0.0, 1.0) - time));                          gl_FragColor.rgb += gl_FragColor.rgb * (1.0 - diff);                      }                     `
                function updateTile(tile) {
                    let content = tile.content
                    for (let i = 0; i < content.featuresLength; i++) {
                        let feature = content.getFeature(i)
                        let model = feature.content._model
                        if (
                            customShader &&
                            model &&
                            model._sourcePrograms &&
                            model._rendererResources
                        ) {
                            Object.keys(model._sourcePrograms).forEach(key => {
                                let program = model._sourcePrograms[key]
                                model._rendererResources.sourceShaders[
                                    program.fragmentShader
                                    ] = customShader
                            })
                            model._shouldRegenerateShaders = true
                        }
                    }
                }
                // 监听函数
                val.tileVisible.addEventListener(function (tile) {
                    updateTile(tile);
                });
                // viewer.flyTo(val);
            }
        })
​
    }
复制代码

效果以下：

能够本身在customShader中调整颜色、光环高度(建筑物的高度)、光环大小等参数；