Skip to main content

3D模型插件

3D模型

在数字孪生、智慧+概念的带动下,越来越多的行业开始借助数据分析与可视化的方式,辅助企业的生产经营活动,比如:智慧工厂、智慧能源、智慧园区、智慧旅游、智慧环境、智慧警务、智慧城市等。

在这些场景中除了通过图表/表格展示数据外,通过接入3D模型的方式将更加直观地展示和分析数据。

3D模型可视化插件可以将数据绑定到模型的数据上进行轮播展示并且支持条件格式化。

演示视频

1. 创建仪表板

添加可视化插件-3D模型。

image-20230629102520906

点击右上角编辑按钮。

image-20230629102658438

通过侧边工具栏【模板导入】按钮,打开选择模型界面,通过URL导入模型文件。

智慧工厂模型URL
https://gccndocumentsitestorage.blob.core.chinacloudapi.cn/document-site-files/attachments/470a8bbd-e525-44a5-a8a2-dc9a77e30084/%E6%99%BA%E6%85%A7%E5%B7%A5%E5%8E%82%E6%A8%A1%E5%9E%8B.50d34e.glb

image-20230629102948971

点击应用之后将加载模型。

image-20230629103046440

2. 数据准备

(1)数据源配置

示例中我们使用的示例数据为: 智慧工厂生成数据.xlsx

  1. 创建Excel数据源:

image-20230629103542971

  1. 上传数据文件:

image-20230629103629656

  1. 配置数据集:

image-20230629103803158

  1. 点击【编辑数据集】预览数据:

image-20230629103838262

(2)数据绑定

选中可视化组件进行数据绑定

  • 数值:数值字段,可绑定多个。
  • 区域标识:只能绑定一个字段,该字段的取值和模型中的对象(区域)设置的id相关联。
  • 属性: 可绑定多个。最终绑定的字段都会显示在数据提示上。

image-20230629113044717

另外,您还可以通过设置字段的格式和显示单位,修改数据提示时展示数据的格式。

比如我们可以将合格率的格式设置为百分比。

image-20230629105218530

(3)手动聚焦区域

除了所有的区域选项外,第一个选项默认相机,该选项会取消聚焦状态,并将相机移动到默认位置。

使用手动聚焦的方法可以在设计时查看各区域的设计是否满足需求,也可在预览时查看特定区域。

image-20230629113427295

在界面的右上角存在2个按钮,从上到下,第一个为轮播选项(之后介绍),第二个则为手动聚焦区域的选项。

将鼠标移到第二个按钮,就会将当前所有的区域列出来,单击想要聚焦的区域名称,就可以聚焦该区域( 被聚焦的区域会被黄色的线框包围 ),并且将相机移动到区域的观察位置(区域观察位置的设置方法见准备模型文件)。

image-20230629113308037

3. 准备模型文件

创建模型

在仪表板中使用 3D 模型插件必须要提前准备好模型文件,模型文件中除了提供模型本身之外,还定义了相机的视角以及如何与数据的匹配区域等信息。

我们通常是将一个模型导入到 three.js 中,然后进行必要的编辑以及信息指定(主要是标注区域),最后再导出一个.glb 文件供 3D 模型插件使用。

支持模型文件类型

使用通用的模型数据文件(目前支持.glb, .obj, .dae),由于模型文件的数据结构差异较大,并且插件使用的是three.js库开发,对.glb文件支持较好,所以推荐您使用.glb格式的模型。

建模软件

常见的建模软件(3dmax, maya, blender等)都可以进行建模并且可以导出.glb格式的模型。

对于没有默认glb导出方法的建模软件,可以尝试在社区中寻找相应gltf导出插件,gltf插件用于导出gltf和glb格式模型文件。

编辑模型(标注区域)

想让一个模型的对象变成区域,首先要使用three.js提供的模型编辑器进行编辑。

4. 其他设置

4.1 设置相机默认属性

相机包含两个默认属性:默认位置和默认相机位置。

可以通过两种方式进行设置:

  1. 将当前相机的属性设置为默认属性(推荐)
  2. 手动输入数值。

首先来介绍第一种方式,通过鼠标操作(托拽、滚轮)可以修改当前相机的位置,当调整到合适的状态时,可以点击工具栏的设置默认相机按钮,即可将当前相机的状态保存为默认的相机状态。

在设置当前位置为默认位置时,右侧的设置面板中的数值也会更改。

第二种设置方式就是在设置面板中直接输入数值,分别是相机位置的三维坐标和相机观察目标位置的三维坐标。

image-20230629114239255

4.2 设置区域轮播

可以为模型开启自动轮播,轮播时相机首先会移动到默认的相机位置,之后会循环的聚焦所有的区域。

效果图3.gif

image-20230629131920385

  • 自动轮播:是否默认开启轮播。
  • 相机跟随:轮播时,是否默认相机跟随。相机跟随是指聚焦的区域更换时,相机会移动到区域的观察位置;否则,相机仅会修改面向(目标位置)。
  • 轮播间隔:轮播时,切换区域的时间间隔。

提示

可以通过排序功能改变轮播的顺序,轮播顺序和排序后的数据的顺序一致。

如不开启自动轮播功能,也可临时使用轮播功能。

预览区域右上角的第一个按钮为开启轮播按钮,鼠标悬浮后可见相机跟随选项。

image-20230629132045419

4.3 条件格式化

插件支持条件格式化,区域会被一个透明的盒子包围,盒子的颜色可以自定义,但是有一个限制: 不能使用主题色。

比如我们添加一个条件格式化,使设备名称中包含C32 的设备填充为粉色(目前条件格式化时仅支持使用填充颜色)。

image-20230629132732457

我们还可以通过在属性设置中设置使格式化仅在聚焦的区域应用。也即仅仅改变当前聚焦的区域的样式(如果满足条件)。

image-20230629132608038

4.4 设置数据提示位置

首先,通过水平位置和竖直位置确定一个初始位置。

之后,通过垂直偏移和水平偏移两个值分别指定相对于初始位置的偏移量(px)。

image-20230629132934219

5. 预览效果

效果图4.gif

6. 联动分析

插件支持联动分析。通过点击模型的区域进行选择,被选中的区域会通过线框进行标识。

6.1 增加对比条形图

增加对比条形图并进行数据绑定。

image-20230629133707610

6.2 联动分析设置

image-20230629134242080

6.3 联动分析

其他图表也会影响到模型(模型本身没有变化,但可聚焦的区域会受其他图标的影响)。

联动效果