Cesium自定义电子围栏特效材质

1.new Cesium.Viewer中添加

复制代码
requestWebgl1: true,
  1. 编写材质,主要分三步

(1)定义MaterialProperty

(2)设置材质

(3)添加材质

DynamicWallMaterial.js

javascript 复制代码
//定义材质对象及变量
function DynamicWallMaterialProperty(color, duration) {
    this._definitionChanged = new Cesium.Event();
    this._color = undefined;
    this._colorSubscription = undefined;    
    this._time = (new Date()).getTime();

    this.color = color;
    this.duration = duration;
  }

  //Cesium.MaterialProperty是一个抽像类(https://cesium.com/learn/cesiumjs/ref-doc/MaterialProperty.html),
  //必须定义isConstant 、definitionChanged、equals()、getType()、getValue()
  //定义或修改材质属性
  Object.defineProperties(DynamicWallMaterialProperty.prototype, {
    isConstant: {
      get: function () {
        return false;
      }
    },
    definitionChanged: {
      get: function () {
        return this._definitionChanged;
      }
    },
    color: Cesium.createPropertyDescriptor('color')
  });

  //定义材质对象方法getType
  DynamicWallMaterialProperty.prototype.getType = function (time) {
    return 'DynamicWall';
  }

   //定义材质对象方法getValue,给下文的uniforms附值
  DynamicWallMaterialProperty.prototype.getValue = function (time, result) {
    if (!Cesium.defined(result)) {
      result = {};
    }
    result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.WHITE, result.color);
    result.image = Cesium.Material.DynamicWallImage;
    result.time = (((new Date()).getTime() - this._time) % this.duration) / this.duration;
    return result;
  }

  //定义材质对象方法equals
  DynamicWallMaterialProperty.prototype.equals = function (other) {
    return this === other || (other instanceof DynamicWallMaterialProperty && Property.equals(this._color, other._color))
  };

  Cesium.DynamicWallMaterialProperty = DynamicWallMaterialProperty;
  Cesium.Material.DynamicWallType = 'DynamicWall';
  Cesium.Material.DynamicWallImage = "src/assets/imgs/color.png";//图片
  Cesium.Material.DynamicWallSource =
    `czm_material czm_getMaterial(czm_materialInput materialInput)
            {
                float time = czm_frameNumber/100.0;
                czm_material material = czm_getDefaultMaterial(materialInput);
                vec2 st = materialInput.st;
                vec4 colorImage = texture2D(image, vec2(fract(1.0*st.t - time), st.t));
                material.alpha = colorImage.a * color.a;
                material.diffuse = (colorImage.rgb+color.rgb)/2.0;
                return material;
            }`      //由上到下


  //添加自定义材质
  Cesium.Material._materialCache.addMaterial(Cesium.Material.DynamicWallType, {
    fabric: {
      //纹理类型
      type: Cesium.Material.DynamicWallType,
      //传递给着色器的外部属性
      uniforms: {
        color: new Cesium.Color(0.0, 0.0, 0.0, 1),
        image: Cesium.Material.DynamicWallImage,
        time: 0
      },
      //纹理资源
      source: Cesium.Material.DynamicWallSource
    },
    //是否透明
    translucent: function (material) {
      return true;
    }
  })

  
export default DynamicWallMaterialProperty;

3.使用材质

javascript 复制代码
import DynamicWallMaterialProperty from "../materials/DynamicWallMaterial.js";

//...

function CustomMaterialTest() {
  
  var dynamicWall = window.Viewer.entities.add({
    wall: {
      positions: Cesium.Cartesian3.fromDegreesArrayHeights([
        118.286419, 31.864436, 20000.0,
        119.386419, 31.864436, 20000.0,
        119.386419, 32.864436, 20000.0,
        118.286419, 32.864436, 20000.0,
        118.286419, 31.864436, 20000.0,
      ]),
      material: new DynamicWallMaterialProperty(Cesium.Color.fromBytes(255, 200, 10).withAlpha(0.8), 30),
    }
  })
  window.Viewer.flyTo(dynamicWall)
}
相关推荐
不浪brown7 小时前
爽翻了!Cesium手撸一个动态视锥体工具用于开发调试,效率翻倍(附完整源码)
cesium
木子李i21 小时前
Cesium离线使用和部署地图影像
前端·cesium
全宝3 天前
🌏【cesium系列】01.vue3+vite集成Cesium
前端·gis·cesium
ue星空5 天前
UE快速预览材质节点快捷键
材质
dermail8 天前
丝杆升降机各部件材质深度剖析:解锁高效稳定运行的技术密码
材质
向宇it10 天前
【blender小技巧】Blender导出带贴图的FBX模型,并在unity中提取材质模型使用
开发语言·unity·c#·游戏引擎·blender·材质·贴图
不浪brown10 天前
地下管网的产品经理问我:能不能用Cesium在地表挖一个洞,让我直观的看到地下的管道(附开源代码)
cesium
在下胡三汉13 天前
3dmax标准材质/vr/cr材质贴图转PBR材质贴图插件,支持多维子材质转换
vr·材质·贴图
Zhichao_9714 天前
【UE】渐变框材质
ue5·材质
dermail14 天前
深度解析丝杆升降机各部件材质:性能、应用与选型
材质