[{"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"}]}]
        
(Showing Draft Content)

创建3D场景

在仪表板中使用 3D 场景时,必须提前准备好场景文件,场景文件中除了设计模型场景相关的信息,还定义了数据、参数、格式化等信息。

本文以一个示例来讲解如何创建3D场景文件。

创建3D场景文件

1. 创建3D场景

在文档门户首页单击加号,选择3D场景

image

2. 场景设计器

image

编号

描述

说明和截图

A

场景菜单

  • 模型: 添加3D模型,并显示模型树形结构。用户可以显示、隐藏、删除或选中其中一个元素。

  • 光源: 为场景添加光源,支持平行光、点光源和聚光灯。

  • 数据图层: 为场景添加数据标注。

image

B

画布区域。

  • 中间是用来渲染和操作3D场景的画布。

  • 上方是两个按钮。场景设定: 用来对整个场景进行设定,点击后在右侧的属性设置区域进行具体设定。保存相机视角 :随时保存相机视角,预览时将使用最新保存的视角。

  • 下方是状态栏,包含:视图方向(侧视图、俯视图和顶视图)、网格选择模式(缩放、旋转和平移)以及高亮显示选中的模型元素。

image

C

属性设置和数据绑定区。

  • 属性设置: 与其他设计器类似,此区域显示当前选中元素的属性设置项。

  • 数据绑定: 在数据图层添加数据标注后,即可进行数据绑定。

image

image

D

撤销、重做、保存、预览。


3. 添加数据模型

支持共享模型和外部链接两种方法,模型是提前上传到系统中的文件,支持.glb 格式。当然您也可以通过外部链接添加模型。

image

4. 场景建模

鼠标悬浮画布区域,滚动滚轮可以进行缩放,拖动可以调整视角。

在左侧可展开模型结构,显示出包含的节点。单击选中模型节点,在右侧可以设置名称模型变换以及轮播相机设置

image

  • 名称: 匹配数据的关键,该名称必须和最终想要绑定的数据分类相对应。比如我们最终想要展示各大区的销售额,那么这里的模型元素名称就需要是大区名称,这样才能匹配上数据。

image

  • 模型变换: 显示或设置模型节点的平移、旋转和缩放数据。

    image


    利用右下角的功能健也可快速实现对模型节点的缩放、旋转和平移。

3D-缩放模型 3D-旋转模型 3D-平移模型

  • 轮播相机设置: 设置轮播聚焦当前模型节点时的相机视角。

    可以直接输入数据,点击预览相机位置; 也可以在画布中拖动模型,角度合适后点击应用编辑器相机位置。此时数据也会显示在属性设置中。

Alpha弧度指的是水平方向的旋转弧度;Beta弧度指的是垂直方向的旋转弧度,范围为0.01到1.57;距离指的是相机到模型的距离,范围为0到500。

image

另外还支持向场景中添加光源,支持平行光、点光源和聚光灯效果。

image

选中光源,在右侧可调整强度。

image

5. 设置数据

进入数据图层,点击添加按钮添加数据标注。

然后右侧就可以进行数据绑定,可使用仪表板中支持的所有数据类型,包括缓存数据集,流式数据集、推送数据集、原生查询数据集、抽取模型以及直连模型。

绑定数据之后,模型中按照数据进行显示(按照模型元素名称显示数据,示例中我们修改了两个房子的名称,所以仅显示两组数据)。

image

点击属性设置对数据标注进行外观设置。

image

项目

说明

名称

当前选中的数据标注的名称。

垂直偏移

数据标注上下偏移的距离,正数向上偏移,负数向下偏移。

背景颜色

设置数据标注的背景颜色。

边框颜色

设置数据标注的边框颜色。

边框圆角

设置数据标注的边框圆角弧度。

字体设置

设置数据标注的字体样式,包括字体类型、大小、颜色,加粗,斜体等。

条件格式化

添加条件格式化,使满足条件的数据进行样式提醒。详见条件格式化

显示模式

总是:数据标注一直显示。

点击:鼠标点击对应模型元素时才显示。

悬浮:鼠标悬浮至对应的模型元素时才显示。

数据交互

设置是否进行数据刷新。类似于仪表板中组件的数据刷新能力。

无:不进行自动刷新。

定时刷新:间隔一段时间,去重新取缓存中的数据。

可以设置刷新间隔,也可以单击“刷新间隔”后的下拉按钮选择间隔时间。

实时刷新: 当缓存数据集或模型中有数据刷新后,主动向场景中推送缓存数据。使场景中的数据能在数据刷新后立即自动刷新。

6. 场景设定

点击场景设定按钮,在右侧的属性设置中设置场景。

image

分类

项目

说明

截图

场景设置

环境背景

默认有一个背景,支持更换其他场景,如演播室、蓝天白云等。

也可以选择自定义背景,然后添加背景URL。

(点击https://polyhaven.com/hdris 获取免费背景)

image

环境模糊度

设置背景的模糊程度,最小为0.01。


地面

选择地面效果,可设置地面的图案、颜色、线的颜色、网格密度。

image

模型选中颜色

设置选中模型的边框颜色(仅预览时生效)。

image

image

轮播设置

自动轮播

轮播总开关,开启后预览时将轮流聚焦数据标注。

可全局设置聚焦时的高亮颜色、相机角度、距离、移动动画时间和相机停滞时间。

设置后,各个模型节点会继承该设置。但当模型节点自定义数据后,则以模型节点中的设置为准。

image

相机

半径上限

控制相机的最远距离。


开启景深效果

是否启用相机的景深效果。

开启后可设置焦距、光圈值和模糊级别。

image

常规设置

场景参数

设置场景参数,详见在场景中使用参数


语言资源

为场景中加载语言资源,加载后可在数据绑定区域为已绑定字段重命名时使用语言资源。

详细介绍请您参考应用语言资源

image

image

文档外观

文档主题

设置场景文档主题。

更改主题时,字体颜色、字体大小、背景等都会受到影响。


模型动画

动画方案

配置如何执行3D模型中设计的动画。需要提前向场景中添加有动画设计的模型。

显示加载模型中的动画列表并自定义开始时间和循环方法。


数据交互


自定义编写JavaScript代码并选择执行的时机,与仪表板进行数据交互。

详见使用JS代码定制数据交互

image

特效

粒子特效

向场景添加粒子效果。


飞升线条

添加飞升l为场景添加飞升线条效果。


冲击波

为场景添加冲击波效果。

位置:设置冲击波产生的原点位置。

扩散距离:设置冲击波的扩散距离。

扩散速度:设置冲击波的扩散速度,值越大速度越快。

冲击波颜色:设置生成的冲击波的颜色。

image

抗锯齿

启用MSAA

是否启用MSAA方案。


启用FXAA

是否启用FXAA方案。


7. 保存场景

设置完成后,基本的一个3D场景就完成了,保存相机视角,并点击保存按钮保存场景。

image

输入场景名称,选择合适的分类,并点击确定

image

在门户网站中点击可预览场景。后续为您介绍,将设计的3D场景文件应用到仪表板中。

image