统一开发 API

Appearance

安装引用 ​

目录 ​

在线引入方式 ​

引入版本：3.0 起支持

在 HTML 页面中使用 script 标签引入在线的 sdk 资源文件地址就完成了引用。例如在 index.html 文件的 head 标签中添加如下形式代码：

使用最新版本

JavaScript
<script src="https://www.tuguan.net/public/tgapp/TGApp.min.js"></script>

引入指定版本

JavaScript
<script src="https://www.tuguan.net/public/tgapp3.7.0/TGApp.min.js"></script>

初始化场景

JavaScript
  var appInstance = new TGApp.App();

  // 场景Id，您的场景ID可以从发布地址中获取最后的编码，3.3.2版本之后的端渲染编辑器发布的地址是一个8位的字符串，例如：n2xg53jj。
  var sceneId = 'n2xg53jj';
  // 如果是3.3.2之前的版本是一个32位的字符串，例如
  // var sceneId = 'ed402a51-a00a-48f2-8b60-f51963440e82';

  // 开始加载端渲染场景
  function beginLoad() {
    // 第一步，请求场景token

    // token地址
    const tokenUrl = `https://www.tuguan.net/api/user/v1/visitorScene/${sceneId}`;
    let xhr = new XMLHttpRequest();
    xhr.open('post', tokenUrl, true);
    xhr.setRequestHeader('Content-Type', 'application/json charset=utf-8');
    xhr.onreadystatechange = () => {
      if (xhr.readyState == 4 && xhr.status == 200) {
        let result = JSON.parse(xhr.responseText);
        initScene(result.accessToken);
      }
    };
    xhr.send();
  }

  // 初始化场景服务地址
  function initScene(token) {
    // 如果端渲染服务器版本 >= 3.3.2，请使用这个端渲染场景服务地址模版
    var sceneUrl = `https://www.tuguan.net/publish/scene/api/${sceneId}`;
    // 端渲染服务器版本 < 3.3.2，使用这个场景服务地址模版
    // var sceneUrl = `http://www.tuguan.net/api/sceneEditor/v1/scenes/${sceneId}/loadAVWS`;
    appInstance.initService(
      {
        container: document.getElementById('container'),
        mode: 'scene',
        url: sceneUrl,
        token: token,
        resourceBasePath: 'https://www.tuguan.net/public/tgapp/scene',  // 在线引用的资源地址，如果是流渲染可以不写
        editMode: false
      },
      (e) => {
        console.log(e);
      }
    );
  }

点击这里查看 端渲染场景在线引用 运行效果， 此端渲染示例场景需要下载 12M 左右的场景数据到浏览器进行加载并且渲染。

点击这里查看 流渲染场景在线引用 运行效果，此流渲染示例场景需要您有 10Mbps 稳定的互联网出口带宽，并且网络防火墙中没有禁止浏览器的 UDP 协议的出站规则。

注意事项 ​

目前仅 3.3 及以后的版本支持在线引入。

返回本章目录

离线引入方式 ​

引入版本：3.0 起支持

下载资源 ​

下载离线 TGApp.zip 资源文件，解压后可以获取到如下内容：

  • scene
    • lib
    • texture
    • resource
  • TGApp.min.js
  • TGApp.module.min.js

其中 TGApp.min.js 为 HTML 引入方式文件；TGApp.module.min.js 为 import 引入方式文件；scene 文件夹中的子文件夹 lib、texture、resource 文件为 端渲染使用资源文件，本地开发时需放入到项目工程目录下。

使用资源 ​

将上述获取的 TGApp.min.js、TGApp.module.min.js 文件放入到项目的适当目录中，可以根据实际情况自行处理。

端渲染离线引用示例代码 ​

端渲染离线开发时，资源文件 lib,texture,resource 需要放在同一个目录下（这里推荐就放在解压出来的 scene 文件夹中，将 scene 文件夹放在项目工程目录内）。 资源文件的所在目录需要在程序初始化时使用 resourceBasePath 属性指定 （注意：使用在线引入方式时无需指定此属性） ，参考如下代码：

使用技巧：resourceBasePath 属性默认是 './scene'，如果 lib,texture,resource 资源文件夹在 scene 目录中，并且 scene 文件夹和 html 文件在同一个目录，则无需指定 resourceBasePath 属性。

JavaScript
  var appInstance = new TGApp.App();

  // 场景Id，您的场景ID可以从发布地址中获取最后的编码，3.3.2版本之后的端渲染编辑器发布的地址是一个8位的字符串，例如：n2xg53jj。
  var sceneId = 'n2xg53jj';
  // 如果是3.3.2之前的版本是一个32位的字符串，例如
  // var sceneId = 'ed402a51-a00a-48f2-8b60-f51963440e82';

  // 开始加载端渲染场景
  function beginLoad() {
    // 第一步，请求场景token

    // token地址
    const tokenUrl = `https://www.tuguan.net/api/user/v1/visitorScene/${sceneId}`;
    let xhr = new XMLHttpRequest();
    xhr.open('post', tokenUrl, true);
    xhr.setRequestHeader('Content-Type', 'application/json charset=utf-8');
    xhr.onreadystatechange = () => {
      if (xhr.readyState == 4 && xhr.status == 200) {
        let result = JSON.parse(xhr.responseText);
        initScene(result.accessToken);
      }
    };
    xhr.send();
  }

  // 初始化场景服务地址
  function initScene(token) {
    // 如果端渲染服务器版本 >= 3.3.2，请使用这个端渲染场景服务地址模版
    var sceneUrl = `https://www.tuguan.net/publish/scene/api/${sceneId}`;
    // 端渲染服务器版本 < 3.3.2，使用这个场景服务地址模版
    // var sceneUrl = `http://www.tuguan.net/api/sceneEditor/v1/scenes/${id}/loadAVWS`;
    appInstance.initService(
      {
        container: document.getElementById('container'),
        mode: 'scene',
        url: sceneUrl,
        token: token,
        //resourceBasePath: './scene',       // 离线资源文件所在目录，即 scene 文件夹的目录位置（包含 lib、texture,resource 资源文件夹的目录）
        editMode: false
      },
      (e) => {
        console.log(e);
      }
    );
  }

流渲染离线引用示例代码 ​

流渲染开发，则不需要拷贝资源文件，只需要引用 js 文件即可。

JavaScript
// 创建TGAPI对象
var appInstance = new TGApp.App();

// 开始加载端渲染场景
function beginLoad() {
    // 初始化服务
    window.appInstance.initService({
      container: document.getElementById('container'),
      name: '智慧社区',                  // 服务名称，用于切换服务时使用
      mode: 'streaming',                // streaming代表流渲染
      url: 'http://您的流渲染服务器IP地址: 端口',  // 服务地址
      token: 'abcd1234',                // token
      editMode: false                   // 是否开启编辑模式，默认不开启，编辑模式的鼠标交互和非编辑模式的不同
    })
}

返回本章目录

集成方式 ​

集成方式有两种，一种是 HTML 引入，另一种是 ES 方式引入，以下分别介绍两种引入方式并贴出代码，推荐使用 HTML 引入方式。

使用 HTML 引入 ​

在 HTML 页面中引入下载的资源目录中的 TGApp.min.js 文件，例如 index.html 文件：

JavaScript
<script src="./lib/TGApp.min.js"></script>

使用 ES 方式引入 ​

要使用组件的页面中，在最开始的 js 代码区域填写如下代码：

JavaScript
import * as TGApp from './lib/TGApp.module.min.js';

返回本章目录