在线开发

在线开发提供了在线编辑环境,方便编辑以及调试,还提供了大量快捷操作,例如代码块,模型资源等等。

界面介绍

  • 点击 “ 在线开发 ” 进入在线开发页面,在线开发环境如下图所示:

界面功能介绍

  1. 在线编辑环境:在线编辑代码并调试;
  2. 3D 容器:3D 场景可视化展示;
  3. 官方例子:官方提供的示范代码;
  4. 我的项目:用户创建并保存的项目(只有登录之后才会显示);
  5. 新建项目:新建一个项目;
  6. 保存项目:项目一旦保存成功将会被储存在 “控制台” 下 “我的项目” 中;
  7. 执行代码:点击执行代码;
  8. 演示项目:提供三种演示方式,手机扫码,电脑访问,iframe 引用;
  9. 发布项目:发布并使用开发好的项目;
  10. 资源:管理开发时所需要的资源;
  11. 代码块:为一些常用功能提供现成代码,选择所需功能自动生成代码;
  12. 工具:ThingJS 在线开发提供了一套相关工具帮助用户高效,快捷的开发项目;
  13. 设置:设置更换版本,页面颜色(黑/白),设置关闭 / 开启 3D 容器。
help
注意事项:

用户只有在注册并登录 ThingJS 网站后,才能新建和保存项目,否则“我的项目”列表将不会出现在左侧导航栏中

“工具”菜单介绍

接下来分别看一下这些工具都提供了什么样的功能:

  • 点击 “场景信息” 可查看场景中的 “父子树” 以及 “分类对象属性树” ,并可按 id、属性以及名称,搜索场景中的对象;

  • 点击 “场景效果” 可调整场景中灯光、后期特效、动态天空、雾等特效,并可直接生成代码块;

  • 点击 “拾取场景坐标” 可获取场景内鼠标点击处的坐标信息;

  • 点击 “自定义模型信息” 可查看、搜索用户从 CamBuilder 上传的自定义模型,选择模型自动会生成代码。

设置

点击 “设置” 菜单可更换左侧皮肤、切换 ThingJS 的版本、启动调试等操作。

更换皮肤与切换版本

  • 更换左侧皮肤、切换 ThingJS 的版本如下图所示:

  • 当用户关闭调试时,只展示代码编辑区域。如下图所示:

启动调试

  • 为方便用户调试,我们设置了启动调试按钮(默认为开启状态),如下图所示:

资源准备

ThingJS 中的三种资源:

  • 场景资源:CamBuilder 中搭建并导出的场景,格式为 .tjs;

  • 模型资源:单个的模型资源,可以使用模型库中公开的模型,也可以上传用户自制的模型;

  • 页面资源:图片资源、页面文件(css、js)、json、html 数据等,统称页面资源。

场景资源

场景资源上传

  • 使用 CamBuilder 搭建场景,搭建完成后导出 .tjs 场景包并上传到 ThingJS 在线开发平台进行后期开发。场景搭建完成之后,点击上方 “文件” 选择 “导出ThingJS场景包” 并点击保存按钮;

  • 点击 ThingJS 官网导航栏右侧 “控制台”,选择列表中 “我的资源”,点击 “上传场景”,在弹出层中点击 “选择文件”,选择已导出的 ThingJS 资源包,点击 “立即上传” 即可。

模型资源

ThingJS 开发提供三种方法获取模型资源

  • 使用在线开发环境中的现成模型资源;

  • 在 ThingJS 模型库(ThingDepot)中获取模型资源;

  • 通过 CamBuilder 上传用户自己的模型资源以供后期在 ThingJS 平台进行开发。

页面资源

上传页面资源文件到 ThingJS 在线开发环境可以通过 在线开发页面控制台 两个方法。

通过在线开发页面上传

  • 新建项目后点击 “资源” ,选择 “页面资源” ;

  • 点击弹出页面的 “上传按钮” ;

  • 在弹出框点击 “选择文件” 选择需要上传的文件后点击 “立即上传” 按钮;

    help
    注意事项

    上传后的页面资源是 css 或 json 等可编辑文件时,可点击进行编辑,编辑完成后保存即可使用,同一项目下的文件可同时打开

  • 上传成功后即可在后续进行使用。

控制台上传

  • 点击 ThingJS 官网导航栏右侧 “控制台” ,进入控制台页面;

  • 选择左侧列表中的 “我的资源”,再点击切换到 “页面资源”;

  • 用户创建自己的项目并保存后,在 “页面资源” 中也会同时生成一个与项目同名的文件夹供用户上传所需要的页面资源;

  • 我们选择上传后的文件夹并打开,在文件夹中点击 “上传” ,可以上传单个文件,也可上传文件夹。在该项目的文件夹内还可新建文件夹并上传文件;

  • 在弹出层中点击 “选择文件” ,选择需上传的资源,点击 “立即上传” 即可;

    help
    注意事项

    当创建的项目删除时,同名资源文件夹也会被同时删除;

    普通开发者上传文件的最大权限为 10M ,升级为商业开发者后可以进行付费扩容,目前每增加 50M 容量的价格为 999 元。扩容服务只为商业开发者提供;

  • 上传成功后可对页面资源进行删除,重命名以及移动路径等操作;

  • 上传后的页面资源是 css 或 json 文件时,可点击进行编辑,编辑完成后保存即可使用;

  • 获取页面资源:用户通过在线开发环境和控制台上传的资源文件都可以从在线开发页面中获取,点击「资源」选择「页面资源」开始使用已上传的资源文件进行开发。

