管道流动效果的制作流程

使用说明

由于在SuperMap iClient3D for WebGL/WebGPU上暂不支持 *.gif格式的纹理贴图，那要如何表达动态的效果呢？这里以管道为例，介绍如何通过动态纹理表达管道水流的方向与速度。

本文档从以下几个方面分别进行说明：

数据处理
发布服务
SuperMap iClient3D for WebGL/WebGPU中加载

其中涉及的产品有：SuperMap iDesktopX，SuperMap iServer ，SuperMap iClient3D for WebGL/WebGPU。

操作流程

1、数据处理

1.1打开数据

启动SuperMap iDesktopX，打开管线数据，并将线数据集添加到场景中。

图1

1.2放样

在三维地理设计-规则建模下，选择放样功能，弹出放样窗口，进行设置。

勾选所有对象参与操作；点击绘制按钮，弹出绘制面窗口：选择圆面进行绘制，默认单位为“米”，这里修改为分米，并绘制一个直径为1分米的圆；点击确定按钮，完成截面的绘制。

图2

截面绘制完成之后，接着点击“材质设置”按钮，进行材质设置。材质纹理通过+按钮进行添加，设置为处理好的jpg或png等格式的图片，这里设置为一张带有向上箭头符号的jpg图片。重复模式设置为实际大小，横向大小设置为截面的周长（0.314m），纵向根据需要进行设置，不过要注意保持贴图的比例。点击确定之后，生成带有静态纹理贴图的模型数据集。

图3

1.3计算法线

如果生成的管线模型表面不够圆滑，可通过三维数据→模型→模型工具下的计算法线功能对模型重新计算法线处理，优化管道显示效果。详细操作，请参考 SuperMap iDesktopX 帮助文档计算法线

1.4生成场景瓦片

将处理后的模型数据集添加到场景中，移除其它多余的数据集，保存场景，并对场景生成瓦片。在弹出的生成场景瓦片窗口中，修改瓦片路径，其它参数保持默认即可。详细操作，请参考 SuperMap iDesktopX 帮助文档生成场景瓦片

2、发布服务

将上一步骤中得到的场景瓦片通过SuperMap iServer发布为三维服务。具体操作可参考SuperMap iServer帮助文档发布三维瓦片。

3、SuperMap iClient3D for WebGL/WebGPU中加载；

在SuperMap iClient3D for WebGL/WebGPU中加载发布的三维服务，找到管道瓦片数据所在图层，并设置其运动状态。

其中，textureUVSpeed用于控制贴图纹理的运动方向及速度。该场景中，只需要箭头纹理顺着管道进行移动，因此U方向上的速度设置为零，只需要改变V方向上的速度即可。代码设置及最终显示效果如下：

            var promise = scene.open('http://www.supermapol.com/realspace/services/3D-ChunShuiLvSeGuanDaoYouHua/rest/realspace');
            promise.then(function (layer) {
                var line = scene.layers.find("纯水绿色管道优化");
                line.textureUVSpeed = new SuperMap3D.Cartesian2(0, -2);//模型纹理在UV坐标上的运动速度
            })

图4

如有疑问请参考范例代码：流动管线。