Cesium实现动态立体墙

效果

GIF 2024-09-05 21-48-35.gif

技术栈

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)

材质图片

c705508c3156f73e84b95f02f4ef22df.png

遇到的错误

image.png

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博客

阅读全文
下载说明:
1、本站所有资源均从互联网上收集整理而来,仅供学习交流之用,因此不包含技术服务请大家谅解!
2、本站不提供任何实质性的付费和支付资源,所有需要积分下载的资源均为网站运营赞助费用或者线下劳务费用!
3、本站所有资源仅用于学习及研究使用,您必须在下载后的24小时内删除所下载资源,切勿用于商业用途,否则由此引发的法律纠纷及连带责任本站和发布者概不承担!
4、本站站内提供的所有可下载资源,本站保证未做任何负面改动(不包含修复bug和完善功能等正面优化或二次开发),但本站不保证资源的准确性、安全性和完整性,用户下载后自行斟酌,我们以交流学习为目的,并不是所有的源码都100%无错或无bug!如有链接无法下载、失效或广告,请联系客服处理!
5、本站资源除标明原创外均来自网络整理,版权归原作者或本站特约原创作者所有,如侵犯到您的合法权益,请立即告知本站,本站将及时予与删除并致以最深的歉意!
6、如果您也有好的资源或教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
7、如果您喜欢该资源,请支持官方正版资源,以得到更好的正版服务!
8、请您认真阅读上述内容,注册本站用户或下载本站资源即您同意上述内容!
原文链接:https://www.shuli.cc/?p=20825,转载请注明出处。
0

评论0

显示验证码
没有账号?注册  忘记密码?