ThingJS新⼿教程之初识在线开发（⼀）
作为新⼀代物联⽹可视化PaaS平台，提供了在线开发环境，那么新⼿该如何使⽤ThingJS的在线开发环境来开发⼀个3D可视化项⽬呢？第⼀个关键之处就是使⽤ThingJS的前置要求，必须会javaScript，也就是说，这个也有⼀定的门槛，会java转javaScript也是较为简单的事情，如果完全不会编程，不建议直接学习和使⽤。
创建项⽬
创建项⽬之前需登录ThingJS账号，如果您尚未登录账号或页⾯出现“登录已过期，请重新登录！”的提⽰，为保证项⽬的正确保存及运⾏，请您在账号登录之后再创建项⽬。您可通过以下三种⽅式创建项⽬：
选择菜单区域的“⽂件 - 新建项⽬”选项
点击⼯具栏“新建”图标，图标如右图所⽰：
使⽤快捷键“Ctrl+P”
编辑项⽬
在线开发为⽤户提供了相应的快捷代码和官⽅⽰例，如果你正在⽤ ThingJS在线开发页⾯，可以通过以下两种⽅式来编辑项⽬：点击在线开发页⾯菜单区域的快捷代码选项中的⼦项，编辑区将⾃动插⼊相应代码
选择在线开发官⽅⽰例中的其中任意⼀个⽰例，点击相应⽰例，编辑区将显⽰相应代码
后续操作详见
保存项⽬
可通过以下四种⽅式保存项⽬：
选择菜单区域的“⽂件 - 保存”选项
点击⼯具栏“保存”图标，图标如右图所⽰：
使⽤快捷键“Ctrl+S”
运⾏项⽬
在线开发环境提供了以下⼏种⽅式运⾏项⽬：
使⽤快捷⽅式“Ctrl+R/Enter”或点击⼯具栏中的“运⾏”图标，3d容器区域将运⾏编辑器相应的代码。图标如右图所⽰：
选择菜单区域的“⼯具 - 设置”选型，出现的设置⾯板，点击开启“⾃动保存执⾏”
界⾯介绍
在线开发页⾯左边显⽰官⽅⽰例及⽤户创建并保存的项⽬，中间的编辑器则显⽰您已打开项⽬或⽂件的内容，⽽右侧主要显⽰项⽬运⾏之后的3D场景。
界⾯区域
1. 菜单栏：对项⽬或项⽬⽂件操作的快捷⼊⼝，包括⽂件、快捷代码、资源、⼯具、项⽬、视图及帮助七个⼦项
2. 项⽬列表：官⽅提供的⽰例代码及⽤户项⽬的集合，其中⽤户项⽬只有登录之后才会显⽰
3. ⼯具栏：对菜单栏的图标化显⽰
4. 状态栏：⽤户项⽬、⽂件或官⽅⽰例的状态显⽰
5. 编辑器：当前打开项⽬的内容
6. 3D容器：项⽬运⾏后的场景可视化显⽰
7. 项⽬打印⽇志：项⽬运⾏输出的⽇志
8. 项⽬导航显隐切换：左侧项⽬列表显⽰/隐藏
9. ⽂件位置：当前打开项⽬/⽂件的路径
10. 申请建模： ThingJS平台提供的模型（设施设备、建筑外观等）定制服务，每个模型800元起。需填写相应资料发出申请，ThingJS平
台会有专⼈联系并沟通服务细节。
11. 请求协助：为协助ThingJS⽤户快速⼊门，ThingJS平台可提供⽤户特定项⽬的框架代码开发服务。该服务可为⽤户快速构建符合项⽬
基本需求的3D可视化框架代码资源（包括源码、3D模型、贴图、数据等），⽤户的技术团队可在此基础上快速上⼿，⼤幅提⾼3D可视化项⽬成功基础。
12. 充值：魔⾖充值，包括两种充值⽅式：⽀付宝和⽀付。充值之后的魔⾖可⽤于购买VIP、VIP续费或项⽬部署的付费。
13. 升级VIP：普通⽤户可通过⽀付宝、⽀付或魔⾖⽀付三种⽅式升级为VIP。
14. 个⼈信息栏：⽤户名和⽤户头像
15. 容器浮动：点击“浮动”图标，3D容器将以浮动层的⽅式显⽰
16. 最⼤化预览：场景最⼤化预览
17. ：ThingJS在线⽀持⼊⼝
18. 编辑器拖拽：调节编辑器及3D容器的宽度⽐
主要功能介绍
菜单栏
在线开发环境的菜单栏位于头部左侧区域，主要由以下⼏部分构成：
1. ⽂件：对在线开发环境中⽤户的项⽬及⽂件进⾏的操作，主要包括新建项⽬、新建⽂件、保存及运⾏。详细介绍请参照。
2. 快捷代码：为提⾼项⽬开发效率，ThingJS提供了的功能模块，点击快捷代码中的内容，编辑器将插⼊对应功能的代码。也可通
过点击⼯具栏中的快捷代码图标进⾏相应操作。详细介绍请参照。
3. 资源：在线开发环境为⽤户提供的包括模型、园区、地图、图表、界⾯、动态背景灯及⽤户上传的多种资源集合。详细介绍请参
照。
4. ⼯具：主要包括场景信息、场景效果、拾取坐标、⾃定义模型和设置。详细介绍请参照。
5. 项⽬：针对⽤户已开发项⽬进⾏的分享、部署及更新操作。详细介绍请参照。
6. 视图：通过切换⽇志、3D容器和⽬录（项⽬列表）的显隐状态以及切换视图风格改变在线开发环境的界⾯布局。详细介绍请参
照。
7. 帮助：提供了快捷键的详细介绍以及ThingJS平台其他相关页⾯的快捷⼊⼝。详细介绍请参照。
项⽬列表
项⽬列表主要位于在线开发环境的左侧，主要包括官⽅⽰例和⽤户项⽬。可通过点击列表上⽅的“官⽅”和“我的”切换官⽅和个⼈项⽬：
1. 当切换⾄官⽅⽰例时，在列表标题下⽅的输⼊框搜输⼊相关内容可搜索相应的官⽅⽰例，点击相应⽰例，编辑器将显⽰对应代
码，点击运⾏图标，右侧3D容器将显⽰⽰例对应的场景，⽤户可对编辑器内的⽰例代码修改并保存为个⼈项⽬。
注：新增的⽰例右侧会显⽰⼀个新增标记（），VIP专栏中的所有⽰例仅针对VIP⽤户开放。
2. 切换个⼈项⽬时，选中其中任⼀项⽬，右键选择“打开项⽬”，编辑器和3D容器将分别显⽰该项⽬的内容及场景，且项⽬及项⽬下
的⽂件将显⽰在“当前项⽬”⽬录下。⽤户可编辑修改当前项⽬及项⽬下的⽂件。
注意事项：
⽤户只有在注册并登录 ThingJS ⽹站后，才能新建和保存项⽬，否则“我的项⽬”列表将不会出现在左侧导航栏中
⼯具栏
⼯具栏图标说明如下：
图标图标说明
新建项⽬：创建⼀个空项⽬，⽤户可在编辑器器内添增加或修改项⽬内容
保存项⽬：保存当前处于编辑状态的⽂件
执⾏项⽬：运⾏当前处于编辑状态下的项⽬或⽰例，右侧3D容器将显⽰对应场景
项⽬分享：分享当前处于编辑状态的项⽬或⽰例
模型：显⽰模型资源⾯板，⾯板中的模型资源由ThingJS提供的官⽅模型及⽤户选择或上传的模型构成
园区：显⽰园区资源⾯板，⾯板中的园区资源由⽤户上传或CamBuilder同步过来的园区场景构成
地图：显⽰地图资源⾯板，该⾯板中的地图资源是⽤户在CityBuilder创建的地图
图表：显⽰园区资源⾯板，该⾯板中的图表模板由ThingJS平台提供
界⾯：显⽰界⾯资源⾯板，该⾯板主要为ThingJS平台提供的Widget ⾯板组件的快捷⽅式
动态背景：显⽰动态背景⾯板，该⾯板中的背景模板由ThingJS提供
快捷代码：显⽰快捷代码⾯板，该⾯板是在线开发为提升⽤户的开发效率所提供的⼤量常⽤功能代码块的集合
场景信息：显⽰场景信息（当前运⾏项⽬或⽰例对应场景的⼀系列信息）
场景效果：显⽰场景效果⾯板，该⾯板内开关和按钮可调节3D容器场景的灯光、后期、动态天空、雾等特效等场景效果
状态栏
介于编辑器与⼯具栏中间，⽤来显⽰已打开的项⽬、⽂件或⽰例。当在线开发环境中已经存在⼀个已打开的⽤户项⽬时，点击其他的⽰例或项⽬⽂件，将作为参考⽂件在状态栏中打开，点击之后的状态栏显⽰如下：在线代码运行器
编辑器
在线开发中的编辑器⽤来查询、修改项⽬或⽂件的内容，⽀持⽀持⾃动拼写和快捷键操作。详情请参照
3D容器
显⽰编辑器内代码运⾏之后的场景及效果
项⽬打印⽇志
若3D容器场景对应的项⽬⽂件或⽰例中含有类似于：console.log(obj)的代码块，在线开发环境右侧下⽅的项⽬打印区域将输相关信息

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。