数据可视化 - 三维场景的实现

近年来，随着我国互联网行业的高速发展，网络上积累了海量的数据，如何将这些海量数据的价值发挥至最大化，成为了很多用户、企业的难题。数据可视化、BI工具随之而来，企业和用户可以通过搭建可视化页面、自助BI分析获取数据背后的信息。

数据可视化发展至今，有许多表现形式。今天，答主为大家介绍数据可视化的分支——三维场景。

三维场景是在线可视化制作三维场景的编辑器，通过它您可以轻松制作酷炫的三维效果，并集成到大屏中展现。三维场景的模型效果，如下图所示：

三维场景展示

​

今天，答主就来给大家推荐一个0代码就能实现三维场景搭建的工具 —— Sugar BI

如何0代码搭建三维场景？

下面，答主将详细的为大家演示如何通过Sugar BI 0代码搭建单位场景

1. 创建三维场景

在空间左侧导航中点击「新建」来创建三维场景

2. 整体界面

整体界面和大屏编辑器类似，整个界面分为五个区域：

​顶部绿色框线内是添加内容区域，用于添加物体、光源及特效，以及预览和常见设置等。

左侧红色框线内是场景内容列表，这里将会列出场景中的所有内容，方便选择及删除。

中间蓝色框线内是编辑器工具栏，用于对场景进行编辑。

右侧黑色框线是属性面板，用于修改某个选中场景内容的参数。

中间是 3D 场景的画布区域。

3. 基础操作

三维场景编辑和大屏编辑器有些不同，如果您之前未使用过其它的三维设计软件，请阅读以下说明快速入门：

a. 添加物体

将鼠标移到「添加物体」按钮上，点击「三维模型」：

​还可以自己上传模型（云上 SaaS 版支持最大上传 10MB 的模型文件，私有部署版本中不限制模型文件的大小，建议不要过大），目前我们支持 ifc/fbx/gltf/glb 格式的模型，如果您不了解，请联系我们尝试转成这个格式。

注意：由于 babylon 不支持实时渲染，因此需要烘焙（bake），即将模型光影关系等通过图片的方式转换出来，这样就形成了一种贴图，将这种贴图控制在模型上，可以得到一种假的但很真实的效果。

b. 添加光源

新建场景的时候，系统会默认给场景添加平行光源，您可以自己添加其他光源，包括点光源、平行光、半球光和聚光灯 4 中类型的光源，但还是建议光源个数不超过 3 个，光源过多，会导致渲染要求过高造成卡顿。

c. 添加标注

将鼠标移到场景中的物体上，鼠标左键在物体上双击即可在对应位置添加文本标注，文本标注支持输入静态内容和通过数据模型的方式绑定数据。

​d. 添加粒子特效

三维场景支持给场景添加粒子特效，支持「悬浮颗粒」和「上升线条」两种类型，对应的配置中可设置粒子的位置、颜色、发射方向等信息。

3. 如何在场景中移动

在场景内中移动的方法是：

• 缩放，鼠标滚轮

• 环绕，按住鼠标左键进行拖动，这是围绕一个点进行环绕

• 平移，按住鼠标右键进行拖动

以下视频按顺序演示了这三种操作的效果

​

选中操作

在编辑器左上角的选中有三种状态，默认是移动

• 移动位置

• 旋转

• 缩放，除了按各个方向进行缩放，还可以按住中间黄色的点进行所有方向缩放

以下视频演示了如何对物体进行这三个操作

Sugar BI三维场景 - 选中操作

同时还能修改左侧属性面板中的属性来进行这三个操作，如下图所示

4. 修改播放相机

需要在场景编辑器中实际上有两个相机，编辑相机和播放相机：

• 编辑相机只在编辑器中使用，用于编辑的时候查看。

• 播放相机是场景最终展现时使用的相机。

可以点击右上角的「预览」按钮，查看播放相机下的效果。

​点击左侧的「播放相机」，然后通过点击右侧属性面板中「初始位置与当前编辑器相机一致」按钮可以将当前编辑器相机里的参数同步到播放相机里，这样在初始浏览的时候就和编辑器当前看到的是一致的。

5. 播放相机自动移动

另外播放相机还支持「自动移动」，设置后相机就会按顺序移动到不同位置，实现浏览模型的效果。

首先点击播放相机右侧的「自动移动」tab：

​然后在中间的编辑器中移动到想查看的位置，点击「添加当前编辑器相机位置」，添加之后播放相机就会按照这个序列的顺序来浏览，您还能手动修改这个序列的顺序，以及删除不想要的序列，如下图所示

​6. 完成

编辑完后，点击右上角的保存，然后就可以在大屏中添加了。

如何嵌入到大屏中？

制作好三维场景后，就能将它添加到大屏中了，首先进入大屏编辑器，然后在上方的「媒体」里找到「三维场景」：

​然后在右侧属性面板中选择空间内的场景：

如果想移动场景，可以点击左上角的移动小图标：

​三维场景默认会创建天空盒子，如果想无缝嵌入大屏中，可以关掉，在场景编辑中点击顶部的「场景设置」，然后在右侧属性面板中关闭「是否创建天空盒子背景」，并将色彩的透明度调整为0，如图所示：

​这样在大屏下就不会显示背景了，如图所示：

​除此之外，Sugar BI还内置了很多现有的精美三维模型，可以根据自己的需求自行挑选！

Sugar BI现在有免费试用的活动，可以免费体验三维场景模型的搭建！

数据可视化Sugar BI-百度智能云https://cloud.baidu.com/product/sugar.html?track=csdn