开发者必看!图观™统一开发API及API调试器入门 第三讲

发布于:2022-08-02 ⋅ 阅读:(480) ⋅ 点赞:(0)

课程3:创建应用和场景

哈喽,小伙伴们大家好,欢迎大家来到图观 统一开发API及 API调试器入门课程的第3课。

上节内容,我们向大家介绍了如何使用 图观 统一API调试器进行场景服务调用、接口调试、数据标绘等操作,相信大家已经对图观 统一API调试器的使用有了基本的认识和了解,在后续的课程中,我们也会为大家介绍演示接口调试器的一些具体操作。

本节课程,我们主要讲解“如何创建应用和场景”,共分为四个小节,来为大家详细介绍一下如何获取已发布的场景、如何获取和引用图观统一开发API的SDK、服务/场景/状态的关系以及端渲染场景操作等内容,并会在统一API调试器中进行相关的演示操作。

本节课程安排

第一部分:获取已发布的图观场景

第二部分:获取和引用 图观统一开发API的SDK

第三部分:服务、场景和状态的关系

第四部分:端渲染场景操作

图观™引擎 统一API调试器零基础入门课程3《创建应用和场景》

(点击视频,观看本节完整版教程)

本节课程详解

一、获取已发布的图观场景

在我们进行场景二次开发之前,需要先引入一个已发布的图观场景,图观统一开发API原生兼容端/流双渲染场景,下面我们就介绍一下 端渲染场景 的引入方式。

我们在图观场景编辑器配置完成并发布的端渲染场景,会生成一个全局唯一的URL(统一资源定位符),可以复制二次开发地址,这个地址是您在进行API开发时需要传入的。复制这个二次开发地址到统一API调试器中,就完成了端渲染场景在接口调试器的调用。如果希望通过图观统一API SDK二次开发,还需要下载SDK,接下来为您详细介绍。

二、获取和引用 图观统一开发API的SDK

在具备二次开发场景地址的情况下,如果想使用javascript进行二次开发,还需要图观统一开发API的SDK。

SDK是一套基于Javascript的软件开发工具包,内含数百种封装良好的开发接口,在引用方式上我们分为了在线引用和离线引用两种方式,下面我们就对这两种引用方式进行介绍。

1. 在线引用

如果您具备较好的在线开发网络条件,那么我们推荐 在线引用 图观统一开发API的SDK,这样可以引用到最新版本和功能的SDK。

  • 如果您希望使用最新版本的SDK,可以在HTML中添加以下脚本引用:

  • 如果您希望使用指定版本的SDK,可以通过如下方法引用:

2.离线引用

离线开发包一般要和离线部署的场景服务器配合使用

首先,您需要在:

https://www.tuguan.net/doc/tg-api/?start.install

地址中下载最新的离线SDK安装包。

如果您希望使用其他版本的离线SDK,

可以在:https://www.tuguan.net/doc/tg-api/?start.history 地址中进行下载。

接下来,我们对下载好的离线SDK包进行解压,解压后目录和文件如下:

  • scenelib

    - lib

    - texture

    - resource   

  • TGApp.min.js

  • TGApp.module.min.js

其中 TGApp.min.js 是 HTML 引入方式文件TGApp.module.min.js 是import引入方式文件scene 文件夹中的子文件夹 texture、resource 文件为端渲染使用的资源文件,离线开发时需放入到项目工程目录下,并且这个目录的位置需要在初始化端渲染场景时通过resourceBasePath属性传入(属性的默认值是./scene)

流渲染开发不使用 scene 文件夹中的任何文件。

最后,在 HTML 页面中引入您项目工程中对应目录的 TGApp.min.js 文件,完成离线版SDK引用,例如:

以上,就是图观统一开发API的SDK的获取引用方式,您可根据实际开发需求进行选用即可。

三、服务、场景和状态的关系

图观的场景加载体系,分为服务、场景和状态三层,他们对应的创建方式如表格所示:

端渲染 流渲染

服务

Service

对应场景编辑器发布的地址,每个发布的场景对应一个已经发布的服务地址。通过场景服务器上已发布的详情对话框查看二次开发地址。

对应流渲染服务器上的一个场景,每个已经发布的场景对应一个服务token。

场景

Scene

对应流渲染应用中的不同关卡。每个关卡可以是完全不同的行政区划、建筑或者模型,具有不同的摄像机初始视角。

状态

State

在场景编辑器里通过状态编辑功能创建的。每个状态是当前场景中对于模型显隐、关节定义、动画播放状态、灯光、特效、摄像机默认状态等一些列特性的组合。

