Cesium制作雷达MaterialProperty

最新推荐文章于 2023-11-18 22:42:08 发布

西红柿地瓜nice

最新推荐文章于 2023-11-18 22:42:08 发布

阅读量822

点赞数 1

分类专栏：前端相关文章标签： javascript

本文链接：https://blog.csdn.net/qq_33235279/article/details/126510121

版权

前端相关专栏收录该内容

20 篇文章 5 订阅

订阅专栏

效果图如下

import * as Cesium from 'cesium'
import gsap from 'gsap'
export default class RadarMaterialProperty {
  name: string
  params: {
    uTime: number
  }

  definitionChanged = new Cesium.Event()
  isConstant = false

  constructor(name: string = 'radar') {
    this.params = {
      uTime: 0
    }
    this.name = name
    ;(Cesium.Material as any)._materialCache.addMaterial(
      'RadarMaterialProperty',
      {
        fabric: {
          type: 'RadarMaterialProperty',
          uniforms: {
            uTime: this.params.uTime
          },
          source: `
        czm_material czm_getMaterial(czm_materialInput materialInput)
        {
          // 生成默认的基础材质
          czm_material material = czm_getDefaultMaterial(materialInput);
          // 旋转uv
          vec2 newSt = mat2(cos(uTime),-sin(uTime),sin(uTime),cos(uTime))*(materialInput.st - 0.5) + 0.5;
          vec2 st = newSt;
          // 设置圆，外部透明，内部不透明
          float alpha = step(distance(st,vec2(0.5,0.5)),0.5) * 0.5;
          material.alpha = alpha;
          material.diffuse = vec3(1.0,0.0,0.0);
          // 按照角度来设置强弱
          float angle = atan(st.s-0.5,st.t-0.5);
          float strength = smoothstep(3.1416,-3.1416,angle);
          // 将强弱与透明度结合
          material.diffuse = material.diffuse * strength;
          material.alpha = material.alpha * strength;
         
          return material;
        }
        `
        }
      }
    )
    this.animate()
  }
  getType(time?: Cesium.JulianDate) {
    return 'RadarMaterialProperty'
  }
  getValue(time: Cesium.JulianDate, result: { [key: string]: number }) {
    result.uTime = this.params.uTime
    return result
  }
  equals(other: Cesium.Property): boolean {
    // 判断两个材质是否相等
    return other instanceof RadarMaterialProperty && this.name === other.name
  }
  animate() {
    gsap.to(this.params, {
      uTime: Cesium.Math.PI * 2,
      duration: 1,
      repeat: -1,
      ease: 'linear'
    })
  }
}

atan(y，x) : 用于将XY坐标转换为角度