文章目錄

• • 1.實現效果
  • 2.實現方法
  • • 2.1自定義材質
    • 2.2紋理圖片
    • 2.3代碼調用

Cesium實戰系列文章總目錄： 傳送門

設置自定義MaterialProperty，實現動態立體墻體效果

1.實現效果

2.實現方法

2.1自定義材質

dynamicWallMaterialProperty.js
【注意】entity使用materialProperty，而primitive使用material。

/*** @description:動態立體墻材質* @date: 2022-02-11*///動態墻材質 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(); } 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;}viewer.scene.requestRender();return result; }; DynamicWallMaterialProperty.prototype.equals = function(other) {return this === other ||(other instanceof DynamicWallMaterialProperty &&Cesium.Property.equals(this._color, other._color)) }; Cesium.DynamicWallMaterialProperty = DynamicWallMaterialProperty; Cesium.Material.DynamicWallType = 'DynamicWall'; Cesium.Material.DynamicWallImage = "./colors.png"; Cesium.Material.DynamicWallSource = "czm_material czm_getMaterial(czm_materialInput materialInput)\n\{\n\czm_material material = czm_getDefaultMaterial(materialInput);\n\vec2 st = materialInput.st;\n\vec4 colorImage = texture2D(image, vec2(fract(st.t - time), st.t));\n\vec4 fragColor;\n\fragColor.rgb = color.rgb / 1.0;\n\fragColor = czm_gammaCorrect(fragColor);\n\material.alpha = colorImage.a * color.a;\n\material.diffuse = color.rgb;\n\material.emission = fragColor.rgb;\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;} });

2.2紋理圖片

colors.png

2.3代碼調用

其中參數positions指墻體底面坐標。

/*** @description:立體墻效果* @date：2022-02-12* @param：viewer* @positions: 墻體底部位置坐標*/ function drawWall(viewer, positions) {// 繪制墻體this.viewer.entities.add({name: "立體墻效果",wall: {positions: positions,// 設置高度maximumHeights: new Array(positions.length).fill(100),minimumHeights: new Array(positions.length).fill(0),material: new Cesium.DynamicWallMaterialProperty({color: Cesium.Color.fromBytes(55, 96, 56).withAlpha(0.7),duration: 3000}),}}) }

總結

以上是生活随笔為你收集整理的cesium实现动态立体墙效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。