cesium扫描射线

最新推荐文章于 2024-07-21 23:18:10 发布

小陈灬灬

最新推荐文章于 2024-07-21 23:18:10 发布

阅读量298

点赞数 6

文章标签：前端 javascript

本文链接：https://blog.csdn.net/m0_66898747/article/details/139271472

版权

先看图：

本人也是小白，找了好久才找到这个效果，主要还是动态修改材质实现，废话不多说，直接上方法。
参考连接：[cesium] 卫星雷达传感器,雷达探测效果_cesium 雷达探测图-CSDN博客

function setProbingPrimitive(
  viewer: any,
  options: any = {
    color: new Cesium.Color(1.0, 0.0, 1.0, 0.8),
    repeat: 30.0,
    offset: 0.0,
    thickness: 0.3,
    center: Cesium.Cartesian3.fromDegrees(116.39, 39.9),
    length: 400000.0,
    bottom: 1000,
    top: 0.0
  }
) {
  function getModelMatrix() {
    return Cesium.Matrix4.multiplyByTranslation(
      //转换矩阵
      Cesium.Transforms.eastNorthUpToFixedFrame(options.center), //矩阵
      new Cesium.Cartesian3(0.0, 0.0, options.length * 0.5), //要转换的笛卡尔坐标
      new Cesium.Matrix4() //返回新的矩阵
    )
  }

  //材质
  function getMaterial() {
    var materialSource = `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;
                }`

    return new Cesium.Material({
      fabric: {
        type: 'radarPrimitive',
        uniforms: {
          //动态传递参数
          color: options.color,
          repeat: options.repeat,
          offset: options.offset,
          thickness: options.thickness
        },
        source: materialSource
      },
      translucent: false
    })
  }

  let cylinderGeometry = new Cesium.CylinderGeometry({
    length: options.length,
    topRadius: options.top,
    bottomRadius: options.bottom,
    vertexFormat: Cesium.MaterialAppearance.MaterialSupport.TEXTURED.vertexFormat
  })
  let redCone = new Cesium.GeometryInstance({
    geometry: cylinderGeometry,
    modelMatrix: getModelMatrix()
  })
  let appearance = new Cesium.MaterialAppearance({
    material: getMaterial(),
    faceForward: false,
    closed: true
  })

  const radar = viewer.scene.primitives.add(
    new Cesium.Primitive({
      geometryInstances: [redCone],
      appearance: appearance
    })
  )
  //监听渲染事件 动态修改雷达材质中的offset变量 从而实现动态效果
  viewer.scene.preUpdate.addEventListener(function () {
    var offset = radar.appearance.material.uniforms.offset
    offset -= 0.001
    if (offset > 1.0) {
      offset = 0.0
    }
    radar.appearance.material.uniforms.offset = offset
  })
}