历史版本7 :构建3D园区监控场景 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

场景介绍编辑

此文档主要介绍将自定义3D模型导入FVS模板,并构建园区等场景的主要步骤(示例demo如下图),不介绍图表、表格、指标卡等2D组件的实现。

0.jpeg

点击下载模板资源:https://market.fanruan.com/template/20000501

实现效果编辑

效果1:点击模型或按钮,拉进三维视角

点击拉进视角.gif

效果2:点击模型弹框监控视频

模型弹框.gif

demo教程编辑

步骤.png

1、导入模型:导入glb格式的模型

FVS大屏编辑模式中,三维组件仅支持glb格式的模型,用户需要将其它格式的模型转化为glb格式。

这里提供两个示例模型仓库.glb、车间.glb作为参考。

实现的详细步骤参考https://help.fanruan.com/finereport/doc-view-4326.html第1-5步。

导入模型.png


2、调整模型:调整模型的大小、位置及视角:

刚导入的模型可能看不到,有可能是模型过大、过小,或者所在位置超出视野范围。

1)尝试将模型大小缩小至0.01倍(或其它等级),再在这个量级上做进一步调整

调整缩放等级.png


2)改变模型在场景中的(x,y,z)坐标系,调整模型位置

  • 调整前:

调整位置前.png

  • 调整后:

调整位置后.png


注意1:调整z<0,会出现镜面效果,可据此调整不同建模工具之间的镜像关系带来的影响。

  • 镜像前:

镜面前.png

  • 镜像后:

镜面后.png


注意2:当前三维组件的默认环境光线比较暗淡,在文末的测试材料中提供了一个能提亮光线的模型 _calder_light.glb(使用时不要改动这个模型的名称!),导入后场景更明亮。

导入打光模型.png


3)调整模型的旋转视角

支持用户调整模型的旋转角度,一般只需要调整沿Y轴的旋转角度,即水平面上的旋转角度。

调整旋转角度.png


4)调整整体场景的视角和大小

一般先在3D组件编辑界面调整视角和视野大小,再来到模板编辑界面调整到适合大屏整体的效果。

先在3D组件编辑界面调整(请看下图中的操作说明):

3D编辑页面调整视角.png


再返回模板编辑界面调整:

  • 调整组件在模板中的位置:

组件编辑状态.png

  • 调整组件中模型的视角:

视角编辑状态.png


3、配置数据:新建模型数据图层,实现数据标签

在FVS中,通过模型的名称关联FR数据集,配置数据标签。

1)模型名称是与数据关联的“枢纽”,用户可以修改导入的模型名称,若模型名称重复,会自动会名称加上后缀;

模型名称匹配数据集.png


2)在「数据」-「添加数据图层」-「模型-数据图层」添加数据图层:

添加数据图层.png


3)根据模型名称匹配「模型名称」和「模型内容」字段:

配置模型数据标签.png


4、设计弹窗:对模型数据图层设置弹出框

在FVS中,以模型的数据图层作参数,将图层中的模型名称传递给交互对象,从而配置模型的联动、弹框等特效。

1)返回模板编辑页面,在选中三维组件的状态下,在「交互」tab中添加点击事件;选择事件对象为刚刚新建的数据图层,再选中弹出框。

设置点击交互事件.png


2)设置弹框的内容链接为弹框内容页面的预览链接。这意味着用户需要为弹框内容再制作一张fvs或frm等模板,引用为弹框内容。

这里测试用的弹框内容是模板包中的"保安房监控1",将此模板放在本地设计器预览后,获取预览链接即可使用。

设置弹框.png


可以调整弹框样式,这里省略介绍。

需要详细了解弹框功能,可以参考帮助文档:https://help.fanruan.com/finereport/doc-view-4400.html


5、构建多视角:多分页+平滑过渡实现模型视角切换

用户需要实现“点击某个模型或按钮,拉进视角或钻取到场景的某个位置”时,我们为每个视角制作一个分页,利用多分页和平滑过渡效果实现模型视角的切换、空间位置的移动或钻取。


1)新建多个分页,设置模型中的点击分页跳转事件,每个模型图层对应一个分页跳转事件。如下图,配置“模型图层2-车间”的分页跳转事件,对应跳转“仓库页面”:

点击模型跳转分页.png

屏幕快照 2021-11-26 下午3.09.09.png


同样的,我们可以设置点击仓库模型触发的分页跳转事件;还可以制作自定义按钮,触发跳转分页的事件。

交互事件.png


2)将三维组件复制到新建的分页,并依次调整分页中的模型视角。

如下图,对新建的“仓库页面”、“车间页面”,分别复制三维组件粘贴,调整两个页面的模型视角到仓库和车间,并添加对应的图表、表格等组件:

制作多个分页.png


3)开启页面间的平滑过渡

FVS多分页平滑过渡可以使同一组件在不同分页中切换时,不需要重新加载,这可以满足三维组件切换视角的需求。

实现平滑过渡需要满足两个条件:

①分页之间开启「平滑过渡」按钮

②平滑过渡的组件同类型且同名称(复制粘贴到不同分页的组件自动同名)

开启平滑过渡.png


预览效果编辑

预览效果.gif

资料下载编辑

测试模板:

智慧园区demo测试.fvs

测试材料:

测试材料.zip

最终模板:智慧园区监控demo