104 lines
3.3 KiB
JavaScript
104 lines
3.3 KiB
JavaScript
|
/**
|
||
|
|
* @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,
|
||
|
|
// })
|