cesium - 特效篇（自定义材质）： 动态卫星传感波

效果图：

封装材质：

import gsap from "gsap";
import * as Cesium from "cesium";

export default class conicalWaveMaterialPropery {
  constructor() {
    this.definitionChanged = new Cesium.Event();
    Cesium.Material._materialCache.addMaterial("CustomMaterial", {
      fabric: {
        type: "CustomMaterial",
        uniforms: {
          uTime: 0,
          color: new Cesium.Color.fromBytes(100, 180, 200),
          repeat: 40,
          offset: 0,
          thickness: 0.2,
        },
        source: `uniform vec4 color; 
                uniform float repeat; 
                uniform float offset; 
                uniform float thickness;
                czm_material czm_getMaterial(czm_materialInput materialInput){
                    czm_material material = czm_getDefaultMaterial(materialInput);
                    float sp = 1.0/repeat;
                    vec2 st = materialInput.st;
                    float dis = distance(st, vec2(0.5));
                    float m = mod(dis + offset, sp);
                    float a = step(sp*(1.0-thickness), m); 
                    material.diffuse = color.rgb;
                    material.alpha = a * color.a;
                    return material;
        }       
        `,
      },
      translucent: true,
    });
    this.params = {
      uTime: 0,
    };
    gsap.to(this.params, {
      uTime: 0.5 /* 从当前值过渡到 0.5 */,
      duration: 5 /* 动画的持续时间 */,
      repeat: -1 /* 动画的重复次数。-1 表示无限重复，即动画会一直循环播放。 */,
      yoyo: false /* 动画是否使用交替反向播放 */,
    });
  }
  getType(time) {
    return "CustomMaterial";
  }
  getValue(time, result) {
    result.uTime = this.params.uTime;
    result.offset -= 0.01;
    if (result.offset > 1.0) {
      result.offset = 0.0;
    }
    return result;
  }
}

自己调整参数，导入组件中直接调用