1、数据准备

通过超图提供的建模软件的插件或SuperMap iDesktopX中的导入BIM数据功能，将原始数据导出成UDBX格式的数据，以便后续在超图产品中进行使用。

如果模型的法线效果不好，可通过SuperMap iDesktopX的计算法线功能，重新计算法线效果。

通过材质编辑器，将普通材质改为PBR材质，建议：金属度0.5，粗糙度0.3。

将模型数据集生成s3m瓦片，并保存到工作空间。

如果在SuperMap iDesktopX查看效果，建议在V2引擎下进行查看。

2、服务发布

将上一步骤中得到的工作空间通过SuperMap iServer发布为三维服务：

3、前端展示

在SuperMap iClient3D for WebGL上打开发布的场景，设置纯色背景，修改光照，开启AO，阴影，反走样等效果，具体参考代码如下：

//环境光贴图
scene.specularEnvironmentMaps = './images/SkyBox/EnvironmentMapping.hdr';
scene.envMapIntensity = 5.0;
//设置阴影的出现距离
scene.shadowMap.maximumDistance = 500;
//设置阴影的浓度，值越高，阴影越淡
// viewer.shadowMap.darkness = 0.1;
//默认值是0.1，值越小越清晰
viewer.shadowMap.penumbraRatio = 0.1;
viewer.scene.hdrEnabled = true;
//开启天空盒，必须关闭大气，否则会看不到天空盒的效果
scene.skyAtmosphere.show = false;
var blueskyBox = new SuperMap3D.SkyBox({
    imageUrl: "./images/SkyBox/50.jpg"
});
scene.skyBox = blueskyBox;
scene.globe.show = false;
scene.ssaoEffect.show = true;
scene.ssaoEffect.intensity = 2.0;
//设置太阳光的颜色与强度
scene.lightSource.sunLightColor = new SuperMap3D.Color(
    255 / 255 * 4,
    255 / 255 * 4,
    255 / 255 * 4,
    1
);
viewer.clock.currentTime = SuperMap3D.JulianDate.fromDate(new Date(2026, 4, 10, 13));

4、选中效果修改

在supermap-iclient3d-for-webgl_webgpu-2026-beta版本上，新增支持了边框高亮的选中效果。

可根据需要进行调整，代码参考如下：

// 风格1
// 设置选中对象的颜色类型为轮廓边缘高亮
layer.selectColorType = SuperMap3D.SelectColorType.SILHOUETTE_EDGE;
// 设置选中对象的颜色为浅蓝色
layer.selectedColor = new SuperMap3D.Color(100*2/255,182*2/255, 165*2/255, 1.0);


//风格2
layer.selectColorType = SuperMap3D.SelectColorType.SILHOUETTE;
layer.selectedColor = new SuperMap3D.Color(0.0, 1.8, 4.0, 1.0);

范例数据及前端页面下载：

通过网盘分享的文件：003-BIM设备-三维可视化效果展示及选择特效制作DEMO-202605
链接: https://pan.baidu.com/s/1CWtZZaqBxeBfDkl7V6123g?pwd=smsw 提取码: smsw