Cesium 材质模块开发流程——方式2

苹果园dog

已于 2022-11-16 22:36:00 修改

阅读量614

点赞数

分类专栏： WebGL GIS Cesium 文章标签：材质 javascript

于 2022-10-14 13:53:04 首次发布

本文链接：https://blog.csdn.net/u014556081/article/details/127318997

版权

Cesium 同时被 3 个专栏收录

48 篇文章 44 订阅

订阅专栏

WebGL

20 篇文章 7 订阅

订阅专栏

GIS

20 篇文章 1 订阅

订阅专栏

为了规范开发思路和流程，使代码易于扩展和维护，现参考Cesium官方的材质系统设计材质模块开发流程。与方式1相比这种较为灵活，但没有封装到sdk傻瓜。Cesium 材质模块开发流程——方式1_苹果园dog的博客-CSDN博客1、在/effect 下面创建MaterialProperty文件，继承自MaterialPropertyBase。设计可开发好相关遍历，比如颜色、中心点坐标等；【必须步骤】https://blog.csdn.net/u014556081/article/details/127299605?spm=1001.2014.3001.5501

具体流程如下：

1、在球上加载图形；

2、设置材质。

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./css/common.css">
    <title>闪烁线</title>

    <script src="./js/config.js"></script>
    <script src="./scripts/vue.min.js"></script>
    <script type="text/javascript" src="../ts-sdk/ts-sdk.js"></script>
    <link rel="stylesheet" href="..//ts-sdk/index.css">
    <style>
        .btn {
            position: fixed;
            top: 50px;
            left: 50px;
            width: 370px;
            padding: 10px;
            z-index: 1;
            border-radius: 5px;
            background: #d5d5d5;
        }

        .btn button {
            cursor: pointer;
            border: 1px solid #DCDFE6;
            color: #606266;
            margin: 0;
            padding: 12px 20px;
            border-radius: 4px;
            margin: 10px;
            color: #FFF;
            background-color: #409EFF;
            border-color: #409EFF;
        }
    </style>
</head>

<body>
    <div id="cesiumContainer">
        <div class="btn">
            <button @click="setMaterial">设置材质</el-button>
                <button @click="speedjiajia">动画加快</button>
                <button @click="speedjianjian">动画减慢</button>
                <!-- <button @click="colorChange">改变颜色</button> -->
                <button @click="removeMaterial">移除材质</button>
        </div>
    </div>
</body>

<script type="text/javascript">
    var app = new Vue({
        el: '#cesiumContainer',
        data() {
            return {
                speed: 10.0,
                pos: [
                    {
                        "x": -2599353.5027057035,
                        "y": 4571495.499108633,
                        "z": 3596974.3864677283
                    },
                    {
                        "x": -2599811.1406597607,
                        "y": 4571427.389679888,
                        "z": 3596731.833281913
                    },
                    {
                        "x": -2599627.135273337,
                        "y": 4571937.4264031295,
                        "z": 3596219.9553979863
                    },
                    {
                        "x": -2599840.216658582,
                        "y": 4571908.7784105325,
                        "z": 3596103.1233672816
                    },
                    {
                        "x": -2599575.639350307,
                        "y": 4572616.291019818,
                        "z": 3595399.498969646
                    },
                    {
                        "x": -2598574.189413854,
                        "y": 4572773.726943119,
                        "z": 3595919.662742008
                    },
                    {
                        "x": -2598616.4405796,
                        "y": 4572665.755918903,
                        "z": 3596025.7139911964
                    },
                    {
                        "x": -2598509.5953772566,
                        "y": 4572679.926843593,
                        "z": 3596084.506228046
                    },
                    {
                        "x": -2598695.6463070707,
                        "y": 4572243.4746347945,
                        "z": 3596502.176664675
                    },
                    {
                        "x": -2599059.3925880296,
                        "y": 4572198.97797161,
                        "z": 3596297.2725797025
                    },
                    {
                        "x": -2599353.5027057035,
                        "y": 4571495.499108633,
                        "z": 3596974.3864677283
                    }
                ]
            };
        },

        mounted() {
            let url = "http://localhost:8888/blender_lab_3dtiles/tileset.json";
            TS.ready(() => {
                // 初始化
                let viewer = TS.CesiumView.init("cesiumContainer");
                viewer.scene.debugShowFramesPerSecond = true;
                if (Cesium.FeatureDetection.supportsImageRenderingPixelated()) {
                    viewer.resolutionScale = window.devicePixelRatio
                }
                viewer.scene.postProcessStages.fxaa.enabled = true;
                // 加载地图和模型
                var baselayer = TS.ImageryLayerFactory.createImageryLayer(
                    TS.ImageryType.TDT,
                    {
                        style: "img",
                        key: globalConfig.tdtKey
                    }
                );
                viewer.imageryLayers.addImageryProvider(baselayer);
                const tileset = viewer.scene.primitives.add(
                    new Cesium.Cesium3DTileset({
                        url: url
                    })
                );

                // 闪烁线
                let positonsCartesian3 = [];
                for (let index = 0; index < this.pos.length; index++) {
                    let element = this.pos[index];
                    positonsCartesian3.push(
                        new Cesium.Cartesian3(element.x, element.y, element.z)
                    );
                }
                const polylines = viewer.scene.primitives.add(
                    new Cesium.PolylineCollection()
                );
                this.polyline1 = polylines.add({
                    positions: Cesium.PolylinePipeline.generateCartesianArc({
                        positions: positonsCartesian3,
                    }),
                    width: 6.0,
                    show: true,
                })
                this.setMaterial();

                // 定位
                TS.LocateUtil.flyToPoints(viewer,
                    positonsCartesian3,
                    heading = 0.0,
                    pitch = -60,
                    scale = 2.5,
                    duration = 3,
                    callBack = null);
            });
        },

        methods: {
            setMaterial() {
                this.polyline1.material = new Cesium.Material({
                    fabric: {
                        uniforms: {
                            speed: 30.0,
                            color: new Cesium.Color(1.0, 1.0, 0.0, 1.0)
                        },
                        source: /* glsl */ `
                            czm_material czm_getMaterial(czm_materialInput materialInput){
                                czm_material material = czm_getDefaultMaterial(materialInput);
                                ...
                                return material;
                            }
                        `
                    }
                });
            },
            speedjiajia() {
                if (this.polyline1 && this.speed < 20) {
                    this.polyline1.material.uniforms.speed += 2.0;
                    this.speed++;
                }
            },
            speedjianjian() {
                if (this.polyline1 && this.speed > 2) {
                    this.polyline1.material.uniforms.speed -= 2.0;
                    this.speed--;
                }
            },
            colorChange() {
                if (this.polyline1 && this.polyline1.material) {
                    this.polyline1.material.uniforms.color = Cesium.Color.fromRandom().withAlpha(1.0);
                }

            },
            removeMaterial() {
                this.polyline1.material = Cesium.Material.fromType(Cesium.Material.ColorType, {
                    color: new Cesium.Color(1.0, 1.0, 1.0, 1.0),
                });
            }
        }
    });
</script>

</html>