山海鲸可视化

【实战】如何设置楼层分层动画?

在山海鲸可视化中,分层动画是其中一个很基础的功能点。本教程主要教大家如何在山海鲸可视化中设置楼层分层动画,关于建模与模型美化部分,有兴趣的小伙伴可以到网上或是对应教程进行了解和学习。

1. 楼层分层动画是什么?有什么作用?

楼层分层动画是一种利用数字孪生技术动画技术结合的方法,用于展示建筑物的不同楼层的结构和功能。通过数字孪生技术,可以将建筑物的实际数据和模型转化为数字化的虚拟模型,包括建筑物的结构、设备、管道等信息。然后利用动画技术,将这些虚拟模型以动画的形式展示出来。

分层动画有以下几个重要的应用和优势:

1.1 建筑设计和规划

数字孪生楼层分层动画可以帮助建筑师和设计团队更好地理解建筑物的结构和功能,从而在设计和规划阶段进行优化和改进。通过动画展示,可以直观地展示不同楼层的布局、空间利用和交通流线,帮助设计师做出更合理的决策。
1.png

1.2 运营和维护管理

数字孪生楼层分层动画可以用于建筑物的运营和维护管理。通过动画展示建筑物的设备和管道系统,可以帮助运营团队更好地了解设备的位置、功能和运行状态,从而提高设备的维护效率和准确性。此外,动画还可以模拟设备的运行过程和故障情况,帮助团队进行故障诊断和维修。
2.jpg

1.3 宣传推广

楼层分层动画可以用于宣传推广。通过动画展示建筑物的结构和功能,可以帮助学生和公众更好地理解建筑物的原理和特点。此外,动画还可以用于宣传推广建筑项目,吸引潜在的投资者和客户。
3.png

总之,数字孪生楼层分层动画可以提供直观、全面和交互式的展示方式,帮助各个阶段的相关人员更好地理解和应用建筑物的信息,提高建筑物的设计、施工和运营管理的效率。

2. 分层动画的制作成本和制作难度

有部分公司因为缺乏研发能力,所以采用取巧的方法使用游戏引擎进行渲染,但游戏引擎自身的局限性会对 3D 画面与 2D 画面及数据的联动产生不利影响。它并不是专门用于数字孪生以及楼层分层动画的制作工具,在数字孪生场景中对数据处理与对接比较困难,而且需要一定的编程能力,例如使用蓝图或 C++进行逻辑和交互的编写,制作成本偏高。
4.png

3. 山海鲸可视化制作分层动画的优势

山海鲸可视化是国内专业的一站式数据可视化开放平台,内置自研三维引擎、拥有着惊艳的实时渲染技术,分层动画只是其中一个很基础的功能点,而且提供了标准的数据接口支持二次开发,可以在极短时间内完成一个视效优质功能齐全的数字孪生项目。
5.gif6.gif

以上就是通过山海鲸可视化实现的楼层分层动画效果,是不是的非常的丝滑?其实制作过程非常简单,在有模型的基础上整个过程不到 10 分钟。接下来就借助山海鲸可视化为大家带来一篇从 0~1 超详细的数字孪生楼层分层动画教程,希望对大家有所帮助!

4. 制作方案简述

本篇教程将会用到两款软件,第一个是blender——一款免费开源的建模软件,相对于其他建模软件 blender 更加轻便快捷,特别容易上手。

7.jpg

第二个就是山海鲸可视化,这是一款零代码数据可视化平台,不仅拥有丰富的图表组件而且了海量模版,为了更好的与 3D 兼容山海鲸团队也提供了很多 blender 插件的支持,至此已经拥有一套非常成熟的工作流。
8.jpg

在山海鲸可视化中设置楼层分层动画总体分为三个步骤:首先通过Blender进行建模,然后将制作好的模型导入山海鲸可视化进行场景美化,最后利用山海鲸可视化鲸孪生功能实现分层动画,具体流程如下:
9.jpg

