有奖捉虫:办公协同&微信生态&物联网文档专题 HOT
本文以某地智慧校园三维场景建设为例,介绍如何基于三维场景编辑器快速搭建三维校园场景,构建可用易用的三维大屏。
说明
案例中的三维校园模型(除树木、汽车)均保留建模时相互间的相对坐标,因此在使用加载时均可采用默认坐标(0,0,0),即可保留相互间的位置关系。
视频教程参看以下链接:三维校园搭建视频教程

初始化:搭建完整三维场景

1. 三维标签下,选择三维场景编辑器组件,新建组件。n
img

img


2. 单击进入右侧子组件管理面板中的三维模型图层中,选择目标校园场景的三维模型文件,这里为方便空间视口定位,先选择校园地表模型。n
img


3. 在右侧三维场景参数设置中的相机设置内,调整视点位置和视线目标参数,直到三维场景到目标位置。n
img

img


4. 为方便找到目标三维模型,对三维模型图层进行更名。n
img

img


5. 右侧子组件管理面板中,单击添加三维模型层,进入该图层中选择校园场景中其他的三维模型文件,三维模型资源库如下所示。n
img


6. 重复上述操作,初步搭建完整的三维场景。n
img



进阶配置:优化场景渲染效果

1. 在完成三维校园场景初始化后,还需要针对部分特殊模型,配置特殊效果。以上图中的“汽车1”三维模型图层为例,配置运动效果。
1.1 单击进入该图层,进入数据标签,通过写入 path 中的一系列 x/y/z 坐标,配置汽车运动轨迹;通过写入 light 中的一系列参数值,配置跟随汽车运动的车灯效果,其中 target 参数代表最后一段路径的灯光目标,其他参数参考辅助光照文档中的聚光灯参数释义进行配置。
1.2 配置完数据标签,再返回属性标签,开启模型运动设置,既能看配置的汽车运动效果。n
img


img


img


2. 以上图中的“树木”三维模型图层为例,配置批量渲染效果。n批量渲染(又名实例化渲染)能够用较少的渲染开销渲染多个不同位置和角度的相同模型,通常用于渲染树木、路灯等模型渲染。单击进入该图层,进入数据标签,通过写入 instance 中的一系列 position 和 rotation 标签,配置树木重复渲染到的各位置和朝向。配置完数据标签,再返回属性标签,在模型基础设置中,开启批量渲染,即可看到配置好的批量渲染效果。 n
img


img


3. 三维场景编辑器组件提供包括光照、环境贴图、模型材质特效、后处理特效等效果编辑功能。n首先,为适配三维校园模型的整体风格,在右侧三维场景参数设置下,选择环境贴图库,替换一张黑夜风格的环境贴图。然后,在右侧子组件管理中添加辅助光照图层,单击进入主光照图层和辅助光照图层,配置相关光源,可实时查看配置效果直到满足需求。n
img


4. 后处理特效中,抗锯齿效果、遮蔽阴影效果和颜色校正效果是应用于全场景的特效,而高亮泛光和边界高亮效果是可以指定模型实现的,需要同时开启后处理图层中辉光效果/边界高亮效果和目标三维模型图层下阴影渲染,及后处理设置中的开启辉光/边界高亮才会生效。n下图是开启“运动场”三维模型的辉光效果。n
img

n若需要呈现不同颜色的高亮效果,可以配合对应三维模型图层中模型渲染设置下的自发光颜色实现。n
img


5. 若需要其他组件(如按钮)交互实现指定模型辉光或边界高亮操作,可使用逻辑编辑器实现,具体使用方法可参考使用案例和概述中相关文档。

最终呈现:优化场景渲染效率

1. 三维场景编辑器组件提供了基本的场景动态调度和可视区渲染的功能,能够自动卸载处于可视区域范围外和一定视距外的三维模型,保障渲染效率。n选择需要加入动态调度的三维模型图层,开启模型动态调度设置,配置好可视距离和可视区渲染,该设置仅在预览模式和发布后浏览大屏时才会生效,编辑模式不生效。



2. 单击进入预览模式,查看三维校园场景。n