[{"id":"840f0737-df1d-47ae-bb0a-359b01fe0608","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"d5d9cdef-8854-4505-89be-a2bbc3cb4482","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"3dc3dd55-35b0-4d23-bf62-47bc3650e4ee","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"80d84fbc-d0f8-4e4a-947f-e3e4de9b49b2","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"9152b7ca-0186-4fe3-a26f-5a05f322db07","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]}]
在仪表板中使用 3D 场景时,必须提前准备好场景文件,场景文件中除了设计模型场景相关的信息,还定义了数据、参数、格式化等信息。
本文以一个示例来讲解如何创建3D场景文件。
在文档门户首页单击加号,选择3D场景。
编号 | 描述 | 说明和截图 |
---|---|---|
A | 场景菜单
| |
B | 画布区域。
| |
C | 属性设置和数据绑定区。
| |
D | 撤销、重做、保存、预览。 |
支持共享模型和外部链接两种方法,模型是提前上传到系统中的文件,支持.glb 格式。当然您也可以通过外部链接添加模型。
鼠标悬浮画布区域,滚动滚轮可以进行缩放,拖动可以调整视角。
在左侧可展开模型结构,显示出包含的节点。单击选中模型节点,在右侧可以设置名称,模型变换以及轮播相机设置。
名称: 匹配数据的关键,该名称必须和最终想要绑定的数据分类相对应。比如我们最终想要展示各大区的销售额,那么这里的模型元素名称就需要是大区名称,这样才能匹配上数据。
模型变换: 显示或设置模型节点的平移、旋转和缩放数据。
利用右下角的功能健也可快速实现对模型节点的缩放、旋转和平移。
轮播相机设置: 设置轮播聚焦当前模型节点时的相机视角。
可以直接输入数据,点击预览相机位置; 也可以在画布中拖动模型,角度合适后点击应用编辑器相机位置。此时数据也会显示在属性设置中。
Alpha弧度指的是水平方向的旋转弧度;Beta弧度指的是垂直方向的旋转弧度,范围为0.01到1.57;距离指的是相机到模型的距离,范围为0到500。
另外还支持向场景中添加光源,支持平行光、点光源和聚光灯效果。
选中光源,在右侧可调整强度。
进入数据图层,点击添加按钮添加数据标注。
然后右侧就可以进行数据绑定,可使用仪表板中支持的所有数据类型,包括缓存数据集,流式数据集、推送数据集、原生查询数据集、抽取模型以及直连模型。
绑定数据之后,模型中按照数据进行显示(按照模型元素名称显示数据,示例中我们修改了两个房子的名称,所以仅显示两组数据)。
点击属性设置对数据标注进行外观设置。
项目 | 说明 |
---|---|
名称 | 当前选中的数据标注的名称。 |
垂直偏移 | 数据标注上下偏移的距离,正数向上偏移,负数向下偏移。 |
背景颜色 | 设置数据标注的背景颜色。 |
边框颜色 | 设置数据标注的边框颜色。 |
边框圆角 | 设置数据标注的边框圆角弧度。 |
字体设置 | 设置数据标注的字体样式,包括字体类型、大小、颜色,加粗,斜体等。 |
条件格式化 | 添加条件格式化,使满足条件的数据进行样式提醒。详见条件格式化。 |
显示模式 | 总是:数据标注一直显示。 点击:鼠标点击对应模型元素时才显示。 悬浮:鼠标悬浮至对应的模型元素时才显示。 |
数据交互 | 设置是否进行数据刷新。类似于仪表板中组件的数据刷新能力。 无:不进行自动刷新。 定时刷新:间隔一段时间,去重新取缓存中的数据。 可以设置刷新间隔,也可以单击“刷新间隔”后的下拉按钮选择间隔时间。 实时刷新: 当缓存数据集或模型中有数据刷新后,主动向场景中推送缓存数据。使场景中的数据能在数据刷新后立即自动刷新。 |
点击场景设定按钮,在右侧的属性设置中设置场景。
分类 | 项目 | 说明 | 截图 |
---|---|---|---|
场景设置 | 环境背景 | 默认有一个背景,支持更换其他场景,如演播室、蓝天白云等。 也可以选择自定义背景,然后添加背景URL。 (点击https://polyhaven.com/hdris 获取免费背景) | |
环境模糊度 | 设置背景的模糊程度,最小为0.01。 | ||
地面 | 选择地面效果,可设置地面的图案、颜色、线的颜色、网格密度。 | ||
模型选中颜色 | 设置选中模型的边框颜色(仅预览时生效)。 | ||
轮播设置 | 自动轮播 | 轮播总开关,开启后预览时将轮流聚焦数据标注。 可全局设置聚焦时的高亮颜色、相机角度、距离、移动动画时间和相机停滞时间。 设置后,各个模型节点会继承该设置。但当模型节点自定义数据后,则以模型节点中的设置为准。 | |
相机 | 半径上限 | 控制相机的最远距离。 | |
开启景深效果 | 是否启用相机的景深效果。 开启后可设置焦距、光圈值和模糊级别。 | ||
常规设置 | 场景参数 | 设置场景参数,详见在场景中使用参数。 | |
语言资源 | 为场景中加载语言资源,加载后可在数据绑定区域为已绑定字段重命名时使用语言资源。 详细介绍请您参考应用语言资源。 | ||
文档外观 | 文档主题 | 设置场景文档主题。 更改主题时,字体颜色、字体大小、背景等都会受到影响。 | |
模型动画 | 动画方案 | 配置如何执行3D模型中设计的动画。需要提前向场景中添加有动画设计的模型。 显示加载模型中的动画列表并自定义开始时间和循环方法。 | |
数据交互 | 自定义编写JavaScript代码并选择执行的时机,与仪表板进行数据交互。 详见使用JS代码定制数据交互。 | ||
特效 | 粒子特效 | 向场景添加粒子效果。 | |
飞升线条 | 添加飞升l为场景添加飞升线条效果。 | ||
冲击波 | 为场景添加冲击波效果。 位置:设置冲击波产生的原点位置。 扩散距离:设置冲击波的扩散距离。 扩散速度:设置冲击波的扩散速度,值越大速度越快。 冲击波颜色:设置生成的冲击波的颜色。 | ||
抗锯齿 | 启用MSAA | 是否启用MSAA方案。 | |
启用FXAA | 是否启用FXAA方案。 |
设置完成后,基本的一个3D场景就完成了,保存相机视角,并点击保存按钮保存场景。
输入场景名称,选择合适的分类,并点击确定。
在门户网站中点击可预览场景。后续为您介绍,将设计的3D场景文件应用到仪表板中。