4.1 3D 建模

4.1.1 blender 的下载以及安装

blender 官网链接https://www.blender.org/download/,为了更好的兼容,请安装 blender3.6 版本,在首页最底部找到 Previous Versions。
10.png

点击 Download Any Blender(下载以前的版本),根据步骤找到 3.6.1zip 安装包下载即可。
11.png

下载完之后直接安装,安装方式非常简单这里就不过多介绍了。
12.jpg

安装之后可以通过偏好设置将英文切换为简体中文,如下图:
13.png

4.1.2 山海鲸 blender 导出插件安装

接着我们打开山海鲸可视化官网https://www.shanhaibi.com/下载导出插件。
14.png

插件下载完成后无需解压,打开 blender 根据以下操作安装即可。
15.png

16.png

17.png

下面给各位准备了一部分 blender 快捷键,对于 UI 设计师来说 blender 其实不需要太精通,了解一些基本操作就完全够用了,其他的交给建模师即可。
18.jpg
19.jpg
20.jpg

4.1.3 模型优化

以园区模型为例,这是我们提前用 blender 搭建好的模型,这里也可以通过其他软件建模然后导入 blender,不过材质信息可能会丢失。
21.png

在导入导出的时候可能会导致模型显示异常,请检查以下几点:
① 检查 uv 的展向;(uv 不对可能会导致贴图拉伸或者失效)
22.jpg

② 检查面朝向;(通过以下操作可以检查面的朝向,蓝色为正面,红色为反面,统一设置为正面,背面的材质在实时渲染场景中会显得暗淡)
23.jpg

③ 修改器必须应用;(物体下蓝色扳手的图标代表物体下绑定了一个修改器,需要应用否则不生效)
24.jpg

④ 只支持贴图节点;(只接收图片信息)
25.jpg

⑤ 动画关键帧首尾对齐;(如果模型中存在多段动画,那么所有的动画的首尾帧都要重合,否则可能会出现动画错乱的情况。比如场景中物体 A 是从第 0 帧开始第 40 帧结束,物体 B 是从 40 开始 80 结束,那物体 A 和 B 的首尾帧都没有重合,现在两个物体动画总长 80 帧,那吗两个物体都应该以 80 帧为标准,在物体 A 的后面补 40 帧空白,在物体 B 前面补 40 帧空白,这样两段动画就完全重合了)
26.jpg

⑥ 建筑核心区的位置在世界的中心(左图红绿轴交界处就是世界中心点),地面的 z 轴高度必须在 0 点。
27.jpg

【分层动画规范】需要制作分层动画的楼栋需要提前切割开,保证每一层的楼体是一个单独的物体。
28.png

除此之外,还需要按规范整理分组,清晰干净的分组有便于更好地组织和管理相关图层。以 Blender 为例,这里的层级从高到低分别是:楼栋>楼层>楼层物体,(比如:四幢>四幢 F1>四幢 F1 地板),其他与分层动画无关的以物体名称命名即可。
29.png

30.jpg

4.1.4 模型导出

导出格式为 glb,同时勾选集合结构(安装了山海鲸插件才会出现该选项)。
31.png

找不到 glb 格式的小伙伴需要在插件那边手动勾选。
32.png

4.2 场景美术

4.2.1 下载安装山海鲸可视化

山海鲸可视化官网中选择适配的版本安装包下载,在本地电脑中安装好软件并启动。
Snipaste_2023-12-08_13-39-25.png

4.2.2 创建空白 3D 场景

在山海鲸软件首页点击“新建”,在弹出的窗口中选择“3D 数字孪生”,创建一个空白地面 3D 场景
Snipaste_2023-12-08_13-43-02.png

在创建的空白地面 3D 场景中,双击场景或者鲸孪生图层右击即可进入编辑模式
Snipaste_2023-12-08_13-47-12.png

