开课啦！图观™应用编辑器 零基础入门课（第一讲）

　　开课啦！图观™应用编辑器 零基础入门课（第一讲）

　　数字孪生应用的基础概念和软硬环境准备课程1

　　哈喽，小伙伴们大家好，欢迎大家来到图观应用编辑器零基础入门课程，图观应用编辑器是一款零代码数字孪生应用开发工具，提供了数字孪生应用创建、自定义页面配置、场景服务调用以及复*敏*感*词*互配置等功能，并具备孪生应用发布的一站式全流程能力。

　　学习了图观应用编辑器，喜欢数字孪生的小伙伴们不需要超高开发成本就可以轻松、快速、便捷的构建专业级的数字孪生应用啦~全套课程安排

　　课程1：数字孪生应用的基础概念和软硬环境准备

　　课程2：快速搭建并发布第一个数字孪生应用

　　课程3：创建数据源并添加数据图层

　　课程4：搭建自定义页面，含配置图表、上传图片素材、配置数据接口

　　课程5：利用组件编辑功能创建一个弹出面板

　　课程6：创建基本页面交互，含页面切换、状态切换、联动控制

　　课程7：创建复杂页面交互，含视频接入、模型*敏*感*词*控制、层级下钻

　　课程8：预览发布前的项目设置

　　课程9：离线部署与发布

　　通过9节课程的介绍，我们的最终目标就是希望小伙伴们通过这一系列入门小课程的学习，能够熟悉掌握图观应用编辑器的方方面面，通过自己的小手用图观应用编辑器做出属于自己的数字孪生应用~

　　本节课程介绍

　　本节课程讲解内容分为以下四个部分：

　　第一部分：数字孪生应用的重要基本概念

　　第二部分：图观应用编辑器的功能简介

　　第三部分：“智慧社区运营中心”案例展示

　　第四部分：软件和硬件的环境准备

　　（点击视频，观看本节完整版教程）

　　

　　本节内容详解一、数字孪生应用的重要基本概念

　　首先，和大家说明一下在数字孪生应用中经常遇到的几个重要的基本概念——“APP”、“页面”、“场景”和“状态”。

　　APP：是指我们构建出的数字孪生应用程序，也可以理解为是一个项目。页面：是指容纳一切用户关注业务内容的载体，在某些可视化系统中也称为主题。场景：是指借助三维渲染工具对基础三维模型进行属性编辑和效果配置后的三维画面。状态：是指三维场景通过场景编辑器预设或者手动调整后，针对场景模型属性、视野范围、摄像机参数、光照参数等一系列参数产生的“快照”。通常场景包含多个预设的状态，如‍“社区全景”状态，是指摄像机在高空45度俯视社区全部建筑物，并启动摄像机自动旋转的三维场景状态。‍“户型剖分”状态，是指摄像机针对一层楼进行近距离观察，并将建筑模型透明化，仅呈现户型结构的一种状态。（状态演示）

　　如图所示，一个数字孪生应用是由多个页面构成的，每个页面可以加载一个三维场景，每个场景呢又涵盖了多个状态，因此，原则上每个页面都可以关联多个状态。然而实际上，我们会根据需求设计和交互设计将页面与状态进行关联就可以啦~

　　

　　二、图观应用编辑器的功能简介

　　在了解了以上的基本概念后呢，我们要来介绍一下图观应用编辑器了，当前我们看到的这个界面就是应用编辑器的主界面了。

　　

　　我们可以看见界面上方tab栏显示“工作台”和“资产库”，默认是选中了“工作台”，左侧是项目的文件夹管理列表，中间显示已创建的项目，点击“新建可视化项目”可进行项目的创建。‍

　　

　　点击“资产库”按钮，界面就可以进行切换显示，左侧是资产库列表，分为系统资产和租户资产两大类，中间显示选‍择的资产内容。系统资产就是我们编辑器自带的资产内容，租户资产是用户根据自己意愿将已做好的项目中的页面、组件、图片、场景等点击“导入资产”按钮后的资产内容，在此处进行显示内容。

　　然后我们再切回到“工作台”，鼠标悬停一个项目唤醒隐藏的功能菜单，点击“进入项目”后，可以看到，界面右上角可以对项目进行设置、刷新、预览、发布的操作。需要注意的是，未发布的项目是不可以进行预览的哦~然后我们可以看到界面的上方tab栏显示“页面编辑”“组件编辑”“参数编辑”“接口编辑” “数据编辑””图片素材”几个页签。

　　默认的是选中了“页面编辑”，左侧是页面的文件夹管理列表，中间显示已创建的页面，点击“新建页面”可进行页面的创建，鼠标悬停一个页面唤醒隐藏的功能菜单，显示“编辑”按钮，点击即可进入编辑页面，对页面属性、场景参数、图表图层、复*敏*感*词*互等进行自定义设置。

