代码迁移

src/Obj/Materail/FlowPictureMaterialProperty.js

@@ -0,0 +1,103 @@
+/**
+ * @Description: 流动纹理/图片材质
+ */
+export default class FlowPictureMaterialProperty {
+  constructor(options) {
+    if(!FlowPictureMaterialProperty.prototype.hasOwnProperty('color')) {
+      Object.defineProperties(FlowPictureMaterialProperty.prototype, {
+        repeat: Cesium.createPropertyDescriptor('repeat'),
+        color: Cesium.createPropertyDescriptor('color')
+      })
+    }
+    
+    // Cesium.FlowPictureMaterialProperty = FlowPictureMaterialProperty;
+    Cesium.Material.FlowPictureMaterialProperty = 'FlowPictureMaterialProperty';
+    Cesium.Material.FlowPictureMaterialType = 'FlowPictureMaterialType';
+    Cesium.Material.FlowPictureMaterialSource =
+      `
+        czm_material czm_getMaterial(czm_materialInput materialInput)
+        {
+          czm_material material = czm_getDefaultMaterial(materialInput);
+          vec2 st = repeat*materialInput.st;
+          vec4 colorImage = texture2D(image, vec2(fract(st.s - time), st.t));
+          material.alpha = colorImage.a * color.a;
+          material.diffuse = (colorImage.rgb+color.rgb)/2.0;
+          // material.alpha = colorImage.a;
+          // material.diffuse = (colorImage.rgb+color.rgb)/1.0;
+          return material;
+        }
+      `
+
+
+    Cesium.Material._materialCache.addMaterial(Cesium.Material.FlowPictureMaterialType, {
+      fabric: {
+        type: Cesium.Material.FlowPictureMaterialType,
+        uniforms: {
+          color: new Cesium.Color(1.0, 0.0, 0.0, 1.0),
+          time: 0,
+          image: '',
+          repeat: new Cesium.Cartesian2(100.0, 100.0),
+        },
+        source: Cesium.Material.FlowPictureMaterialSource
+      },
+      translucent: function (material) {
+        return true;
+      }
+    })
+
+    this._definitionChanged = new Cesium.Event();
+    this._color = undefined;
+    this._colorSubscription = undefined;
+    this._repeat = undefined;
+    this._repeatSubscription = undefined;
+    this.image = options.image;
+    this.color = new Cesium.Color.fromCssColorString(options.color || "rgba(4,253,231,0.87)");
+    this.repeat = options.repeat;
+    this.duration = options.duration;
+    this._time = (new Date()).getTime();
+  };
+
+  get isConstant() {
+    return false;
+  }
+
+  get definitionChanged() {
+    return this._definitionChanged;
+  }
+
+  getType(time) {
+    return Cesium.Material.FlowPictureMaterialType;
+  }
+
+  getValue(time, result) {
+    if (!Cesium.defined(result)) {
+      result = {};
+    }
+    result.time = (((new Date()).getTime() - this._time) % this.duration) / this.duration;
+    result.color = Cesium.Property.getValueOrDefault(this._color, time, Cesium.Color.WHITE, result.color);
+    // result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.WHITE, result.color);
+    result.image = this.image;
+    result.repeat = Cesium.Property.getValueOrDefault(this.repeat);
+    return result
+  }
+
+  equals(other) {
+    return (this === other ||
+      (other instanceof FlowPictureMaterialProperty &&
+        Cesium.Property.equals(this._color, other._color)) &&
+        Cesium.Property.equals(this.repeat, other._repeat)
+    )
+  }
+}
+
+
+
+
+// ? 如何使用
+// import FlowPictureMaterialProperty from '@/utils/Material/FlowPictureMaterialProperty.js'
+
+// material: new FlowPictureMaterialProperty({
+//   color: new Cesium.Color(1.0, 0.0, 0.0, 1.0),
+//   image: '/src/assets/images/cat.png',
+//   duration: 3000,
+// })