编辑状态下,除鲸孪生之外的其他组件会被自动隐藏,左侧组件图层会切换成鲸孪生相关功能。
Snipaste_2023-12-08_13-49-59.png

4.2.3 添加模型至 3D 场景内

在工具栏中选择“模型”,点击“本地”中的“+”号可以添加一个已经通过 Blender 等建模软件完成建模的模型到 3D 场景中。
Snipaste_2023-12-08_13-51-45.png

最开始导入的模型在视觉效果上可能并不是很理想,此时可根据需要调整场景中的环境、模型材质等。(环境设置可参考鲸孪生场景设置鲸孪生天空设置等教程,模型材质设置可参考鲸孪生场景模型设置鲸孪生 PBR 材质设置等教程)
37.png

4.2.4 环境设置

没有环境光,阴影部分会显得特别暗,我们可以在天空-全局全局光照,将环境贴图的材质改成天空。
38.jpg

接着在模型>形状,给场景添加一个大小合适的平面来充当地面,遮挡住地面的黑色,在物体图层面板中下拉可以看到物体的材质(包括基础色、法线、光照、透明等)根据需求自由设置,这里地面不需要太复杂,给他简单填充一个土黄色。
39.jpg

现在场景的光影感不是很好,场景光量是固定的,只有在特定角度下才能感受到阳光,为了更贴近真实,在场景下有一个自动曝光,这是他会根据真实的太阳光强去计算,真实大太阳光强大约在 1 万左右,我们需要先将天空的太阳光强度调大,这里我们设置到 1 万,这时候场景会特别亮,然后在场景>曝光将曝光模式改为自动曝光,这样场景会根据光线的强弱自动调节曝光量,防止曝光过度或者不足,这样就得到一个光影不错的场景。
40.jpg

4.2.5 材质调整

除了玻璃和水面材质需要特殊处理外,其他 PBR 材质都直接应用,玻璃我们在建模软件里不需要做得很细,只要保证 uv 和面朝向正常即可,甚至连材质都可以不用贴,具体的细节我们可以再山海鲸软件内进行调节。

鲸孪生内提供了非常丰富材质,只需要选中物体材质即可直接替换。
41.jpg

我们把它替换成玻璃材质,需要根据模型的尺寸调节贴图的重复度来匹配模型。
42.jpg

在场景下打开屏幕空间反射,(容易理解可以叫镜面反射)在高反光材质下产生倒影,让玻璃材质更加真实,但是这个效果是比较耗性能的,慎用(如果显卡在 3060 以上可以忽略)。
43.jpg

同样的方法替换到水材质:
44.jpg

经过一系列调整,就使导入的模型达到了比较完整的效果。
45.jpg

4.3 制作楼层分层动画

选中需要制作分层动画的楼层(此处以一幢为例),然后在工具栏选择“动效”,点击“分层动画”。添加完成之后,在左侧组件图层对应楼层分组下会多出一个“分层动画”的图层。
46.jpg

如果在Blender等建模软件中已经根据要求进行正确命名了,添加一个分层动画之后,在鲸孪生中就会根据名称和图层顺序自动绑定到对应的楼层。如果绑定的元素不正确,也可以在右侧“样式”菜单中的“基本设置”中手动进行更改。
47.jpg

保存项目、退出编辑模式后就可以看到流畅的分层动画了。鼠标左键点击楼层进入分层动画,右键场景任何区域可退出分层动画。
48.gif

回到分层动画的基础设置中,在“初始展开动画”功能下可以设置展开速度、收缩速度、距离等参数。
49.jpg

可以看到,选中动画的动画类型有两种:垂直抬起和抽屉拉出。
50.jpg

两种动画对应两种不同的场景:
如果建筑较紧凑,推荐使用垂直抬起,这样不容易出现遮挡问题,且分层的定位也更加准确;如果建筑较简单独立,推荐使用抽屉拉出,抽屉拉出给人的视觉冲击力会更强一些,数据按时也会更直观。
52.gif51.gif