SuperMap iClient3D for WebGL教程（特效）- 线框模式

最新推荐文章于 2025-10-23 08:45:00 发布

原创最新推荐文章于 2025-10-23 08:45:00 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

本文为博主原创文章，欢迎转载，SuperMap技术问答社区 http://ask.supermap.com

三维GIS 专栏收录该内容

427 篇文章

订阅专栏

本文详细介绍了WebGL中的线框模式，包括三角形、四边形和草图三种显示方式，解释了如何通过代码实现不同的线框模式，并展示了各种模式下的模型效果。

nannan

线框模式是模型填充风格的一种，主要包括三角形模式、四边形模式和草图模式三种显示。

三角形模式显示模型最原始的三角网形式，保留原有所有细节。
四边形模式和草图模式只显示了模型形状，草图模式模型边缘较粗糙。

下面来看其在WebGL里的主要代码：

1.设置模型填充风格：

 layer.style3D.fillStyle = Cesium.FillStyle.WireFrame; // 线框模式

2.S3M图层模型线框模式的主要代码：

 wireframeMode: function (val) {
                        switch (val) {
                            case 'triangle':
                                layer.wireFrameMode = Cesium.WireFrameType.Triangle; // 三角形线框模式
                                break;
                            case 'quad':
                                   layer.wireFrameMode = Cesium.WireFrameType.Quad; // 四边形线框模式
                                   break;
                            case 'sketch':
                                layer.wireFrameMode = Cesium.WireFrameType.Sketch; // 草图线框模式
                                break;
                            default:
                                break;
                        }
                        layer.refresh();
                    }

3.结果图如下：

（1）原图：

在这里插入图片描述

（2）三角形线框模式：

在这里插入图片描述

（3）四边形线框模式：

在这里插入图片描述

（4）草图线框模式：

在这里插入图片描述
注：具体的代码及效果可以参考 SuperMap iClient3D for WebGL 在线示范程序，范例地址：
http://support.supermap.com.cn:8090/webgl/examples/editor.html#wireframe

SuperMap iClient3D for WebGL教程（特效）- 线框模式

下面来看其在WebGL里的主要代码：

1.设置模型填充风格：

2.S3M图层模型线框模式的主要代码：

3.结果图如下：

（1）原图：

（2）三角形线框模式：

（3） 四边形线框模式：

（4）草图线框模式：

（3）四边形线框模式：