新建项目

  • 在线开发页面中,点击新建项目图标;

  • 如下图所示提供三种新建选项:

    • 上传场景:上传从 CamBuilder 导出的场景资源包,进入代码编辑界面,场景代码自动生成;

    • 在线搭建:使用 CamBuilder Online,在线搭建场景;

    • 空代码:直接进入代码编辑界面。

  • 完成项目后,点击保存项目图标;

  • 在弹出的窗口中给项目命名,并选择公开项目还是私有项目;

  • 保存好的项目会出现在左侧“我的”项目列表里;带有锁头图标的为私有项目,私有项目只能在用户账号内的“我的”项目列表中查看;

  • 而保存为公开的项目除了可以在“我的”项目列表中查看外,还可以在 ThingJS 官网中的「公开项目」中查看。

    help
    注意事项

    免费个人用户只能保存 30 个私有项目,付费升级为商业开发者后可以保存 200 个私有项目。

在线编码

  • 在线编辑器支持自动拼写;

  • 编辑区域内右键可调出快捷工具菜单;

  • 快捷键操作如下表所示;

  • 按下 F1 键,调出快捷功能列表;

  • 在线编辑器支持插入常用代码块,降低学习门槛。

引用 js 和 css

对于第三方的或用户自行编写的 js 库、css 样式,可通过 THING.Utils.dynamicLoad(urls,callback,timestamp,inOrder) 方法引用到ThingJS在线开发环境中使用,例如:

// 引用 bootstrap组件和 moment 时间处理js库
// 默认js脚本和css样式会带上时间戳,且按urls数组中的顺序加载
THING.Utils.dynamicLoad([
    'https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css',
    'https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js',
    'http://momentjs.cn/downloads/moment.js'],
    function () {}
)

该方法中的参数依次为:

  • urls:资源数组,填写引用 js、css 的 url 地址;
  • callback:js 脚本、css 样式资源全部加载完成后的回调函数;
  • timestamp:(选填)加载资源时是否自动添加时间戳,默认为 true;
  • inOrder:(选填)是否按 urls 数组里的资源顺序下载,默认为 true。

对于第三方 js 库和 css 样式资源而言,直接填写相关资源的在线 url 地址即可。ThingJS 在线开发环境默认已经加载了 Jquery 库,可直接使用。

对于用户自己编写的js代码或css样式,有如下两种方式引用:

  1. 上传js、css资源至在线开发环境;

  2. 发布为在线可访问的地址,例如:

help
注意事项:
  1. 如果需要调试引入的 js 脚本代码,则必须将 timestamp 参数设置为 false。否则每次加载脚本都会重新加载,调试时将无法记录断点;
  2. 当 timestamp 设置为 false 时,可使用 Ctrl+F5 清除缓存刷新页面,保证加载的资源为最新;
  3. 当 inOrder 参数设置为 false 时,引用的资源将异步同时加载。理论上会比默认为 true,按顺序加载的情况,资源全部加载完成的时间短。但如果加载的脚本有逻辑上的先后执行顺序,则不要将此参数设置为 false。

代码调试

ThingJS提供两种页面调试方法:

  • 和普通页面调试方法一样,直接打开 F12 在 Sources 里 找到 debug.js 文件,在里面打断点即可调试;

  • ThingJS 在线开发中可以,在代码里加入 “debugger” 关键字进行调试。

    1. 在代码中加入 “debugger” 关键字;
    2. F12 打开后台;
    3. 点击按钮运行代码;
    4. 在后台中查看断点位置。

协同开发

当开发工程较大时,需要进行多人协同开发,为此我们提供了协同开发的方法,具体流程如下所示:

  1. 搭建版本控制系统,例如 SVN 、Git;
  2. 各个开发成员都需要在自己本地搭建本地服务器,从版本控制系统迁移下的项目放在自己的本地的服务器中方便后续本地调试;
  3. 多人分工完成各自功能模块,完成后提交至版本控制系统;
  4. 在后台中查看断点位置;

    开发小组内 A 同学完成功能模块的代码如下:

    function queryById() {
            var car = app.query('#2271')[0];
            car.style.color = '#ff0000';
        }

    开发小组内 B 同学完成功能模块的代码如下:

    app.on('load', function () {
        new THING.widget.Button('按id查询', queryById);
    });
  5. 这时 B 同学需要在本地服务器中拉取A同学的代码;
  6. 拉取成功后,B 同学启动本地服务器,获取本地服务器中 A 同学的脚本;

    https://192.168.10.185:8080/test/A.js 为B同学脚本的网络地址
  7. 在 ThingJS 在线开发中,通过 THING.Utils.dynamicLoad() 方法引入用户开发的各个 js 代码模块。各代码模块加载完成后再进行相关功能代码编写;

    THING.Utils.dynamicLoad(['https://192.168.10.185:8080/test/A.js', 'https://192.168.10.185:8080/test/B.js'], function () {
        var app = new THING.App({
            url: 'https://www.thingjs.com/static/models/storehouse'     // 场景地址
        });
    });
  8. 若要调试引入的 js 脚本代码,则需将 timestamp 参数设为 false。

    help
    注意事项:

    若其中包含有图片等资源,地址需写绝对路径

演示与部署

ThingJS 提供三种方式供用户演示和使用已完成的项目:

  • 电脑使用;
  • 手机访问;
  • iFrame 引用。

ThingJS 提供三种部署方式供用户选择:

  • 在线演示(免费);
  • 在线部署;
  • 离线部署。

功能导航

对于物联网 3D 应用开发,ThingJS 提供如下开发能力,具体章节可点击图中链接图标查看:

在线咨询
QQ交流群
微信公众号