准备模型文件

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

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

创建模型

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

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

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

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

1. 导入模型

type=info
说明
示例中我们使用的模型文件：智慧工厂模型.glb

将鼠标移至编辑器左上角的文件选项，选择导入。选择要导入的模型文件，将其导入到编辑器。

在编辑器右侧，会显示模型的详细信息。在模型上单击对象可以快速的选中对象，同时也可以在上图中的Scene选项卡中选择对象。

2. 为选中的对象设置 id

查看页面右侧区域，发现选中的仅仅是一个对象的某个部分（一个对象是由一组对象组成的）。当前通过单击模型，选中了Mesh135_3这个对象，但是它其实是Object214这个对象的一个组成部分，现在，想要选择Object214这个对象，只需要单击Object214即可。

选中对象后即可为选中的对象设置id，id与之后展示的数据相关联。

例如，要展示不同设备对应的数据，就可以给设置id为一个设备名，如“C214”，最终，“C214”对应的数据就会绑定到这个对象上。

当选择好对象后，可以看到页面右下方有一个自定义数据的编辑框。在自定义数据中，设置id。

比如，想要让这个对象最终绑定“C214”对应的数据，就设置id为“C214”，如下图所示。注意需要在前面加一个逗号“，”。

如此做，将每个设备对应的 id 都设置好。

3. 设置观察机位

（如果不设置，则会通过默认相机位置进行观察）

每一个区域都可以指定一个观察的位置，在之后的“轮播”和“聚焦”时，相机都会移动到这个观察位置来观察区域。

观察位置的设置方式：给模型对象添加一个相机。

在编辑器页面的左上角，选择“ 添加 ”选项，弹出菜单后，在菜单靠下的部分找到透视相机，即可在场景中找到刚添加的相机。

将这个相机“拖拽”到要观察的对象下，作为被观察对象的子对象。

例如，要给对象"C214"设置一个观察的位置，就把这个相机拖拽到"C214"这个对象下。

之后，就可以调整相机的位置，在仪表板中聚焦这个区域时，就会将相机移动到这个位置。

type=info
提示
您可以不用调整相机的面向，最终在仪表板中展现时会自动调整面向，观察对象（区域）的中心位置。

4. 导出编辑好的模型文件

鼠标移动到左上角的文件选项，选择下方的导出GLB。

5. 将模型文件放置到安装目录下

将导出后的文件保存在Wyn安装目录的 Server/wwwroot/Web Contents/.ModelFiles 文件夹内，在3D模型中加载模型文件时就可以选择使用了。