cesium实现六边形光波扩散特效

上一节我们学习了:cesium着色器实现旋转雷达特效今天我们要学习的是cesium实现六边形光波扩散特效。

动态效果

首先准备一张图片

cesium实现六边形光波扩散特效，首先需要准备一张图片，为接下来的动画做准备。

选择位置，创建矩形

接下来我们需要制定一个坐标，用来放置光波特效。

this.entity = viewer.entities.add({
  rectangle: {
    coordinates: Cesium.Rectangle.fromDegrees(
      113.3091,
      23.119,
      113.3141,
      23.124
    ),
    material: this.LightSpreadMaterial,
  },
});

给矩形设置材质

接下来我们来给矩形设置材质，img就是我们上面截图六边形图片，通过texture2D来将图片传进去。

Cesium.Material._materialCache.addMaterial("LightSpreadMaterial", {
    fabric: {
        type: "LightSpreadMaterial",
        uniforms: {
            uTime: 0,
            image: img,
        },
        source: `
  czm_material czm_getMaterial(czm_materialInput materialInput)
  {
    // 生成默认的基础材质
    czm_material material = czm_getDefaultMaterial(materialInput);
    vec2 st = materialInput.st;
    // 根据uv采样颜色
    vec4 color = texture2D(image, st);
    material.diffuse = color.rgb;
    material.alpha = color.a;
    return material;
  }

  `,
    },
});

添加扩散效果

使用gsap来给材质增加扩散效果。通过设置经纬度来实现扩散范围，通过yoyo来实现来回扩散。

gsap.to(this.params, {
  minlot: 113.1991,
  minLat: 23.009,
  maxlot: 113.4241,
  maxLat: 23.234,
  duration: 5,
  repeat: -1,
 yoyo: true,
  ease: "linear",
  onUpdate: () => {
    this.entity.rectangle.coordinates = Cesium.Rectangle.fromDegrees(
      this.params.minlot,
      this.params.minLat,
      this.params.maxlot,
      this.params.maxLat
    );
  },
});

实例演示地址

cesium实现六边形光波扩散特效

当前内容为观看threejs视频 Three.js可视化企业实战WEBGL课课程-着色器实现旋转雷达特效-实践的学习笔记

当前学习笔记实例代码下载

代码运行环境：vue3 + vite + js nodejs 14