cesuim WallFlowMaterialProperty实现动态墙

深色蓝色区域会不断的从下向上动态流动 不断的重复

动态效果可以访问此链接

cesuim 动态墙效果-CSDN直播

代码如下

const addDynamicWall=(positions, color)=> {
    let clientX = 0;
    let clientY = 0;

    if (!window['theposition']) {
      window['_begintime'] = Date.now();
    }

    var tpos = Cesium.Cartesian3.fromDegrees(positions[0], positions[1], 100);

    class WallFlowMaterialProperty {
      constructor(options) {
        this._definitionChanged = new Cesium.Event();
        this._color = options.color;
        this._startingpos = 0.0;
        this._clientX = -1.0;
        this._clientY = -1.0;
        this._tposx = tpos.x;
        this._tposy = tpos.y;
        this._tposz = tpos.z;
        this._begintime = window['_begintime'];

        let upStartingpos = ()=>{
          requestAnimationFrame(()=>{
            this._startingpos -= 0.009;
            if (clientX)
              this._clientX = clientX;

            if (clientY)
              this._clientY = clientY;

            upStartingpos();
          })
        }

        upStartingpos();


        // setInterval(()=>{
        //   this._startingpos += 0.01;
        // },100);
      }

      get isConstant() {
        return false;
      }

      get definitionChanged() {
        return this._definitionChanged;
      }

      getType(time) {
        return Cesium.Material.WallFlowMaterialType;
      }

      getValue(time, result) {
        if (!Cesium.defined(result)) {
          result = {};
        }
        result.color = this._color;
        result.startingpos = this._startingpos;
        result.clientx = this._clientX;
        result.clienty = this._clientY;
        result.tposx = this._tposx;
        result.tposy = this._tposy;
        result.tposz = this._tposz;
        result.ttime =  (Date.now() - this._begintime) / 100;
        result.begintime = 0.1;

        // result.color = Cesium.Color.fromRandom({ alpha: 1.0 });
        return result
      }

      equals(other) {
        return (this === other || (other instanceof WallFlowMaterialProperty && Cesium.Property.equals(this._color, other._color) ))
      }
    }

    Object.defineProperties(WallFlowMaterialProperty.prototype, {color: Cesium.createPropertyDescriptor('color')
      , startingpos: Cesium.createPropertyDescriptor('startingpos')
      , clientx: Cesium.createPropertyDescriptor('clientx')
      , clienty: Cesium.createPropertyDescriptor('clienty')
      , tposx: Cesium.createPropertyDescriptor('tposx')
      , tposy: Cesium.createPropertyDescriptor('tposy')
      , tposz: Cesium.createPropertyDescriptor('tposz')
      , ttime: Cesium.createPropertyDescriptor('ttime')
      , begintime: Cesium.createPropertyDescriptor('begintime')
    })
    Cesium.Material.WallFlowMaterialProperty = 'WallFlowMaterialProperty';
    Cesium.Material.WallFlowMaterialType = 'WallFlowMaterialType';
    Cesium.Material.WallFlowMaterialSource = `    
            uniform vec4 color;  
            uniform float startingpos;
            uniform float clientx;
            uniform float clienty;
            uniform float tposx;
            uniform float tposy;
            uniform float tposz;
            uniform float ttime;
            uniform float begintime;
             czm_material czm_getMaterial(czm_materialInput materialInput){
                 czm_material material = czm_getDefaultMaterial(materialInput); 
                  vec2 st = materialInput.st;
                  
                 float thedist = distance(gl_FragCoord.xy, vec2(clientx,clienty));
                 
                 
                  vec3 worldPosition = (czm_inverseView * vec4(-materialInput.positionToEyeEC, 1.0)).xyz;
                 float theposdist = distance(worldPosition, vec3(tposx,tposy,tposz));
                 material.emission = color.rgb;
                 // material.emission =  3.0 * clamp(1.0 / (abs(theposdist - (ttime - begintime)) / 1000.0), 0.5, 5.0) * clamp(pow((1.5 - (thedist / 400.0)), 3.0), 1.0, 5.5) * smoothstep(0.2, 0.8, st.t) * color.rgb;
                 // material.emission = color.rgb * clamp((smoothstep(0.0, 0.007,sin((theposdist / 50.0 - ttime * 4.0) / 10.0) - 0.995) + 1.0) * 3.0, 0.0, 5.0);
                 //  material.emission = color.rgb * 2.0;
                 
                 float fernal = pow((1.0 - abs(dot(normalize(materialInput.normalEC), normalize(materialInput.positionToEyeEC)))), 2.0) + 0.2;
                 // if (st.t > 0.5) {
                    material.alpha = max(0.0, (mod(st.t + startingpos, 1.0) - 0.1));
                 // } else {
                 //    material.alpha = 1.0;
                 // }
                 return material;    
            }    `
    Cesium.Material._materialCache.addMaterial(Cesium.Material.WallFlowMaterialType, {
      fabric: {type: Cesium.Material.WallFlowMaterialType, uniforms: {color: Cesium.Color.fromRandom({ alpha: 1.0 }), startingpos:0.1, clientx: -1.0, clienty:-1.0, tposx:0, tposy:0, tposz:0.1, ttime:0, begintime:0.1},
        source: Cesium.Material.WallFlowMaterialSource},
      translucent: function (material) {
        return true;
      }
    })


    /*viewer.entities.add({
      name: "立体墙效果",
      wall: {
        positions: Cesium.Cartesian3.fromDegreesArray(positions),  // 墙体位置及高度
        maximumHeights: new Array(positions.length / 2).fill(1000),
        minimumHeights: new Array(positions.length / 2).fill(0),
        // material:new WallFlowMaterialProperty({color:color}),
        material:new WallFlowMaterialProperty({color:color}),
      },
    })*/
    return new WallFlowMaterialProperty({color:color});
  }


let allWallEntities = []; //所有墙实体
//添加动态墙
export const drawDynamicWall = (positionsArr,colorStr,height) =>{
    var wallEntities = viewer.entities.add({
        wall: {
            positions: Cesium2.Cartesian3.fromDegreesArray(positionsArr),  // 墙体位置及高度
            maximumHeights: new Array(positionsArr.length / 2).fill(height),
            minimumHeights: new Array(positionsArr.length / 2).fill(0),
            // material:addhemisphere.addDynamicWall(positionsArr,Cesium2.Color.PALEGREEN.withAlpha(0.2)),
            material:addDynamicWall(positionsArr,Cesium2.Color.fromCssColorString(colorStr).withAlpha(0.2)),
        },
    })
    allWallEntities.push(wallEntities)
};

// 删除动态墙
export const removeAllWallEntities = () =>{
    if(allWallEntities && allWallEntities.length > 0) {
        allWallEntities.forEach((item)=>{
            viewer.entities.remove(item);
        })
    }
    allWallEntities = [];
};