3D模型插件
在数字孪生、智慧+概念的带动下,越来越多的行业开始借助数据分析与可视化的方式,辅助企业的生产经营活动,比如:智慧工厂、智慧能源、智慧园区、智慧旅游、智慧环境、智慧警务、智慧城市等。
在这些场景中除了通过图表/表格展示数据外,通过接入3D模型的方式将更加直观地展示和分析数据。
3D模型可视化插件可以将数据绑定到模型的数据上进行轮播展示并且支持条件格式化。
演示视频
1. 创建仪表板
添加可视化插件-3D模型。
点击右上角编辑按钮。
通过侧边工具栏【模板导入】按钮,打开选择模型界面,通过URL导入模型文件。
点击应用之后将加载模型。
2. 数据准备
(1)数据源配置
示例中我们使用的示例数据为: 智慧工厂生成数据.xlsx
- 创建Excel数据源:
- 上传数据文件:
- 配置数据集:
- 点击【编辑数据集】预览数据:
(2)数据绑定
选中可视化组件进行数据绑定。
- 数值:数值字段,可绑定多个。
- 区域标识:只能绑定一个字段,该字段的取值和模型中的对象(区域)设置的id相关联。
- 属性: 可绑定多个。最终绑定的字段都会显示在数据提示上。
另外,您还可以通过设置字段的格式和显示单位,修改数据提示时
展示数据的格式。
比如我们可以将合格率的格式设置为百分比。
(3)手动聚焦区域
除了所有的区域选项外,第一个选项默认相机,该选项会取消聚焦状态,并将相机移动到默认位置。
使用手动聚焦的方法可以在设计时查看各区域的设计是否满足需求,也可在预览时查看特定区域。
在界面的右上角存在2个按钮,从上到下,第一个为轮播选项(之后介绍),第二个则为手动聚焦区域的选项。
将鼠标移到第二个按钮,就会将当前所有的区域列出来,单击想要聚焦的区域名称,就可以聚焦该区域( 被聚焦的区域会被黄色的线框包围 ),并且将相机移动到区域的观察位置(区域观察位置的设置方法见准备模型文件)。
3. 准备模型文件
- 创建模型
- 1.导入模型
- 2.为选中的对象设置id
- 3.设置观察机位
- 4.导出编辑好的模型文件
- 5.配置本地模型
- 6.配置远程模型
创建模型
在仪表板中使用 3D 模型插件必须要提前准备好模型文件,模型文件中除了提供模型本身之外,还定义了相机的视角以及如何与数据的匹配区域等信息。
我们通常是将一个模型导入到 three.js 中,然后进行必要的编辑以及信息指定(主要是标注区域),最后再导出一个.glb 文件供 3D 模型插件使用。
支持模型文件类型
使用通用的模型数据文件(目前支持.glb, .obj, .dae),由于模型文件的数据结构差异较大,并且插件使用的是three.js库开发,对.glb文件支持较好,所以推荐您使用.glb格式的模型。
建模软件
常见的建模软件(3dmax, maya, blender等)都可以进行建模并且可以导出.glb格式的模型。
对于没有默认glb导出方法的建模软件,可以尝试在社区中寻找相应gltf导出插件,gltf插件用于导出gltf和glb格式模型文件。
编辑模型(标注区域)
想让一个模型的对象变成区域,首先要使用three.js
提供的模型编辑器进行编辑。
说明
示例中我们使用的模型文件:智慧工厂模型.glb
将鼠标移至编辑器左上角的文件选项,选择导入。选择要导入的模型文件,将其导入到编辑器。
在编辑器右侧,会显示模型的详细信息。在模型上单击对象可以快速的选中对象,同时也可以在上图中的Scene
选项卡中选择对象。
查看页面右侧区域,发现选中的仅仅是一个对象的某个部分(一个对象是由一组对象组成的)。当前通过单击模型,选中了Mesh135_3
这个对象,但是它其实是Object214
这个对象的一个组成部分,现在,想要选择Object214这个对象,只需要单击Object214即可。
注意: 选中对象后即可为选中的对象设置id,id与之后展示的数据相关联。
例如,要展示不同设备对应的数据,就可以给设置id为一个设备名,如“C214”,最终,“C214”对应的数据就会绑定到这个对象上。
当选择好对象后,可以看到页面右下方有一个自定义数据的编辑框。在自定义数据中,设置id。
比如,想要让这个对象最终绑定“C214”对应的数据,就设置id为“C214”,如下图所示。注意需要在前面加一个逗号“,”。
(如果不设置,则会通过默认相机位置进行观察)
每一个区域都可以指定一个观察的位置,在之后的“轮播”和“聚焦”时,相机都会移动到这个观察位置来观察区域。
观察位置的设置方式:给模型对象添加一个相机。
在编辑器页面的左上角,选择“
添加
”
选项,弹出菜单后,在菜单靠下的部分找到透视相机,即可在场景中找到刚添加的相机。
将这个相机“拖拽”到要观察的对象下,作为被观察对象的子对象。
例如,要给对象"C214"设置一个观察的位置,就把这个相机拖拽到"C214"这个对象下。
之后,就可以调整相机的位置,在仪表板中聚焦这个区域时,就会将相机移动到这个位置。
提示
您可以不用调整相机的面向,最终在仪表板中展现时会自动调整面向,观察对象(区域)的中心位置。
鼠标移动到左上角的文件选项,选择下方的导出GLB。
将导出后的文件保存在安装目录 的Server/wwwroot/Web Contents/.ModelFiles
文件夹内,在3D模型中加载模型文件时就可以选择使用了。
将导出后的文件部署成网络URL地址,在3D模型中加载模型文件时就可以选择使用了。
4. 其他设置
4.1 设置相机默认属性
相机包含两个默认属性:默认位置和默认相机位置。
可以通过两种方式进行设置:
- 将当前相机的属性设置为默认属性(推荐)。
- 手动输入数值。
首先来介绍第一种方式,通过鼠标操作(托拽、滚轮)可以修改当前相机的位置,当调整到合适的状态时,可以点击工具栏
的设置默认相机按钮,即可将当前相机的状态保存为默认的相机状态。
在设置当前位置为默认位置时,右侧的设置面板中的数值也会更改。
第二种设置方式就是在设置面板中直接输入数值,分别是相机位置的三维坐标和相机观察目标位置的三维坐标。
4.2 设置区域轮播
可以为模型开启自动轮播,轮播时相机首先会移动到默认的相机位置,之后会循环的聚焦所有的区域。
- 自动轮播:是否默认开启轮播。
- 相机跟随:轮播时,是否默认相机跟随。相机跟随是指聚焦的区域更换时,相机会移动到区域的观察位置;否则,相机仅会修改面向(目标位置)。
- 轮播间隔:轮播时,切换区域的时间间隔。
提示
可以通过排序功能改变轮播的顺序,轮播顺序和排序后的数据的顺序一致。
如不开启自动轮播功能,也可临时使用轮播功能。
预览区域右上角的第一个按钮为开启轮播按钮,鼠标悬浮后可见相机跟随选项。
4.3 条件格式化
插件支持条件格式化,区域会被一个透明的盒子包围,盒子的颜色可以自定义,但是有一个限制: 不能使用主题色。
比如我们添加一个条件格式化,使设备名称中包含C32 的设备填充为粉色(目前条件格式化时仅支持使用填充颜色)。
我们还可以通过在属性设置中设置使格式化仅在聚焦的区域应用。也即仅仅改变当前聚焦的区域的样式(如果满足条件)。
4.4 设置数据提示位置
首先,通过水平位置和竖直位置确定一个初始位置。
之后,通过垂直偏移和水平偏移两个值分别指定相对于初始位置的偏移量(px)。
5. 预览效果
6. 联动分析
插件支持联动分析。通过点击模型的区域进行选择,被选中的区域会通过线框进行标识。
6.1 增加对比条形图
增加对比条形图并进行数据绑定。
6.2 联动分析设置
6.3 联动分析
其他图表也会影响到模型(模型本身没有变化,但可聚焦的区域会受其他图标的影响)。