main

分支 (1)

管理

管理

main

cesium_pdf
/
7.8材质特效篇_电子围栏.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.0">
    <title>材质特效篇_电子围栏</title>
    <script src="./Build/Cesium/Cesium.js"></script>
    <link rel="stylesheet" href="./Build/Cesium/Widgets/widgets.css">
    <style>
        html,
        body,
        #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div id="cesiumContainer">
    </div>


    <script>
        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2NGM4MDcxOS05Zjk3LTQ2YmMtYjAxYi0zYTczNWFkYzFlN2EiLCJpZCI6NzY0NTcsImlhdCI6MTYzOTQ2ODI2NH0.Zsp28WnnCpj4wlAIQwIwcSob228zSaz510QE3zKQN58';
        var viewer = new Cesium.Viewer("cesiumContainer", {
            animation: false, //是否显示动画工具
            timeline: false,  //是否显示时间轴工具
            fullscreenButton: false,  //是否显示全屏按钮工具

        });


        function DynamicWallMaterialProperty(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(DynamicWallMaterialProperty.prototype, {
            isConstant: {
                get: function () {
                    return false;
                }
            },
            definitionChanged: {
                get: function () {
                    return this._definitionChanged;
                }
            },
            color: Cesium.createPropertyDescriptor('color')
        });

        DynamicWallMaterialProperty.prototype.getType = function (time) {
            return 'DynamicWall';
        }
        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 = Cesium.Material.DynamicWallImage;
            result.time = (((new Date()).getTime() - this._time) % this.duration) / this.duration;
            return result;
        }
        DynamicWallMaterialProperty.prototype.equals = function (other) {
            return this === other || (other instanceof DynamicWallMaterialProperty && Property.equals(this._color, other._color))
        };

        Cesium.DynamicWallMaterialProperty = DynamicWallMaterialProperty;
        Cesium.Material.DynamicWallType = 'DynamicWall';
        Cesium.Material.DynamicWallImage = "./RasterImage/图片/color.png";//图片
        Cesium.Material.DynamicWallSource =
            `czm_material czm_getMaterial(czm_materialInput materialInput)
            {
                float time = czm_frameNumber/100.0;
                czm_material material = czm_getDefaultMaterial(materialInput);
                vec2 st = materialInput.st;
                vec4 colorImage = texture2D(image, vec2(fract(1.0*st.t - time), st.t));
                material.alpha = colorImage.a * color.a;
                material.diffuse = (colorImage.rgb+color.rgb)/2.0;
                return material;
            }`      //由上到下


        //添加自定义材质
        Cesium.Material._materialCache.addMaterial(Cesium.Material.DynamicWallType, {
            fabric: {
                //纹理类型
                type: Cesium.Material.DynamicWallType,
                //传递给着色器的外部属性
                uniforms: {
                    color: new Cesium.Color(0.0, 0.0, 0.0, 1),
                    image: Cesium.Material.DynamicWallImage,
                    time: 0
                },
                //纹理资源
                source: Cesium.Material.DynamicWallSource
            },
            //是否透明
            translucent: function (material) {
                return true;
            }
        })

        var dynamicWall = viewer.entities.add({
            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.DynamicWallMaterialProperty(Cesium.Color.fromBytes(255, 200, 10).withAlpha(0.8), 3000),
            }
        })
        viewer.flyTo(dynamicWall)


    </script>
</body>

</html>