近年来,随着我国互联网行业的高速发展,网络上积累了海量的数据,如何将这些海量数据的价值发挥至最大化,成为了很多用户、企业的难题。数据可视化、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