cesium自定义材质-动态墙

效果如下：

引用资源colors.png:

1、创建动态墙自定义材质类文件（dynamicWall.js）

import * as Cesium from 'cesium'
import img from '../../assets/colors.png'
// 动态墙
class DynamicWallMaterial {
  materialType = 'DynamicWall'
  constructor(options) {
    // 默认参数设置
    this._definitionChanged = new Cesium.Event()
    this._color = undefined
    this._colorSubscription = undefined
    this.color = options.color || Cesium.Color.WHITE
    this.duration = options.duration || 1000
    this.image = options.image || img
    this._time = new Date().getTime()
    //添加自定义材质
    Cesium.Material._materialCache.addMaterial(this.materialType, {
      fabric: {
        type: this.materialType,
        uniforms: {
          color: this.color,
          image: this.image,
          time: -20
        },
        // 由上到下
        // vec4 colorImage = texture(image, vec2(fract(-(st.t + time)), st.t));
        // 由下到上
        // vec4 colorImage = texture(image, vec2(fract(st.t - time), st.t));
        // 顺时针
        // vec4 colorImage = texture(image, vec2(fract(-(st.s + time)), st.t));
        // 逆时针
        // vec4 colorImage = texture(image, vec2(fract(st.s - time), st.t));
        source: `czm_material czm_getMaterial(czm_materialInput materialInput)
          {
            czm_material material = czm_getDefaultMaterial(materialInput);
            vec2 st = materialInput.st;
            vec4 colorImage = texture(image, vec2(fract(-(st.s + time)), st.t));
            vec4 fragColor;
            fragColor.rgb = color.rgb / 1.0;
            fragColor = czm_gammaCorrect(fragColor);
            material.alpha = colorImage.a * color.a;
            material.diffuse = (colorImage.rgb+color.rgb)/2.0;
            material.emission = fragColor.rgb;
            return material;
          }`
      },
      translucent: function () {
        return true
      }
    })
  }
  get isConstant() {
    return false
  }
  get definitionChanged() {
    return this._definitionChanged
  }
  // 获取当前的材质类型，因为是新自定义的材质
  getType() {
    return this.materialType
  }
  // 获取cesium中的时间，uniforms中的属性
  getValue(time, result) {
    if (!Cesium.defined(result)) {
      result = {}
    }
    result.color = this.color
    result.image = this.image
    result.time = ((new Date().getTime() - this._time) % this.duration) / this.duration
    window.viewer.scene.requestRender()
    return result
  }
  equals(other) {
    return (
      this === other ||
      (other instanceof DynamicWallMaterial && Cesium.Property.equals(this._color, other._color))
    )
  }
}
export default DynamicWallMaterial

2、使用方法

参数说明：

• color：颜色
• duration：动画持续时间

import DynamicWallMaterial from './dynamicWall.js'
 
const viewer = new Cesium.Viewer('viewerDiv')
const coordinates = [[113.9, 34.75],[113.95, 34.75],[113.95, 34.8],[113.9, 34.8],[113.9,34.75]]
const entity = {
  id: '唯一id值'
  name: 'name值',
  wall: {
    positions: coordinatesToCartesian3(coordinates),
    material: new DynamicWallMaterial({
      color: Cesium.Color.fromCssColorString('rgba(255,255,0,0.8)'),
      duration: 3000
    }),
    maximumHeights: coordinates.map(() => {return 1000}),//墙的高度
    minimumHeights: coordinates.map(() => {return 0})
  }
}
viewer.entities.add(entity)

//根据坐标值生成Cartesian3坐标对
function coordinatesToCartesian3(coordinates) {
  let isHeight = false //是否包含高度值
  let degreesArray = []
  coordinates.map((item) => {
    degreesArray.push(item[0])
    degreesArray.push(item[1])
    if (item.length > 1) {
      isHeight = true
      degreesArray.push(item[2])
    }
  })
  let result = isHeight
    ? Cesium.Cartesian3.fromDegreesArrayHeights(degreesArray)
    : Cesium.Cartesian3.fromDegreesArray(degreesArray)
  return result
}