服务Service,是端渲染和流渲染场景都有的特性,都是对应场景服务器上的一个终端服务地址。并且都是可以使用initServiceloadServiceswitchService这三个指令进行操作。

在端渲染中,loadService 指令非常有用,它可以在不影响当前前端功能使用的情况下,通过浏览器后台下载一个较大的场景,等下载完成后,再使用switchService指令切换,可以缩短场景的加载时间。

对于流渲染来说loadService也有一定的意义,可以预先在服务器上启动渲染进程,当然使用这个指令的前提是,您的流渲染服务器上有足够的可用渲染通道,并且您的流渲染场景是按照多个服务地址发布的。

四、端渲染场景操作

1. 演示场景

在学习使用图观统一开发API 和 统一API调试器的过程中,您可以使用您自己的场景,也可以使用我们为您提供的一个已发布好的端渲染场景。

场景地址:

https://www.tuguan.net/api/sceneEditor/v1/scenes/ed402a51-a00a-48f2-8b60-f51963440e82/loadAVWS

我们在统一API调试器中调用此场景,您可以通过接口调试器的案例库功能导入到自己的工作台中直接使用,也可以在导入后,通过设置查看二次开发地址。我们已经预先在场景中定义好了状态、模型关节动画、建筑剖分等功能。

2.初始化场景

端渲染场景初始化,需要两步式加载。

第一步:使用场景ID获取token

第二步:使用场景ID和token,通过initService指令创建场景对象

在统一API调试器中我们引用上方代码,对场景进行初始化操作。

上方代码中,我们可通过loadScene方法的initService指令回调函数,或者通过addEventListener订阅onServiceInit事件执行服务初始化完毕之后的相关逻辑,如操作相机,添加图层等。

3.获取状态和切换状态

当场景初始化完成后,在统一API调试器中,可以使用getStates指令,获取在场景编辑器中已经预置好的状态列表:

返回结果如下:

在以上返回结果中可以看到,当前场景具有6个可用的状态,并且"default": true 的默认状态,是切换到当前场景后默认进入的状态。

使用switchState指令,并且传入希望跳转的状态名称,可以切换场景状态切换场景后续的相关接口调用,需要通过监听onStateChanged事件成功后,再继续进行

注册状态切换完成事件,如下所示。可以根据状态切换事件,完成后续指令调用。

4.预加载服务和切换服务

当我们在构建实际业务场景的时候,经常会遇到场景层级上卷下钻的需求,例如园区全局场景 - 单独建筑内部 - 单独房间。如果场景范围面积过大、或者场景的细节太多,多个层级的场景都通过状态进行切换,整个场景的尺寸会过大,将影响初始化的加载时间和性能。 

这时,我们可以考虑将多个层级场景拆分为多个场景服务地址进行发布。例如全局场景 - 单独建筑内部 - 单独房间,每个场景都对应一个发布的场景地址。然后通过 图观 统一开发API的loadService和switchService进行预加载服务和切换服务。

下面,我们用一个已经发布好的社区场景,在统一API调试器中为大家演示一下。

具体的使用方法是:

首先,通过initService照常加载第一个发布的场景服务,例如园区全局场景。

在初始化完成后,开始调用loadService指令依次加载后续可能使用到的场景服务。loadService指令只是下载场景服务所需要的资源,并不会影响前端已经加载的场景和交互功能使用。

您可以通过监听onServiceLoad事件获得场景后台加载完成的消息,并且当用户点击切换场景时调用switchService指令切换场景服务。这时图观API会自动从已经缓存的场景服务中完成场景的加载。

切换场景的指令调用相对就简单很多了,指令当中的关键参数就是上一步中loadService预加载场景时的场景服务名称

5.销毁场景

当您不再需要使用已经初始化过的场景,可以通过使用destroy指令销毁场景,及时释放资源。

本节总结

本节课和大家介绍了我们在进行场景二次开发之前需要做的一些必备工作,讲解了如何获取已发布的场景、如何获取和引用图观统一开发API的SDK、服务/场景/状态的关系以及端渲染场景操作等内容,相信大家已经掌握了今天课程的内容,那本节课程到这里就结束啦~

下节预告

如何在场景中添加和开发丰富的功能应用呢?下节课,我们将围绕“镜头操作“的开发给大家做详细的讲解,记得一定要持续关注我们哦~

图观在线试用地址

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

访问图观™官方网站,在浏览器中输入网址:https://www.tuguan.net

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


网站公告

今日签到

点亮在社区的每一天
去签到