前言说明

本文主要介绍ThingJS离线开发包的使用方法。

硬件配置

客户端最低配置:

  1. cpu: 2G主频4核
  2. 内存: 8G
  3. 硬盘: 100G,推荐ssd
  4. 显卡: 独显2G显存以上,gtx750以上

软件依赖

需要安装最新版本 CampusBuilder 客户端:

最新版本可在https://store.thingjs.com/tools 下载。

推荐安装 Visual Studio Code编辑器:

最新版本可在 https://code.visualstudio.com/ 下载。

推荐安装 Google Chrome 浏览器来调试场景:

最新版本可在 https://www.google.cn/intl/zh-CN/chrome/ 下载。

软件安装

本章节中,将详细说明ThingJS离线开发包的安装方法。

安装流程

首先关闭 CampusBuilder 客户端,右键桌面图标打开文件所在位置,如图所示。

修改文件夹 WebContentLocal 名字变为 WebContentLocal_bak ,修改文件夹 Debugger 名字变为 Debugger_bak 。此做法为了备份这两个文件夹。如图所示。

复制开发包中的 Debugger,GLTFBundleLib,Offline,WebContentLocal 这四个文件夹到当前目录,复制之前确保当前列表没有同名文件夹。如图所示。

双击桌面快捷方式启动客户端,至此离线开发包安装步骤完成。

项目开发

下载编辑器和浏览器

离线开发包使用的编辑器是 Visual Studio Code,浏览器是 chrome。使用前,需先安装:

Visual Studio Code 编辑器(https://code.visualstudio.com/);

Chrome 浏览器(https://www.google.cn/intl/zh-CN/chrome/)。

配置编辑器和浏览器

启动客户端之后应先配置 Visual Studio Code 路径以及默认浏览器 Chrome 路径,保证程序可正常调用。在客户端菜单中“系统设置”中的调试中配置正确安装路径。如图所示。

离线项目开发

配置正确之后,在插入秘钥 U 盘的情况下,便可以使用离线开发。开发方式为:点击场景菜单中的 ThingJS 第三方调试。如图所示。

请确保程序运行时,秘钥 U 盘一直在插电脑中,如果拔出会出现如下错误:

秘钥 U 盘认证通过之后,会出现如下新建项目的页面,如图所示。

点击确定,项目新建完成。会默认弹出配置好的 Chrome 浏览器窗口,预览地址为本地服务器预览地址,同时还会打开 Visual Studio Code 编辑器,在 Visual Studio Code 编辑器中打开项目脚本。左侧为浏览器窗口,右侧为 Visual Studio Code 编辑器窗口。如图所示。

至此,便在 Visual Studio Code 编辑器中编写代码,保存。在 chrome 浏览器中刷新,即可预览当前项目的执行效果,开始项目的离线开发。

在线开发已有项目离线开发

如果要对“在线开发”里已有项目进行离线开发,需要去在线开发里找到项目并下载该项目的离线开发包。首先找到项目,然后右键项目找到“下载项目离线开发包”的入口。

在弹出页面点击“申请打包下载”。

稍等后台打包完成之后可以在列表上看到一条下载记录,点击下载按钮,方可自动下载一个项目名命名的离线开发zip包。

将zip包放在客户端的根目录下,并右键解压到项目名文件夹下,解压之后目录结构如图所示。

双击进去目录,运行文件夹同名的.bat文件完成项目迁移到本地开发项目库下。

处理完成之后,可以在本地项目库“安装目录\UserData \Projects\id\项目库\”中看到同名的项目。项目的调试地址为:

http://localhost:8082/thingjs/previewThingjs?uid=用户id&pid=项目名

项目打包

开发完成后,需要将项目打包输出为离线部署包,才能在项目的实际环境中部署。

打包步骤如下:

  1. 1.找到需要打包的项目名称和用户id。项目列表在“安装目录\UserData \Projects\id\项目库\”中。该路径中的id为登录的客户端用户id。文件夹中有本地的所有项目。打包某一个项目时应首先保证项目文件夹名称和项目主文件.js文件名成一致。例如打包A项目:项目库中有A项目的文件夹,A项目文件夹中有同名的A.js脚本文件。
  2. 现版本离线部署包分为 Linux 版本和 Windows 版本,需要在文件中标识打包什么版本的离线部署包。Linux 对应 linux ,Windows 对应 win。
  3. 3.进入安装目录下Offline文件夹,编辑修改info.json文件。在userId对应的值修改为用户ID(纯数字),在projectName对应的值修改为项目名字,在type字段填写要打包的离线部署包的版本。linux或者win。这两个值也可以在预览地址的参数中获取例如:

    填写完成效果如图所示。

  4. 填写完成之后,关闭文件。双击 Offline 中的 start.bat 完成打包,显示进度 100% 即为完成。如图所示。

  5. 打包后的文件将会在“安装目录\ UserData\Offline\id\”下会出现项目同名的 zip 包,该 zip 包即为该项目的离线部署包。

  6. 离线部署流程请参考离线部署包中说明手册。

开发须知

  1. 项目文件夹名字需要和主文件名字 .js 保持一致。

  2. 项目中的其他资源需要放在项目文件夹下的默认的 file 文件中做为引用路径,保证打包之后可正常使用,项目引用 file 资源时应填写 defaultFilePath + 路径。注意该路径前不需要“/”从 file 文件夹开始写即可。引用路径写法如图所示。

  3. 如果想用代码创建模型,可以去客户端右侧列表找到要加载的模型 id ,然后模型地址为:'/GLTFBundleLib/model/AD986489363C4C74932338DD05AD6E51/0/gltf/',其中的AD986489363C4C74932338DD05AD6E51为模型id。如图所示。

  4. 如果想用代码创建 CB 中上传的模型,需要先去搭建环境找到模型 id,然后模型地址为:“/GLTFBundleLib/api/models/objmodel/d5958c76928a41e4a2f4f2740147e0f7/UnityToGLTF.gltf”其中的 d5958c76928a41e4a2f4f2740147e0f7 为模型 id 。如图所示。

  5. 地图离线开发组件地址引用“/tjs/js/uearth.min.js”。

  6. 全景图离线开发组件地址引用“/panooss/pano/js/thing.pano.min.js”

  7. 该包中现仅含有官方授权的免费模型,个人模型和收费模型需要联系官方,将模型下载到本地,才可使用。

  8. 若想要在本地修改其他已存在项目,项目库的路径是客户端的安装目录下的“\UserData\Projects\用户id\项目库\”。这里每一个文件夹代表一个项目,项目主文件 .js 需要和项目文件夹的名字保持一致,项目的调试地址为http://localhost:8082/thingjs/previewThingjs?uid=用户id&pid=项目名。

  9. 提供一个 Visual Studio Code 的小插件,可以快速打开项目浏览地址,文件在 Visual Studio Code 文件夹中的 vscode-plugin-thingjs-0.1.6.vsix,安装方法打开 Visual Studio Code 左侧面板最后一项插件项。然后菜单项选择从 vsix 安装选择该文件即可,安装完成之后可点击文件栏右上角执行项目或者邮件菜单打开本项目的浏览地址。

该文件修订时间: 2021-07-21 18:06:09

results matching ""

    No results matching ""