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中調整顏色、光環高度(建築物的高度)、光環大小等參數；