前端~三维地图（cesium）动态材质飞线

自定义飞线材质 FlyLineMaterial.ts

import * as Cesium from "cesium";

// 修改：新增流动区域颜色和速率参数
const FlyLineShaderSource = `
uniform vec4 color;
uniform vec4 flowColor; 
uniform float percent;
uniform float speed;

czm_material czm_getMaterial(czm_materialInput materialInput) {
  vec4 outColor = color;
  czm_material material = czm_getDefaultMaterial(materialInput);
  vec2 st = materialInput.st;

  float time = fract(czm_frameNumber * speed / 144.0);
  float startPosition = time;

  if(st.s > startPosition - percent && st.s < startPosition) {
    float value = (st.s - (startPosition - percent)) / percent;
    outColor.rgb = mix(color.rgb, flowColor.rgb, value);
  }

  material.diffuse = czm_gammaCorrect(outColor.rgb);
  material.alpha = outColor.a;
  return material;
}`;

type FlyLineOptions = {
  color: Cesium.Color; // 线主体颜色
  flowColor: Cesium.Color; // 流动线颜色
  percent: number; //流动区域占整个线段的比例（0~1）
  speed: number; //流动速度
};

export class FlyLineMaterial extends Cesium.Material {
  constructor(options: FlyLineOptions) {
    const { color, flowColor, percent, speed } = options; // 解构参数
    super({
      translucent: false,
      fabric: {
        type: "FlyLine",
        uniforms: {
          color,
          flowColor, // 新增：流动区域颜色
          percent,
          speed, // 新增：流动速度
        },
        source: FlyLineShaderSource, // 使用抽离的着色器代码
      },
    });
  }
}

使用飞线材质

 const positions = Cesium.Cartesian3.fromDegreesArray([
    125.321753, 43.810582, 126.554969, 43.834361,
  ]);

  // 创建几何
  const geometry = new Cesium.PolylineGeometry({
    positions: positions,
    width: 1,
  });

  const instance = new Cesium.GeometryInstance({
    geometry: geometry,
  });

  const appearance = new Cesium.PolylineMaterialAppearance({
    material: new FlyLineMaterial({
      color: Cesium.Color.fromCssColorString("#2d7367"),
      flowColor: Cesium.Color.fromCssColorString("#2ddcab"),
      percent: 0.1,
      speed: 0.5,
    }),
  });

  const primitive = new Cesium.Primitive({
    geometryInstances: instance,
    appearance: appearance,
  });

  viewer.scene.primitives.add(primitive);

原文地址：https://blog.csdn.net/Yue_zuozuo/article/details/147955771

免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！