　　点击“组件编辑”，左侧是组件管理列表，中间显示已添加的组件，点击“新建组件”可进行组件的创建；组件编辑用来上传孪生应用中涉及的自定义组件，然后在页面编辑中设置交互行为时添加进去。

　　点击“参数编辑”，如果当孪生应用涉及的图表之间的数据联动交互，可通过“参数编辑”功能来设置图表的参数进而实现多个图表的数据关联。

　　点击“接口编辑”，当孪生应用涉及的图层/图表数据源来自于接口，可在“接口编辑”设置中对相应的图层/图表通过数据设置获取接口数据，实现数据绑定。

　　点击“数据编辑”，左侧是数据管理列表，中间显示已添加的数据。点击“添加数据”可进行数据的添加；当孪生应用涉及的图层/图表数据源来自于本地数据或者数据库数据时，可通过数据编辑进行上传。

　　点击“图片素材”，左侧是图片素材管理列表，中间显示已添加的图片素材，点击“添加图片”可进行图片素材的添加；图片素材用来上传孪生场景中涉及的图片内容，支持添加本地图片和在线图片2种方式，添加完成的图片素材，在页面编辑下方的“本项目-图片”中显示，可在拖拽到画布中进行设置。

　　好啦，以上就是对应用编辑器的基本介绍，具体怎么去使用应用编辑器，去配置我们想要的数字孪生应用呢，我们会在后续课程为大家进行更详细的讲解及演示。

　　三、"智慧社区运营中心"成果案例展示

　　接下来我们要给大家分享演示的，基于图观应用编辑器做出的数字孪生应用：“智慧社区运营中心”。整个应用的搭建用时4小时，涵盖3个孪生页面及多个场景状态，展示了用户重点关注的业务内容，点击按钮可进行页面和场景状态的切换。可以看到每个页面都涉及了应用编辑器内置的丰富的数据图表、图层，以及复杂的交互功能，如数据联动分析、联动对话框、查看监控设施详情、查看安防人员详情等。

　　四、软件和硬件的环境准备

　　最后也是最重要的就是要跟大家介绍一下使用图观应用编辑器的软硬件环境准备。

　　首先是硬件环境，因为图观应用编辑 器是一款基于三维数字孪生场景的应用编辑器，所以针对硬件环境尤其是显卡能力还是需要一定要求的。

　　在2K分辨率场景下推荐使用英伟达GTX1660或以上级别独立显卡，在4K分辨率场景下推荐使用英伟达RTX2070或以上级别独立显卡。

　　

　　如果各位小伙伴的硬件显卡达不到这个级别，也不用太担心，我们也可以通过场景设置，在应用编辑器的编辑状态不加载三维模型，或者保持模型大小不超过50兆一般也是可以使用的。

　　各位小伙伴还需要特别注意一个容易忽略的点，就是如果您的主机或笔记本是双显卡，或者一个主板整合显卡一个独立显卡的情况，默认浏览器可能调用的是主板整合显卡，而不是性能更强劲的独立显卡。这时候就需要大家正确的配置操作系统、显卡驱动和浏览器设置，让独立显卡在浏览器中起作用。详见：

　　

　　针对软件环境，我们推荐使用Windows10操作系统，浏览器使用谷歌Chrome浏览器，并升级到最新版。

　　如果您在加载三维场景的时候卡在0%或者99%，大多数情况是因为浏览器不支持或者浏览器版本太低导致对WebGL的支持不全面。所以如果遇到这种情况，请先检查浏览器和版本。

　　

　　本节总结本节课程到这里就结束了，我相信，通过本节课程的学习，大家已经对数字孪生应用的重要基本概念有了一定的认知，也对我们的图观应用编辑器有了大体的了解，同时在观看了“智慧社区运营中心”数字孪生应用案例后，小伙伴是不是已经迫不及待的想构建自己的数字孪生应用了吧？

　　

　　下节预告应用编辑器的下节课程，我们要来讲下构建数字孪生应用的第一步：如何快速搭建并发布属于自己的第一个数字孪生应用，包括了如何创建项目？如何创建页面？以及如何调用孪生场景？对于已创建的应用我们还可以进行哪些相关的操作呢？欢迎小伙伴们收看哦~

　　图观在线试用地址图观™引擎现可申请免费试用！现在试用还可获得1对1技术支持和专属大礼包~还等什么，快快联系我们体验图观™引擎的强大功能吧~

　　1.访问图观™官方网站，在浏览器中输入网址：

　　

　　在图观™官方网站中，您可获取图观™最新产品技术动态以及全面的开发指引，帮助您快速了解图观™数字孪生可视化引擎。

　　2.添加数字冰雹客服微信，审核通过后可获取体验邀请码。

　　扫码添加好友内测申请/*敏*感*词*咨询