[{"id":"bcb0874d-299b-448e-9552-9e9b25ef80dd","tags":[{"product":null,"links":null,"id":"ba7e818e-4f6b-4211-b1ac-58e3bafcf439","name":"\u66F4\u65B0","color":"orange","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"8ce3627e-9e58-471b-9133-4f135d191e7b","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"ae60ae59-34f5-4f32-a8eb-243ed1457543","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"3d4848c3-910f-4ffa-9153-60bb507334a9","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"133f4ca6-d951-4d65-a618-3dc6301266f7","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"de62ec1c-813e-40b1-8160-a4cd109afe64","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"2426c71d-8332-4cbd-a436-1ec4f8666464","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"2ce7b6b0-78aa-4e4b-bf8a-e4ba2f988298","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"4706db46-0811-4652-8f59-1e0a1da84758","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"8f1271bb-2cd9-4f39-9897-c15b239ee7ab","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"677e13a7-6f3e-449f-986c-2c3a26f8d54f","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"5e40f6dc-caec-49d7-a1d0-be65f06815ba","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"2457f0e0-9e71-4860-a87d-065e0fb84f84","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"d5c67fd0-1145-482c-9113-97b492c44c18","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"a609a8fa-ab91-4c1d-a1c3-d209d0463303","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"b4a9eb15-94e5-48df-b218-a24138f0cf9c","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 场景中需要使用模型来支撑显示整个场景和数据,所以需要提前将模型准备好。支持两种准备方式:

方式一:将模型文件上传至系统

在文档门户首页单击加号,上传模型,支持 .glb 格式。

上传模型文件

方式二:准备一个可用的模型链接,如 https://xxxxxxxx.com.cn/3dmodel.glb

2. 创建3D场景

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

image

进入设计器,先来分区了解一下整个设计器。

image

编号

描述

说明和截图

A

场景菜单

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

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

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

image

B

画布区域。

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

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

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

image

C

属性设置和数据绑定区。

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

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

image

image

D

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


3. 添加数据模型

将第1步中准备的模型添加到 3D 场景中,支持共享模型和外部链接两种方法。

共享模型是提前上传到系统中的文件;切换到外部链接可添加模型链接。

这里以使用共享模型为例截图。

image

4. 场景建模

对导入的模型进行场景建模,使其符合使用需求。

鼠标悬浮画布区域,滚动滚轮进行缩放,拖动调整视角,全方位观察模型。

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

image

设置模型节点名称

节点名称是匹配数据的关键,该名称必须是数据图层模型节点绑定字段中的值。

比如我们最终想要展示各客户地区的销售额,每个小房子代表一个客户地区。那么节点名称就必须是客户地区中的值,这样才能匹配上数据集或模型中的数据。

实际设置时,如果已经了解字段中的值,就可以直接输入。比如我十分了解将要使用的数据,客户地区中包含的字段有“东北”、“西北”等等。那就可以直接输入模型节点的名称。

image

您也可以先在数据图层绑定数据(详见本页中设置数据相关介绍)。

image

然后回到模型建模中,点击下拉按钮直接选择模型节点中绑定的数据即可。

image

设置模型位置/角度/大小

模型变换大类下显示和设置模型节点的平移、旋转或缩放倍数。将各个模型节点调至合适的位置、角度和大小。

image

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

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

设置轮播

当场景开启轮播功能后,会轮流聚焦绑定数据的模型节点,详见开启轮播功能

这里的轮播相机设置就是用来设置轮播聚焦当前模型节点时的相机视角。

两种设置方法:

  1. 直接输入数据,点击预览相机位置;

  2. 在画布中拖动模型,角度合适后点击应用编辑器相机位置。此时数据也会显示在属性设置中。

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

image

添加光源

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

image

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

image

5. 设置数据

模型的数据最终是以数据标签的形式呈现出来的,通过模型节点的名称和绑定的数据对应起来。

如下图所示,点击左侧的数据图层图标打开数据图层设计界面,然后点击添加按钮添加数据图层。

选择数据图层就可以在右侧数据绑定面板中进行数据绑定,具体使用方法与仪表板中完全一致。绑定数据之后,模型中将显示出数据标签(示例中我们修改了两个房子的名称,所以仅显示了两组数据)。

image

定制标签内容

还可以进一步定制标签内容,点击提示标签右侧的更多按钮,选择设置

image

在设置窗口中可以设置标签显示的内容以及字体样式或可以手动输入内容。也可以单击右上角的 image 按钮,插入组件中绑定的字段,

image

效果如下:

image

设置标签外观

点击属性设置设置标签的外观。

image

大类

项目

说明

模型标签

名称

当前选中的数据标注的名称,可重命名。

显示模式

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

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

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

隐藏:数据标注一直隐藏。

字体设置

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

背景颜色

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

背景图片

设置标签的背景图片,关于添加图片时的具体操作请参考图片

边框颜色

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

边框圆角

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

条件格式化

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

数据交互

数据交互

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

  • 无:不进行自动刷新。

  • 定时刷新:间隔一段时间,去重新取缓存中的数据。可以设置刷新间隔,也可以单击“刷新间隔”后的下拉按钮选择间隔时间。

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

布局

布局大小

设置标签的大小,可选择自动固定尺寸

选择固定尺寸时,需要输入标签的宽度和高度。

内部边距

设置标签边框与内容的距离。

垂直偏移

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

数据设置

显示维度所有内容

将数值为 NULL或空的维度也显示出来。

空值(Null)显示为

设置空值(Null)时显示的内容。

空白(Black)显示为

设置空白(Black)时显示的内容。

6. 场景设定

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

image

分类

项目

说明

截图

场景设置

环境背景

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

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

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

image

环境模糊度

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


地面

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

image

模型选中颜色

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

image

image

轮播设置

自动轮播

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

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

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

image

相机

Alpha/Beta/距离上下限

控制相机Alpha弧度、Beta弧度以及距离的上下限制。

Beta 上下限范围为0.01到1.57;距离的上下限范围为0到500。

image

开启景深效果

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

开启后可设置焦距、光圈系数和模糊半径。

常规设置

场景参数

设置场景参数,详见数据筛选和过滤

image

全局筛选器

添加全局数据过滤器,详见添加数据筛选和过滤

语言资源

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

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

image

image

文档外观

文档主题

设置场景文档主题。

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


模型动画

动画方案

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

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


数据交互


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

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

image

特效

粒子特效

向场景添加粒子效果。


飞升线条

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


抗锯齿

启用MSAA

是否启用MSAA方案。


启用FXAA

是否启用FXAA方案。


7. 保存场景

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

image

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

image

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

image