Cesium自定义电子围栏特效材质

1.new Cesium.Viewer中添加

requestWebgl1: true,

编写材质，主要分三步

（1）定义MaterialProperty

（2）设置材质

（3）添加材质

DynamicWallMaterial.js

javascript 复制代码

//定义材质对象及变量
function DynamicWallMaterialProperty(color, duration) {
    this._definitionChanged = new Cesium.Event();
    this._color = undefined;
    this._colorSubscription = undefined;    
    this._time = (new Date()).getTime();

    this.color = color;
    this.duration = duration;
  }

  //Cesium.MaterialProperty是一个抽像类（https://cesium.com/learn/cesiumjs/ref-doc/MaterialProperty.html），
  //必须定义isConstant 、definitionChanged、equals()、getType()、getValue()
  //定义或修改材质属性
  Object.defineProperties(DynamicWallMaterialProperty.prototype, {
    isConstant: {
      get: function () {
        return false;
      }
    },
    definitionChanged: {
      get: function () {
        return this._definitionChanged;
      }
    },
    color: Cesium.createPropertyDescriptor('color')
  });

  //定义材质对象方法getType
  DynamicWallMaterialProperty.prototype.getType = function (time) {
    return 'DynamicWall';
  }

   //定义材质对象方法getValue，给下文的uniforms附值
  DynamicWallMaterialProperty.prototype.getValue = function (time, result) {
    if (!Cesium.defined(result)) {
      result = {};
    }
    result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.WHITE, result.color);
    result.image = Cesium.Material.DynamicWallImage;
    result.time = (((new Date()).getTime() - this._time) % this.duration) / this.duration;
    return result;
  }

  //定义材质对象方法equals
  DynamicWallMaterialProperty.prototype.equals = function (other) {
    return this === other || (other instanceof DynamicWallMaterialProperty && Property.equals(this._color, other._color))
  };

  Cesium.DynamicWallMaterialProperty = DynamicWallMaterialProperty;
  Cesium.Material.DynamicWallType = 'DynamicWall';
  Cesium.Material.DynamicWallImage = "src/assets/imgs/color.png";//图片
  Cesium.Material.DynamicWallSource =
    `czm_material czm_getMaterial(czm_materialInput materialInput)
            {
                float time = czm_frameNumber/100.0;
                czm_material material = czm_getDefaultMaterial(materialInput);
                vec2 st = materialInput.st;
                vec4 colorImage = texture2D(image, vec2(fract(1.0*st.t - time), st.t));
                material.alpha = colorImage.a * color.a;
                material.diffuse = (colorImage.rgb+color.rgb)/2.0;
                return material;
            }`      //由上到下


  //添加自定义材质
  Cesium.Material._materialCache.addMaterial(Cesium.Material.DynamicWallType, {
    fabric: {
      //纹理类型
      type: Cesium.Material.DynamicWallType,
      //传递给着色器的外部属性
      uniforms: {
        color: new Cesium.Color(0.0, 0.0, 0.0, 1),
        image: Cesium.Material.DynamicWallImage,
        time: 0
      },
      //纹理资源
      source: Cesium.Material.DynamicWallSource
    },
    //是否透明
    translucent: function (material) {
      return true;
    }
  })

  
export default DynamicWallMaterialProperty;

3.使用材质

javascript 复制代码

import DynamicWallMaterialProperty from "../materials/DynamicWallMaterial.js";

//...

function CustomMaterialTest() {
  
  var dynamicWall = window.Viewer.entities.add({
    wall: {
      positions: Cesium.Cartesian3.fromDegreesArrayHeights([
        118.286419, 31.864436, 20000.0,
        119.386419, 31.864436, 20000.0,
        119.386419, 32.864436, 20000.0,
        118.286419, 32.864436, 20000.0,
        118.286419, 31.864436, 20000.0,
      ]),
      material: new DynamicWallMaterialProperty(Cesium.Color.fromBytes(255, 200, 10).withAlpha(0.8), 30),
    }
  })
  window.Viewer.flyTo(dynamicWall)
}