CesiumJs学习笔记3

此为课程 Three.js可视化企业实战WEBGL课的CesiumJs篇学习笔记

entity 材质

1. 基础材质
   参考

  let material1 = new Cesium.ColorMaterialProperty(
    new Cesium.Color(1.0, 1.0, 1.0, 1.0)
  );
  // 棋盘纹理
  let material2 = new Cesium.CheckerboardMaterialProperty({
    evenColor: Cesium.Color.RED,
    oddColor: Cesium.Color.YELLOW,
    repeat: new Cesium.Cartesian2(2, 2),
  });
  // 条纹纹理
  let material3 = new Cesium.StripeMaterialProperty({
    evenColor: Cesium.Color.WHITE,
    oddColor: Cesium.Color.BLACK,
    repeat: 8,
  });
  // 网格纹理
  let material4 = new Cesium.GridMaterialProperty({
    color: Cesium.Color.YELLOW,
    cellAlpha: 0.2,
    lineCount: new Cesium.Cartesian2(4, 4),
    lineThickness: new Cesium.Cartesian2(4.0, 4.0),
  });
  const rectangle = viewer.entities.add({
    id: "entityRect",
    rectangle: {
      coordinates: Cesium.Rectangle.fromDegrees(90, 20, 110, 30 ),
      // 设置entity材质，MaterialProperty
      // material: Cesium.Color.RED.withAlpha(0.5),
      material: material,
    },
  });

2. 设置entity折线材质
   

  // 设置发光飞线效果
  let material = new Cesium.PolylineGlowMaterialProperty({
    // 设置发光程度
    glowPower: 0.2,
    // 尾椎缩小程度
    taperPower: 0.7,
    color: Cesium.Color.RED,
  });

  const redLine = viewer.entities.add({
    polyline: {
      positions: Cesium.Cartesian3.fromDegreesArray([-75, 35, -125, 35]),
      width: 20,
      material: material,
    },
  });

appearance

如果要做大量的几何体且它们都是与地球的椭球体平行可以使用 EllipsoidSurfaceAppearance

   let material1 = new Cesium.Material.fromType("Color", {
    color: Cesium.Color.AQUA.withAlpha(0.5),
  });

  // 使用instance的颜色去着色
  // let appearance = new Cesium.PerInstanceColorAppearance({
  //   flat: true,
  // });
  // 通用
  // let appearance = new Cesium.MaterialAppearance({
  //   material: material1,
  // });
 
  //假定几何体与地球椭球体平行，就可以在计算大量顶点属性的时候节省内存
  let appearance = new Cesium.EllipsoidSurfaceAppearance({
    material: material1,
    aboveGround: true,
  });

Material

api文档

1. 基础
   

  // type image
  let material1 = new Cesium.Material.fromType("Image", {
    image: "./texture/logo.png",
    repeat: new Cesium.Cartesian2(2.0, 2.0),
  });

 //  type disffuseMap
  let material1 = new Cesium.Material.fromType("DiffuseMap", {
    image: "./texture/logo.png",
  });

  // type grid
  let material1 = new Cesium.Material.fromType("Grid", {
    color: Cesium.Color.AQUA.withAlpha(0.5),
    cellAlpha: 0.2,
    lineCount: new Cesium.Cartesian2(4, 4),
    lineThickness: new Cesium.Cartesian2(4.0, 4.0),
  });

 //  type water
  let material1 = new Cesium.Material.fromType("Water", {
    baseWaterColor: Cesium.Color.AQUA.withAlpha(0.8),
    distortion: 0.25,
    normalMap: "./Assets/Textures/waterNormals.jpg",
  });

2. 编写着色器自定义材质

2.1 使用 fabric

  let material1 = new Cesium.Material({
    fabric: {
      type: "Color",
      uniforms: {
      	// image: "texture/logo.png",
        color: new Cesium.Color(1.0, 0.0, 0.0, 0.5),
      },
    },
  });

2.2 fabric中编写着色器修改材质, 老版本文档

  let material1 = new Cesium.Material({
    fabric: {
      uniforms: {
        uTime: 0,
      },
      source: `
        czm_material czm_getMaterial(czm_materialInput materialInput)
        {
          // 生成默认的基础材质
          czm_material material = czm_getDefaultMaterial(materialInput);
          float strength = mod((materialInput.s-uTime) * 10.0, 1.0);
          material.diffuse = vec3(strength, 0.0, 0.0);
          return material;
        }
      `,
    },
  });
// 安装并且导入gsap
  gsap.to(material1.uniforms, {
    uTime: 1,
    duration: 2,
    repeat: -1,
    ease: "linear",
  });
  let appearance = new Cesium.EllipsoidSurfaceAppearance({
    material: material1,
    aboveGround: false,
    translucent: true,
  });

2.3 Appearance自定义外观

  let appearance = new Cesium.EllipsoidSurfaceAppearance({
    fragmentShaderSource: `
    varying vec3 v_positionMC;
    varying vec3 v_positionEC;
    varying vec2 v_st;
    uniform float uTime;

    void main()
    {
        czm_materialInput materialInput;
        gl_FragColor = vec4(v_st,uTime, 1.0);
    }
    `,
  });
  appearance.uniforms = {
    uTime: 0,
  };

  gsap.to(appearance.uniforms, {
    uTime: 1,
    duration: 2,
    repeat: -1,
    yoyo: true,
    ease: "linear",
  });

2.4 自定义materialProperty材质

 class CustomMaterialPropery {
    constructor() {
      this.definitionChanged = new Cesium.Event();
      Cesium.Material._materialCache.addMaterial("CustomMaterial", {
        fabric: {
          type: "CustomMaterial",
          uniforms: {
            uTime: 0,
          },
          source: `
          czm_material czm_getMaterial(czm_materialInput materialInput)
          {
            // 生成默认的基础材质
            czm_material material = czm_getDefaultMaterial(materialInput);
            material.diffuse = vec3(materialInput.st, uTime);
            return material;
          }
          `,
        },
      });

      this.params = {
        uTime: 0,
      };
      gsap.to(this.params, {
        uTime: 1,
        duration: 2,
        repeat: -1,
        yoyo: true,
      });
    }
    getType() {
      // 返回材质类型
      return "CustomMaterial";
    }
    getValue(time, result) {
      result.uTime = this.params.uTime;
      // 返回材质值
      return result;
    }
  }
  
  let material = new CustomMaterialPropery();
  
  var rectangle = viewer.entities.add({
    id: "entityRect",
    rectangle: {
      coordinates: Cesium.Rectangle.fromDegrees(90, 20, 110, 30 ),
      material: material,
    },
  });