作为新一代物联网可视化开发平台，ThingJS提供了搭建三维可视化场景的工具CamBuilder以及三维城市地图搭建工具CityBuilder，用户搭建的场景最终都会在ThingJS的在线开发平台中使用，在这里我们就说说怎么去搭建我们的场景以及如何去开发我们的场景呢？

场景搭建

ThingJS平台为用户提供了以下两种方式搭建场景：

1. 通过CamBuilder客户端搭建3D场景
2. 通过CityBuilder城市地图搭建3D场景

CamBuilder

通过客户端下载需要以下几个步骤：

1. 通过ThingJS官网下载3D园区搭建工具，在出现的下载详情面板中点击下载按钮
2. 下载后可登陆账号，点击工具下的「用户手册」可查看使用教程
3. 将场景导出上传或同步至ThingJS平台
4. 选择园区资源下的场景进行开发

后续操作详见 在线开发 - 菜单导航 - 资源管理 - 园区

CityBuilder

1. 在“地图”资源面板中点击“新建地图”
2. 在出现的弹出面版中输入地图名称，点击“下一步”
3. 选择“一键城市”和“上传数据”中的任一选项。若选择“上传数据”，地图面板将同时新增一个地图资源；若选择“一键城市”，需选择“城市范围”和“模板”并点击“下一步”，待数据下载完成之后，点击“进入编辑”，地图面板将新增一个地图资源
4. 选择地图资源下的地图进行开发

后续操作详见 在线开发 - 菜单导航 - 资源管理 - 地图

在线开发

• 在线编辑器支持自动拼写，输入一个字符（串），若存在该字符（串），则编辑器将出现所匹配的内容，点击选择所需代码，如下图所示：

  

• 编辑区域内右键可调出快捷工具菜单，按下鼠标右键，点击选择下图所示的工具：

  

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

  快捷键	快捷键说明
  Ctrl + F	查找
  Ctrl + H	查找替换
  Ctrl + [  、 Ctrl + ]	代码行缩进
  Ctrl + C	复制当前选中内容
  Ctrl + X	剪切当前选中内容
  Ctrl + V	在光标处插入剪贴板的内容，并替换任何所选内容，只有在剪切或复制了内容之后，才能使用此快捷键
  Shift + Alt + F	代码格式化
  Alt + Up  、 Alt + Down	上下移动一行
  Alt + Shift + 鼠标左键	多行编辑（列编辑）（鼠标右键更改所有匹配项）
  Ctrl + Delete	删除光标右侧的所有字
  Ctrl + U	回退上一个光标操作
  Ctrl + K后Ctrl + 0	折叠所有区域代码
  Ctrl + K后Ctrl + J	展开所有折叠区域代码
  选中注释代码块 Ctrl+ /	代码块注释
  Home	移动到行首
  End	移动到行尾
  Ctrl + F12	转到定义
  Alt + F12	速览定义
  Shift + F12	查找所有定义
  Ctrl + End	移动到文件结尾
  Ctrl + Home	移动到文件开头
  Ctrl + Shift + Enter	在当前行上方插入一行

• 编辑器内按下 F1 键，调出快捷功能列表，用户可按需选择下图所示的功能：

  

• 在线编辑器支持插入常用代码块，降低学习门槛。将鼠标移至菜单栏中“快捷代码”或者点击工具栏“快捷代码”图标（）,将出现常用代码块，点击快捷代码按钮，则可在编辑器中插入对应功能的代码。

  

• 为方便用户开发，在线开发环境提供了资源引用的快捷入口。如引用“模板资源”步骤下：

  1. 点击工具栏“模型”图标（）
  2. 在出现的模型资源面板中双击要引用的模型
  3. 编辑器区域快速插入相应代码
  4. 点击工具栏“执行项目”图标（），模型将出现在右侧3D容器内的场景中
  

其他资源引用操作详见 在线开发 - 菜单导航 - 资源管理

在线调试

ThingJS 在线开发环境中可以通过在代码里加入 “debugger” 关键字进行调试，调试步骤如下：

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

和普通页面调试方法一样，直接打开 F12 在 Sources 里 找到 debug.js文件，在里面打断点即可调试，调试步骤如下：

1. F12键调出浏览器控制台可以查看在线开发环境相关信息
2. 点击选择“Sources - Page”
3. 选择Top目录下的ifId(about:blank) - (no - domain -debug.js)
4. 在浏览器控制台的debug.js文件点击断点行数
5. 点击在线开发工具栏“执行项目”图标（）