Cesium实现动态立体墙

效果

技术栈

cesium 1.103
vue3

实现

import * as Cesium from 'cesium'


export default function DynamicWallMaterialProperty(options) {
  
  this._definitionChanged = new Cesium.Event() 
  this._color = undefined 
  this._colorSubscription = undefined 
  this.color = options.color 
  this.duration = options.duration 
  this.trailImage = options.trailImage 
  this._time = new Date().getTime() 
  this._viewer = options.viewer 
}


Object.defineProperties(DynamicWallMaterialProperty.prototype, {
  isConstant: {
    get: function () {
      return false 
    },
  },
  definitionChanged: {
    get: function () {
      return this._definitionChanged 
    },
  },
  color: Cesium.createPropertyDescriptor('color'), 
})


DynamicWallMaterialProperty.prototype.getType = function (time) {
  return 'DynamicWall' 
}


DynamicWallMaterialProperty.prototype.getValue = function (time, result) {
  if (!Cesium.defined(result)) {
    result = {} 
  }
  result.color = Cesium.Property.getValueOrClonedDefault(
    this._color, 
    time, 
    Cesium.Color.WHITE, 
    result.color 
  )
  if (this.trailImage) {
    result.image = this.trailImage 
  } else {
    result.image = Cesium.Material.DynamicWallImage 
  }
  if (this.duration) {
    result.time =
      ((new Date().getTime() - this._time) % this.duration) / this.duration 
  }
  this._viewer.scene.requestRender() 
  return result 
}


DynamicWallMaterialProperty.prototype.equals = function (other) {
  return (
    this === other || 
    (other instanceof DynamicWallMaterialProperty && 
      Cesium.Property.equals(this._color, other._color)) 
  )
}


Cesium.Material.DynamicWallType = 'DynamicWall'


Cesium.Material.DynamicWallImage = '/src/assets/col.png'


Cesium.Material.DynamicWallSource =

  'czm_material czm_getMaterial(czm_materialInput materialInput)n
                                            {n
                                            // 调用 czm_getDefaultMaterial 函数获取一个默认的材质实例，并将其存储在 material 变量中n
                                            czm_material material = czm_getDefaultMaterial(materialInput);n
                                            // // 获取纹理坐标（st）的二维向量n
                                            vec2 st = materialInput.st;n
                                            // 纹理采样，依据时间动态变化,fract 函数用于计算余数，使纹理坐标在[0, 1)范围内循环。n
                                            vec4 colorImage = texture(image, vec2(fract(st.t - time), st.t));n
                                            // 创建一个 vec4 类型的变量用于存储片段颜色n
                                            vec4 fragColor;n
                                            // 将颜色的 RGB 分量除以 1.0（即保持不变），并赋值给 fragColor 的 RGBn
                                            fragColor.rgb = color.rgb / 1.0;n
                                            // 对 fragColor 进行 gamma 校正。czm_gammaCorrect 是一个函数，用于调整颜色的亮度，以便在不同的显示设备上显示一致。n
                                            fragColor = czm_gammaCorrect(fragColor);n
                                            //设置材质的 alpha 值，通常是纹理的 alpha 分量乘以颜色的 alpha 值。n
                                            material.alpha = colorImage.a * color.a;n
                                            // 设置材质的漫反射颜色（diffuse）为 color.rgb，漫反射颜色决定了材质在受到光照时的反射效果。n
                                            material.diffuse = color.rgb;n
                                            // 设置材质的发光颜色（emission）为 fragColor.rgb，发光颜色决定了材质在没有外部光源时的自发光效果。n
                                            material.emission = fragColor.rgb;n
                                            // 返回修改后的材质。n
                                            return material;n
                                            }'


Cesium.Material._materialCache.addMaterial(Cesium.Material.DynamicWallType, {
  fabric: {
    type: Cesium.Material.DynamicWallType, 
    uniforms: {
      color: new Cesium.Color(1.0, 1.0, 1.0, 1), 
      image: Cesium.Material.DynamicWallImage, 
      time: 0, 
    },
    source: Cesium.Material.DynamicWallSource, 
  },
  translucent: function (material) {
    return true 
  },
})

调用方法

let positions = Cesium.Cartesian3.fromDegreesArray([
    113.8236839, 22.528061, 113.9236839, 22.628061, 114.0236839, 22.528061,
    113.9236839, 22.428061, 113.8236839, 22.528061,
  ])
  
  const wall = viewer.entities.add({
    name: '立体墙效果',
    wall: {
      positions: positions,
      
      maximumHeights: new Array(positions.length).fill(400),
      minimumHeights: new Array(positions.length).fill(0),
      material: new DynamicWallMaterialProperty({
        viewer,
        color : Cesium.Color.RED,
        duration: 1500,
      }),
    },
  })
  viewer.zoomTo(wall)

材质图片

遇到的错误

Fragment shader compile log: ERROR: 0:9: ‘texture2D’ : no matching overloaded function found
ERROR: 0:9: ‘=’ : dimension mismatch
ERROR: 0:9: ‘=’ : cannot convert from ‘const mediump float’ to ‘highp 4-component vector of float’

参考：cesium1.102和以上的版本，自定义材质报‘texture2D‘ : no matching overloaded function found错误_texture2d’ : no matching overloaded function found-CSDN博客

我这里直接把texture2D改为texture即可。

参考文章

cesium实现动态立体墙效果_cesium特效wall-CSDN博客

前端3D引擎-Cesium自定义动态材质 – 夜尽丶 – 博客园 (cnblogs.com)

cesium1.102和以上的版本，自定义材质报‘texture2D‘ : no matching overloaded function found错误_texture2d’ : no matching overloaded function found-CSDN博客