Cesium 自定义墙体

js

(function(global, factory) {
    if (typeof exports === 'object') {
        if (typeof Cesium == 'undefined') return null;
        module.exports = factory(Cesium);
    } else {
        if (typeof window.Cesium == 'undefined') return null;
        global.WallMaterialProperty = factory(Cesium);
    }
}(typeof window !== "undefined" ? window : this, function(Cesium) {
    /*
      流动纹理面
       duration 持续时间 毫秒
       repeat 纹理重复次数
       image 纹理
    */
    function WallMaterialProperty(color, duration) {
        this._definitionChanged = new Cesium.Event();
        this._color = undefined;
        this._colorSubscription = undefined;
        this.color = color;
        this.duration = duration;
        this._time = (new Date()).getTime();
    }
    Object.defineProperties(WallMaterialProperty.prototype, {
        isConstant: {
            get: function() {
                return false;
            }
        },
        definitionChanged: {
            get: function() {
                return this._definitionChanged;
            }
        },
        color: Cesium.createPropertyDescriptor('color')
    });
    WallMaterialProperty.prototype.getType = function(time) {
        return 'WallMaterialProperty';
    }
    WallMaterialProperty.prototype.getValue = function(time, result) {
        if (!Cesium.defined(result)) {
            result = {};
        }
        result.color = resultcolor((((new Date()).getTime() - this._time)) % (this.duration * 35) / (this.duration * 35));
        result.time = (((new Date()).getTime() - this._time)) / this.duration;
        return result;

        function resultcolor(p) {
            var a = p;
            //var a = p / (scale * 7);//0-1
            var r = 1;
            var g = 1;
            var b = 1;
            if (a >= 0 && a < 0.14) {
                g = a / 0.28;
                b = 0;
            } else if (a >= 0.14 && a < 0.28) {
                g = (a - 0.14) / 0.28 + 0.5
                b = 0;
            } else if (a >= 0.28 && a < 0.42) {
                r = 1 - (a - 0.28) / 0.14;
                b = 0
            } else if (a >= 0.42 && a < 0.56) {
                r = 0;
                b = (a - 0.42) / 0.14
            } else if (a >= 0.56 && a < 0.7) {
                r = 0;
                g = 1 - (a - 0.56) / 0.14
            } else if (a >= 0.7 && a < 0.84) {
                r = (a - 0.7) / 0.14;
                g = 0;
            } else if (a >= 0.84 && a < 1) {
                g = 0;
                b = 1 - (a - 0.84) / 0.16
            }

            r = r > 1 ? 1 : r;
            g = g > 1 ? 1 : g;
            b = b > 1 ? 1 : b;
            return new Cesium.Color(r, g, b);
        }
    }
    WallMaterialProperty.prototype.equals = function(other) {
        return this === other || (other instanceof WallMaterialProperty && Property.equals(this._color, other._color))
    }
    Cesium.WallMaterialProperty = WallMaterialProperty;
    Cesium.Material.WallMaterialProperty = 'WallMaterialProperty';
    Cesium.Material.WallImage1 = "./images/WallImage1.png";
    Cesium.Material.WallImage2 = "./images/WallImage2.png";
    Cesium.Material.WallSource = "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(0.8-st.t, st.s));\n\
        vec4 colorImage2 = texture2D(image2, vec2(st.s, fract(st.t*1.0- time)));\n\
        material.alpha = colorImage.a * color.a + 0.5*colorImage2.r;\n\
        material.diffuse = color.rgb;\n\
        material.emission = vec3(0.8);\n\
        return material;\n\
    }"
    Cesium.Material._materialCache.addMaterial(Cesium.Material.WallMaterialProperty, {
        fabric: {
            type: Cesium.Material.WallMaterialProperty,
            uniforms: {
                color: new Cesium.Color(0.5, 0.5, 0.5, 1.0),
                image: Cesium.Material.WallImage1,
                image2: Cesium.Material.WallImage2,
                time: 0
            },
            source: Cesium.Material.WallSource
        },
        translucent: function(material) {
            return material.uniforms.color.alpha <= 1.0;;
        }
    });
    return WallMaterialProperty;
}));

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta name="description" content="Create 3D models using glTF.">
    <title>WallExample</title>
    <link href='lib/Cesium/Widgets/widgets.css' rel='stylesheet' />
    <script type="text/javascript" src="lib/Cesium/Cesium.js"></script>
    <script type="text/javascript" src="lib/jquery.min.js"></script>
    <script type="text/javascript" src="WallMaterialProperty.js"></script>
</head>

<body style="width: 100%;height: 100%;margin: 0px;overflow: hidden;">
    <div id="cesiumContainer" class="fullSize"></div>
    <script id="cesium_sandcastle_script">
        var viewer = new Cesium.Viewer('cesiumContainer', {
            imageryProvider: new Cesium.UrlTemplateImageryProvider({
                url: "http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali"
            }),
            selectionIndicator: false,
            animation: false, //是否创建动画小器件，左下角仪表
            baseLayerPicker: false, //是否显示图层选择器
            fullscreenButton: false, //是否显示全屏按钮
            geocoder: false, //是否显示geocoder小器件，右上角查询按钮
            homeButton: false, //是否显示Home按钮
            infoBox: false, //是否显示信息框
            sceneModePicker: false, //是否显示3D/2D选择器
            selectionIndicator: false, //是否显示选取指示器组件
            timeline: false, //是否显示时间轴
            navigationHelpButton: false, //是否显示右上角的帮助按钮
            scene3DOnly: true,
            automaticallyTrackDataSourceClocks: false, //自动追踪最近添加的数据源的时钟设置
            sceneMode: Cesium.SceneMode.SCENE3D, //初始场景模式
        });

        let three = viewer.entities.add({
            name: 'Wall',
            wall: {
                positions: Cesium.Cartesian3.fromDegreesArrayHeights([
                    118.286419, 31.864436, 20000.0,
                    119.386419, 31.864436, 20000.0,
                    119.386419, 32.864436, 20000.0,
                    118.286419, 32.864436, 20000.0,
                    118.286419, 31.864436, 20000.0,
                ]),
                material: new Cesium.WallMaterialProperty(Cesium.Color.GREEN, 1000)
            }
        })
        viewer.flyTo(three, {
            duration: 0.0
        })
    </script>
</body>

</html>