前端~三维地图（cesium）动态材质扩散圆环

最新推荐文章于 2025-05-16 18:05:00 发布

Xiao_zuo_ya

最新推荐文章于 2025-05-16 18:05:00 发布

阅读量250

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/Yue_zuozuo/article/details/147954256

版权

定义自定义材质

import * as Cesium from "cesium";

// 着色器代码抽离为常量
const DiffuseCircleShaderSource = `
    uniform vec4 color;
    uniform float speed;
    uniform float count;
    uniform float gradient;

    czm_material czm_getMaterial(czm_materialInput materialInput)
    {
        czm_material material = czm_getDefaultMaterial(materialInput);
        material.diffuse = 1.5 * color.rgb;
        vec2 st = materialInput.st;
        float dis = distance(st, vec2(0.5, 0.5));
        float per = fract(czm_frameNumber * speed / 1000.0);

        if(count == 1.0){
            if(dis > per * 0.5){
                discard;
            } else {
                material.alpha = color.a * dis / per / 2.0;
            }
        } else {
            vec3 str = materialInput.str;
            if(abs(str.z) > 0.001){
                discard;
            }
            if(dis > 0.5){
                discard;
            } else {
                float perDis = 0.5 / count;
                float disNum;
                float bl = 0.0;
                for(int i = 0; i <= 999; i++){
                    if(float(i) <= count){
                        disNum = perDis * float(i) - dis + per / count;
                        if(disNum > 0.0){
                            if(disNum < perDis){
                                bl = 1.0 - disNum / perDis;
                            } else if(disNum - perDis < perDis){
                                bl = 1.0 - abs(1.0 - disNum / perDis);
                            }
                            material.alpha = pow(bl, (1.0 + 10.0 * (1.0 - gradient)));
                        }
                    }
                }
            }
        }
        return material;
    }
`;

// 参数类型定义
type DiffuseCircleOptions = {
  color: Cesium.Color;
  speed: number;
  circleCount: number;
  gradient: number;
};

// 材质类定义
export class DiffuseCircleMaterial extends Cesium.Material {
  constructor(options: DiffuseCircleOptions) {
    const { color, speed, circleCount, gradient } = options; // 解构参数
    super({
      translucent: false,
      fabric: {
        type: "DiffuseCircle",
        uniforms: {
          color,
          speed,
          count: circleCount,
          gradient,
        },
        source: DiffuseCircleShaderSource, // 使用抽离的着色器代码
      },
    });
  }
}

调用自定义材质


  // 测试自定义材质
  const circleGeometry = new Cesium.CircleGeometry({
    center: Cesium.Cartesian3.fromDegrees(125.310767, 43.820491, 1000000),
    radius: 10000,
  });
  const circleInstance = new Cesium.GeometryInstance({
    geometry: circleGeometry,
  });

  // 创建外观
  const appearance = new Cesium.EllipsoidSurfaceAppearance({
    material: new DiffuseCircleMaterial({
      color: new Cesium.Color(1.0, 0.0, 0.0, 1.0),
      speed: 5.0,
      circleCount: 5,
      gradient: 0.4,
    }),
  });

  // 创建圆形图元
  const circlePrimitive = new Cesium.Primitive({
    geometryInstances: circleInstance,
    appearance: appearance,
  });

  // 添加到场景
  viewer.scene.primitives.add(circlePrimitive);