class WallMaterialProperty { /** * 构造方法 * @ignore 无需公开 * @param {Cesium.Viewer} viewer 着色器运行所需的视图 * @param {JSON} options 配置项 * @param {Cesium.Color} options.color [墙的颜色,默认蓝色] 可选 * @param {Number} options.duration [循环时间 默认1000] 可选 * @param {String} options.trailImage 墙的贴图 * @param {JSON} options.param 着色器参数 * @param {Number} options.param.count [数量 可选 默认为1] * @param {String} options.param.direction [方向 可选 默认竖直 ] 取值vertical/horizontal * @param {String} options.param.order [顺序 可选 上下/下上/顺时针/逆时针 与方向配合使用 ] 取值+/- */ constructor(viewer, options) { /* 着色器运行依赖的视图 */ this._viewer = viewer; options = options || {}; /* 变更事件 */ this._definitionChanged = new Cesium.Event(); this._color = undefined; /* 墙的颜色 */ this.color = options.color || Cesium.Color.BLUE; /* 动态循环周期 */ this.duration = options.duration || 1000; this.count = options.duration || 1; this.direction = options.duration || 'vertical'; this.order = options.duration || '-'; /* 墙的贴图 */ this.trailImage = Cesium.defaultValue(options.trailImage, 'jt3dSDK/imgs/wallmaterial/wl.png'); /* 默认时间 */ this._time = (new Date()).getTime(); /* 材质类型名称 */ this._materialTypeName = 'WallMaterial' + this._guid(); /* 存储相关参数的属性 以便后期进行追踪修改 */ this._param = { color: this.color._value.toCssColorString(), image: this.trailImage, duration: this.duration, count: this.count, direction: this.direction, order: this.order, } /* 将材质加入缓存 以便重复利用 */ Cesium.Material._materialCache.addMaterial(this._materialTypeName, { fabric: { type: this._materialTypeName, uniforms: { time: -20, color: new Cesium.Color(1.0, 0.0, 0.0, 0.5), image: options.trailImage, }, source: this._getDirectionWallShader(options.param) }, translucent: function(material) { /* 材质是否半透明 */ return true; } }); } /** * 生成GUID随机数 * @ignore 无需公开 */ _guid() { function S4() { return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1); } return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4()); } /** * 重新获取类型方法 * @ignore 无需公开 * @param {Cesium.JulianDate} time 时间 */ getType(time) { return this._materialTypeName; } /** * 重写获取值方法 * @ignore 无需公开 * @param {Cesium.JulianDate} time * @param {JSON} result */ getValue(time, result) { if (!Cesium.defined(result)) { result = {}; } result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.BLUE, result.color); result.image = this.trailImage; if (this.duration) { result.time = (((new Date()).getTime() - this._time) % this.duration) / this.duration; } this._viewer.scene.requestRender(); return result; } /** * 重写对比函数 * @ignore 无需公开 * @param {Object} other 传入对比对象 */ equals(other) { return (this === other || (other instanceof WallMaterialProperty && Cesium.Property.equals(this ._color, other._color) && other._param.order === this._param.order && other._param.count === this._param.count && other._param.direction === this._param.direction && other.duration === this .duration)); } /** * 创建着色器资源 * @ignore 无需公开 * @param {JSON} options 配置项 * @param {Number} options.count [数量 可选 默认为1] * @param {String} options.direction [方向 可选 默认竖直 ] 取值vertical/horizontal * @param {String} options.order [顺序 可选 上下/下上/顺时针/逆时针 与方向配合使用 ] 取值+/- */ _getDirectionWallShader(options) { let op = Cesium.defaultValue(options, {}); // console.log('>>>op===', op); let count = op.count !== undefined && typeof op.count === 'number' && op.count > 0 ? op.count : 1; let direction = op.direction === 'horizontal' ? 'horizontal' : 'vertical'; let order = op.order === '+' ? '+' : '-'; this._param.count = count; this._param.direction = direction; this._param.order = order; let materail = ''; /* 补充参数 */ // console.log('_param', this._param); materail += 'czm_material czm_getMaterial(czm_materialInput materialInput){\n' + ' czm_material material = czm_getDefaultMaterial(materialInput);\n' + ' vec2 st = materialInput.st;\n'; if (direction === 'vertical') { materail += ' vec4 colorImage = texture2D(image,vec2(st.s,fract(float(' + count + ')*st.t ' + order + ' time)));\n'; } else if (direction === 'horizontal') { materail += ' vec4 colorImage = texture2D(image, vec2(fract(float(' + count + ')*st.s ' + order + ' time), st.t));\n' } materail += ' 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' + '}'; return materail; } } /** * 增加默认属性 */ Object.defineProperties(WallMaterialProperty.prototype, { /** * @ignore 无需公开 * 判断是否相等,返回false表示属性一直在变化中 */ isConstant: { get: function() { return false; } }, /** * @ignore 无需公开 * 事件变更 */ definitionChanged: { get: function() { return this._definitionChanged; } }, /* 颜色属性 */ color: Cesium.createPropertyDescriptor('color') }) export default WallMaterialProperty;