如何使用 图观 端渲染 场景编辑器？

[ltg0722]

首先我们来了解一下跟 图观 端渲染场景编辑器相关的 基础概念。

首先什么是【端渲染】

端渲染是指在Web应用程序中基于客户端浏览器本身能力也就是HTML5 和 WebGL 技术，实时渲染三维场景的技术方案。适用于中小场景，优点是对服务器负担小，支持高并发，带宽要求低。场景构建过程所见即所得，大大降低技术门槛，节省在数字孪生项目中的升级改造成本。但是，渲染依赖客户端显卡配置，如果场景过大或者显卡配置过低，都可能会导致场景运行卡顿。

使用端渲染场景编辑器，对电脑的配置要求是：需要有独立显卡，在2K分辨率场景下建议配置为英伟达 GTX 1660以上级别，在4K分辨率场景下建议配置为英伟达 RTX2070或以上级别。如果您的显卡配置没有达到推荐配置，场景编辑器也是可以正常打开的。本次课程用到的模型资产也可以使用内置的卡通模型替代。只是或者导入的模型尽量控制在50兆以内一般也是可以的。

那么什么是【数字孪生场景】

数字孪生场景直观的讲，就是数字孪生应用中的三维场景部分。

场景由一个或多个模型组成，除模型外场景中还包含灯光、特效、图片等。模型则包含节点、材质、以及对应的关节、动画信息。同一个数字孪生场景可以配置多个不同的效果参数及镜头信息，从而形成多个场景状态，方便在应用开发中快速调用切换。

图观【场景编辑器】是一款基于浏览器运行的编辑器软件产品，只需要在网页浏览器中通过鼠标拖拽和调整效果参数，就可以快速完成三维场景构建，并且实现超凡的渲染效果。场景配置完成后，可一键发布为云服务，支持网页浏览和程序二次开发调用。

功能简介

图观场景编辑器的主要功能包括场景编辑、模型编辑、状态编辑、坐标编辑、以及场景预览和发布。其中场景编辑，主要是用来使用模型组合场景，同时配置场景灯光、特效等参数。

模型编辑，主要用来调整单个模型的节点位置、大小、以及材质、关节、动画等。
状态编辑，可以预置一个或多个场景效果快照，从而使数字孪生应用方便地切换显示参数，进而极大的减少场景控制代码量。
坐标编辑，可以通过与地图服务叠加，将三维场景x、y、z坐标与真实世界中的经度、纬度、高度坐标系进行匹配，实现经纬度定位。
图片管理，用来导入和管理场景中用到的图片素材。在场景构建过程中随时可以点击“预览”，查看场景配置效果。配置完成后可以发布为场景服务，供后续应用开发使用。

案例预览

最后我们来预览一下本次课程将要完成的数字孪生场景最终效果。

现在大家看到的，就是基于图观场景编辑器构建的“智慧社区”数字孪生场景，整个场景包含多个状态，例如：全景展示、顶视图、闸机和住宅，我们在闸机状态配置了闸机抬杆的关节动画，在住宅状态配置了建筑楼层剖分效果，场景使用了两个外部模型和多个图观内置模型资产搭建，想要下载模型尝试自己搭建的小伙伴，请扫屏幕上的二维码，关注“图观”微信公众号，回复“智慧社区模型”获取或添加图观客服微信获取。

使用 图观场景编辑器的关键步骤

1.打开 场景编辑器：在平台主页面上，找到端渲染场景编辑器的入口，点击即可进入。

2.创建新场景：在场景编辑器中，您可以选择创建新场景。通常，您需要为新场景提供一个名称。

3.导入模型：在场景编辑器中，您可以导入已有的三维模型，如建筑、设备、地形等。这些模型可以是您自己创建的，也可以从第三方资源库中获取。

4.编辑场景：场景编辑器提供了丰富的模型资源、可视化的编辑功能，您可以通过拖拽、缩放、旋转等操作来调整场景元素的位置和方向。同时，您还可以对场景元素进行分组、隐藏、锁定等操作，以便更方便地管理场景。

注：模型单位最好与图观场景编辑器统一设置为米。建模时尽量减少多边形数量及顶点数。删除物体内部永远不可见的面，减少零碎物体个数。模型材质使用标准材质或者物理材质。格式保存为GLB。

5.配置场景属性：为了让场景更加真实和生动，您可以设置场景的一些属性，如光照、阴影、雾效等。这些属性可以通过编辑器的属性面板进行调整。

6.添加动画和交互：场景编辑器通常支持为场景元素添加动画和交互功能。例如，模型关节数据驱动、运转动画等。

7.预览和测试：在编辑过程中，您可以随时预览和测试场景的效果。这有助于您发现潜在的问题并及时进行调整。

8.保存和发布：完成编辑后，您可以保存场景并将其发布到平台上。发布后的场景可以与数字孪生模型和数据进行集成，为您的业务提供支持。

详细的开发教程 见图观官网
https://www.tuguan.net/doc/scene-editor/?tutorial.overview