反馈已提交

网络繁忙

构建3D园区监控场景

  • 文档创建者:帆软图表
  • 编辑次数:10次
  • 最近更新:帆软图表 于 2021-12-21
  • 1. 概述

    适用场景:安装了「FVS大屏编辑模式」插件的用户,可参考本文了解 FVS 模板的相关功能。

    1.1 版本

    报表服务器版本
    JAR包FVS大屏编辑模式(beta版)版本
    11.02021-11-15V1.1.0

    1.2 场景介绍

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

    模板效果如下图所示,点击下载模板资源:智慧园区监控

    1.3 实现效果

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

    点击拉进视角.gif

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

    模型弹框.gif

    2. 示例

    步骤.png

    2.1 导入模型:导入glb格式的模型

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

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

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

    导入模型.png

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

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

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

    调整缩放等级.png

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

    • 调整前:

    调整位置前.png

    • 调整后:

    调整位置后.png

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

    • 镜像前:

    镜面前.png

    • 镜像后:

    镜面后.png

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

    导入打光模型.png

    3)调整模型的旋转视角

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

    调整旋转角度.png

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

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

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

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

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

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

    组件编辑状态.png

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

    视角编辑状态.png

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

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

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

    模型名称匹配数据集.png

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

    添加数据图层.png

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

    配置模型数据标签.png

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

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

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

    设置点击交互事件.png

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

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

    设置弹框.png

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

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

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

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

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

    点击模型跳转分页.png

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

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

    交互事件.png

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

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

    制作多个分页.png

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

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

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

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

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

    开启平滑过渡.png

    2.6 预览效果

    预览效果.gif

    3. 资料下载

    测试模板:智慧园区demo测试.fvs

    测试材料:测试材料.zip

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

    附件列表


    主题: FVS大屏编辑模式插件公测
    • 有帮助
    • 没帮助
    • 只是浏览

    售前咨询电话

    400-811-8890转1

    在线技术支持

    在线QQ:800049425

    热线电话:400-811-8890转2

    总裁办24H投诉

    热线电话:173-1278-1526

    文 档反 馈

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