Cesium开发日记—动态立体墙效果

效果图

实例代码

只保留了关键代码部分，其余部分自行引入

开发使用Cesium1.81版本

var path = [108.95846, 34.22104, 108.96039, 34.22104, 108.96046, 34.21804, 108.95843, 34.21804, 108.95846, 34.22104];

var wall = viewer.entities.add({
    wall: {
        positions: Cesium.Cartesian3.fromDegreesArray(path),
        material: new Cesium.PolylineTrailLinkMaterialProperty({
            color: Cesium.Color.RED,
            duration: 1500 // 持续时间,单位毫秒（0时为静止状态）
        }),
        maximumHeights: [20, 20, 20, 20, 20],
        minimumHeights: [0, 0, 0, 0, 0]
    }
});
viewer.flyTo(wall);

//动态墙材质
function PolylineTrailLinkMaterialProperty(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(PolylineTrailLinkMaterialProperty.prototype, {
    isConstant: {
        get: function () {
            return false;
        }
    },
    definitionChanged: {
        get: function () {
            return this._definitionChanged;
        }
    },
    color: Cesium.createPropertyDescriptor('color')
});
PolylineTrailLinkMaterialProperty.prototype.getType = function (time) {
    return 'PolylineTrailLink';
};
PolylineTrailLinkMaterialProperty.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.PolylineTrailLinkImage
    }

    if(this.duration){
        result.time = (((new Date()).getTime() - this._time) % this.duration) / this.duration;
    }
    viewer.scene.requestRender();
    return result;
};
PolylineTrailLinkMaterialProperty.prototype.equals = function (other) {
    return this === other ||
        (other instanceof PolylineTrailLinkMaterialProperty
     && Cesium.Property.equals(this._color, other._color))
};
Cesium.PolylineTrailLinkMaterialProperty = PolylineTrailLinkMaterialProperty;
Cesium.Material.PolylineTrailLinkType = 'PolylineTrailLink';
Cesium.Material.PolylineTrailLinkImage = "./static/image/colors.png";
Cesium.Material.PolylineTrailLinkSource = "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.PolylineTrailLinkType, {
    fabric: {
        type: Cesium.Material.PolylineTrailLinkType,
        uniforms: {
            color: new Cesium.Color(1.0, 1.0, 1.0, 1),
            image: Cesium.Material.PolylineTrailLinkImage,
            time: 0
        },
        source: Cesium.Material.PolylineTrailLinkSource
    },
    translucent: function (material) {
        return true;
    }
});

 代码中使用到的材质图片