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)
}
相关推荐
germener2 天前
Blender从入门到精通:建模、材质与动画完整实战教程
blender·材质
da_vinci_x2 天前
告别“手绘序列帧”:Substance Designer中的程序化VFX材质工作流
游戏·材质·贴图·技术美术·游戏美术·vfx·substance designer
wenjie学长3 天前
[3dmax自研插件]——3ds Max 智能材质检查器
3d·3dmax插件·材质·模型材质贴图检查·拖拽使用
阿幸软件杂货间4 天前
Blender硬面建模灯光渲染材质修改器纹理烘焙插件 Rantools And P-Cutter All-In-One Addon V3.3.10
blender·材质
开发游戏的老王4 天前
虚幻引擎虚拟制片入门教程 之 3D渲染基础知识:模型、材质、贴图、UV等
3d·虚幻·材质·模型·着色器·uv
reddingtons6 天前
场景美术师的“无限画板”:UE5中非破坏性的材质混合(Material Blending)工作流
ue5·材质·设计师·技术美术·游戏策划·游戏美术·substance
新中地GIS开发老师7 天前
Cesium 军事标绘入门:用 Cesium-Plot-JS 快速实现标绘功能
前端·javascript·arcgis·cesium·gis开发·地理信息科学
goodName7 天前
Cesium框选工具的3次进化:从卡顿到精准,我踩过这些坑
cesium
夏婵语冰9 天前
C4D R20新功能实战指南:深度解析域、节点材质与OpenVDB,提升你的3D创作效率
3d·材质·动画制作·三维设计·c4d教程
云卓SKYDROID10 天前
无人机大脑系统与技术解析
无人机·材质·遥控器·高科技·云卓科技