最新物联网3D可视化在线开发平台入门教程

此文只写给有需要的人，如果你与这相关：1.你是技术人员 2.你懂前端开发，懂js，熟悉webgl 3.对物联网3D可视化有极大的兴趣

4.愿意花时间研究开发。那么这篇入门教程很适合你喽~请继续往下看：

创建项目

创建项目之前需登录ThingJS账号，如果您尚未登录账号或页面出现“登录已过期，请重新登录！”的提示，为保证项目的正确保存及运行，请您在账号登录之后再创建项目。您可通过以下三种方式创建项目：

选择菜单区域的“文件 - 新建项目”选项

点击工具栏“新建”图标，图标如右图所示：

使用快捷键“Ctrl+P”

编辑项目

在线开发为用户提供了相应的快捷代码和官方示例，如果你正在用 ThingJS在线开发页面，可以通过以下两种方式来编辑项目:

点击在线开发页面菜单区域的快捷代码选项中的子项，编辑区将自动插入相应代码

选择在线开发官方示例中的其中任意一个示例，点击相应示例，编辑区将显示相应代码

保存项目

可通过以下四种方式保存项目：

选择菜单区域的“文件 - 保存”选项

点击工具栏“保存”图标，图标如右图所示：

使用快捷键“Ctrl+S”

运行项目

在线开发环境提供了以下几种方式运行项目：

使用快捷方式“Ctrl+R/Enter”或点击工具栏中的“运行”图标，3d容器区域将运行编辑器相应的代码。图标如右图所示：

选择菜单区域的“工具 - 设置”选型，出现的设置面板，点击开启“自动保存执行”

界面介绍

在线开发页面左边显示官方示例及用户创建并保存的项目，中间的编辑器则显示您已打开项目或文件的内容，而右侧主要显示项目运行之后的3D场景。

界面区域

菜单栏：对项目或项目文件操作的快捷入口，包括文件、快捷代码、资源、工具、项目、视图及帮助七个子项

项目列表：官方提供的示例代码及用户项目的集合，其中用户项目只有登录之后才会显示

工具栏：对菜单栏的图标化显示

状态栏：用户项目、文件或官方示例的状态显示

编辑器：当前打开项目的内容

3D容器：项目运行后的场景可视化显示

项目打印日志：项目运行输出的日志

项目导航显隐切换：左侧项目列表显示/隐藏

文件位置：当前打开项目/文件的路径

申请建模： ThingJS平台提供的模型（设施设备、建筑外观等）定制服务，每个模型800元起。需填写相应资料发出申请，ThingJS平台会有专人联系并沟通服务细节。

请求协助：为协助ThingJS用户快速入门，ThingJS平台可提供用户特定项目的框架代码开发服务。该服务可为用户快速构建符合项目基本需求的3D可视化框架代码资源（包括源码、3D模型、贴图、数据等），用户的技术团队可在此基础上快速上手，大幅提高3D可视化项目成功基础。

充值：魔豆充值，包括两种充值方式：支付宝和微信支付。充值之后的魔豆可用于购买VIP、VIP续费或项目部署的付费。

升级VIP：普通用户可通过支付宝、微信支付或魔豆支付三种方式升级为VIP。

个人信息栏：用户名和用户头像

容器浮动：点击“浮动”图标，3D容器将以浮动层的方式显示

最大化预览：场景最大化预览

在线咨询：ThingJS在线支持入口

编辑器拖拽：调节编辑器及3D容器的宽度比

在线开发中的编辑器用来查询、修改项目或文件的内容，支持支持自动拼写和快捷键操作。详情请参照 在线开发 - 应用开发 - 在线开发

3D容器

显示编辑器内代码运行之后的场景及效果

项目打印日志

若3D容器场景对应的项目文件或示例中含有类似于：console.log(obj)的代码块，在线开发环境右侧下方的项目打印区域将输相关信息

好了，内容有些长，网站上扒下来不容易，还请看到的同学移步我们的开发平台试用，免费的哦~