自定义模型线框风格

适用场景：安装了「FineVis数据可视化」插件的用户，可参考本文了解 FineVis 的相关功能。

1.1 版本

1.2 应用场景

在三维场景中，线框风格是最有科技感的一种视觉效果，常用于以下两种场景：

• 透视模型内部情况，例如机器内部运行情况

• 提高整体场景的科技氛围

例如，机器产线模型开启线框风格的效果，如下图所示：

1.3 功能简介

1）在 三维城市场景组件 和 三维自定义场景组件 中上传自定义 glb 模型时，支持进行「风格预处理」，可启用线框风格。

2）线框风格分为「默认线框」和「自定义线框」，只能选择一种使用。

3）「自定义线框」需上传与模型外表相匹配的线框贴图，线框贴图的制作方式可参考：三维模型如何制作线框贴图 。

4）模型属性中新增「风格」设置项，支持修改风格的相关设置。

5）模型属性中新增「动画」设置项，启用了线框风格的模型支持添加「线框变化动画片段」，添加后即可作为三维组件的动画使用。

请点击下载本文使用的模型及贴图资源：模型及贴图资源.zip

2.1 添加组件并创建场景

1）新建一张可视化看板，可自定义名称、画布尺寸等。如下图所示：

2）点击组件区「3D>三维自定义场景」，将组件添加到画布中，点击右侧配置区「编辑组件」，进入自定义模型组件编辑页面。如下图所示：

3）首次进入自定义模型组件编辑界面时，需要生成一个空场景或导入已有场景。这里我们选择一种风格，生成场景即可。如下图所示：

2.2 风格预处理

1）点击「模型」进入模型配置面板，点击「+添加模型对象」或「添加模型」进入模型管理界面。

2）点击「上传模型」，选择下载的示例文件中的 production_line.glb 文件。如下图所示：

3）上传模型时，需对模型进行预处理：

数据预处理：可调整模型的显示层级。该操作仅支持预处理时设置，后续无法再次编辑或者撤销。

风格预处理：可选择是否勾选「启用线框风格」。勾选后，可选择使用「默认线框」或「自定义线框」。

左侧预览界面会显示线框风格，可通过鼠标左右键及滚轮调整视角。

• 默认线框：支持「阈值」调整设置。阈值越大，线框风格包括的细节越多。

注1：默认阈值为 10 可能会导致有些模型看不出效果，此时将阈值调大即可。

注2：若上传的模型面数过多，启用默认线框时，加载可能非常慢。建议先简化模型面数后再进行风格预处理。

• 自定义线框：支持上传与模型外表相匹配的线框贴图，贴图必须是用建模软件处理导出的 png 图片，如何制作可参考：三维模型如何制作线框贴图 。

注：若需定制模型及线框贴图可联系帆软销售顾问。

4）模型预处理完成后即被添加到模型库中，鼠标悬浮模型文件时，出现「模型预处理」和「删除」按钮。

5）点击「模型预处理」按钮，弹出模型预处理设置框，此时仅支持修改「风格预处理」相关设置，「数据预处理」设置项灰化不可编辑。如下图所示：

2.3 模型风格

模型载入场景之后，选中模型列表中的模型对象时，在下方属性面板中可设置模型「风格」，支持设置为「默认」或「线框风格」。

1）模型初始时，风格均显示为「默认」，展示为模型原始风格。如下图所示：

2）若模型风格预处理时，启用了线框风格，则根据线框风格类型显示为不同的选项：

• 线框风格(默认)：表示预设风格为「默认线框」，支持设置线框粗细和线框颜色。

• 线框风格(自定义)：表示预设风格为「自定义线框」，仅支持设置线框颜色。

3）若模型风格预处理时，未启用线框风格，此时选择「线框风格」，会提示 操作失败，请先处理线框风格。此时点击「立即处理」，在弹出的风格预处理设置框中设置后，点击「确定」，即可成功切换风格。如下图所示：

4）点击右侧「风格预处理」设置按钮，也会弹出设置框，支持修改预设的线框风格。

2.4 线框变化动画

2.4.1 添加动画片段

1）选中模型列表中的模型对象时，在下方属性面板中可设置模型风格切换「动画」，支持添加多个动画片段。

2）设置一个「从原始到线框」的动画片段。如下图所示：

注：要添加线框变化动画需启用线框风格，若未启用线框风格，点击「+线框变化动画片段」，会提示「操作失败，请先处理线框风格 」。此时点击「立即处理」，启用线框风格后，再重新添加动画片段即可。

2）各设置项说明如下表所示：

2.4.2 设置动画效果

1）添加线框变化动画片段后，即可在「模型动画管理」中添加动画方案。如下图所示：

注：V2.10.0 版本之前，需要先勾选「开启模型动画」，再点击「添加动画方案。

2）设置完成点击「确定」，在左侧模型展示界面即可立即看到动画效果。如下图所示：

注：若选择单次播放，则模型会停留在动画结束时的风格样式。

2.5 其他组件点击触发动画

添加线框变化动画后，可通过其他组件添加「交互点击事件」触发三维组件动画。

1）在 2.4.1 节「从原始到线框」动画片段的基础上，同理再添加一个「从线框到原始」的动画片段。如下图所示：

2）点击模型编辑界面左上角「返回可视化看板」，在画布中添加两个 标题组件 ，标题内容分别为「原始风格」和「线框风格」。如下图所示：

3）选中「原始风格」标题，点击「交互>添加事件>鼠标点击」，选择「三维模型动画」，设置动作名称、动画来源、动画对象、播放命令、命令时机、播放方式。具体如下图所示：

5）同理，为「线框风格」标题添加点击事件，动作名称设置为「从原始到线框」，动画对象选择「从原始到线框」，其余设置相同。

6）预览效果如下图所示：

注：不支持移动端。

点击下载模板：自定义模型线框风格示例.fvs