一、扩展材质
/**
* 动态墙材质
* @param {*} options
* @param {String} options.color 颜色
* @param {Number} options.duration 持续时间 毫秒
* @param {String} options.trailImage 贴图地址
*/
function DynamicWallMaterialProperty(options) {
this._definitionChanged = new Cesium.Event();
this.color = Cesium.defaultValue(options.color && new Cesium.Color.fromCssColorString(options.color), Cesium.Color.RED);
this.duration = Cesium.defaultValue(options.duration, 1000);
this.trailImage = options.trailImage;
this.time = (new Date()).getTime();
}
/**
* 带方向的墙体
* @param {*} options.get:true/false
* @param {*} options.count:数量
* @param {*} options.freely:vertical/standard
* @param {*} options.direction:+/-
*/
function _getDirectionWallShader(options) {
if (options && options.get) {
var materail = "czm_material czm_getMaterial(czm_materialInput materialInput)\n\
{\n\
czm_material material = czm_getDefaultMaterial(materialInput);\n\
vec2 st = materialInput.st;";
if (options.freely == "vertical") { //(由下到上)
materail += "vec4 colorImage = texture2D(image, vec2(fract(st.s), fract(float(" + options.count + ")*st.t" + options.direction + " time)));\n\ ";
} else { //(逆时针)
materail += "vec4 colorImage = texture2D(image, vec2(fract(float(" + options.count + ")*st.s " + options.direction + " time), fract(st.t)));\n\ ";
}
//泛光
materail += "vec4 fragColor;\n\
fragColor.rgb = (colorImage.rgb+color.rgb) / 1.0;\n\
fragColor = czm_gammaCorrect(fragColor);\n\
material.diffuse = colorImage.rgb;\n\
material.alpha = colorImage.a;\n\
material.emission = fragColor.rgb;\n\
return material;\n\
}";
return materail
}
}
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 Cesium.DynamicWallMaterialProperty;
};
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 = this.trailImage;
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.Property.equals(this.duration, other.duration)
&& Cesium.Property.equals(this.trailImage, other.trailImage))
};
Cesium.DynamicWallMaterialProperty = DynamicWallMaterialProperty;
Cesium.Material.DynamicWallMaterialProperty = 'DynamicWallMaterial';
Cesium.Material._materialCache.addMaterial(Cesium.DynamicWallMaterialProperty, {
fabric: {
type: Cesium.DynamicWallMaterialProperty,
uniforms: {
color: new Cesium.Color(1.0, 0.0, 0.0, 0.5),
image: Cesium.Material.DefaultImageId,
time: -20
},
source: _getDirectionWallShader({
get: true,
count: 1.0,
freely: 'vertical',
direction: '-'
})
},
translucent: function (material) {
return true;
}
});
二、调用:添加wall
viewer.entities.add({
wall: {
positions: Cesium.Cartesian3.fromDegreesArray([
113.382572, 38.020482,
113.386082, 38.020498,
113.388102, 38.020561
]),
material: new Cesium.DynamicWallMaterialProperty({
'./img.png',
'#f00',
2000
}),
maximumHeights: [10, 10, 10],
minimumHeights: [0, 0, 0],
}
})
动态波纹效果参考:cesium 添加动态波纹效果 圆形扩散效果 波纹材质-CSDN博客