前端技术如何实现3D可视化应用开发？

快速入门

使用之前

在开始使用 ThingJS 之前，需要先了解Javascript，我们假设您已经掌握JS。

创建项目

创建项目之前需登录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容器的宽度比

主要功能介绍

菜单栏

在线开发环境的菜单栏位于头部左侧区域，主要由以下几部分构成：

文件：对在线开发环境中用户的项目及文件进行的操作，主要包括新建项目、新建文件、保存及运行。详细介绍请参照 在线开发 - 菜单导航 - 文件管理。

快捷代码：为提高项目开发效率，ThingJS提供了的功能模块，点击快捷代码中的内容，编辑器将插入对应功能的代码。也可通过点击工具栏中的快捷代码图标进行相应操作。详细介绍请参照 在线开发 - 菜单导航 - 快捷代码。

资源：在线开发环境为用户提供的包括模型、园区、地图、图表、界面、动态背景灯及用户上传的多种资源集合。详细介绍请参照 在线开发 - 菜单导航 - 资源管理。

工具：主要包括场景信息、场景效果、拾取坐标、自定义模型和设置。详细介绍请参照 在线开发 - 菜单导航 - 场景工具。

项目：针对用户已开发项目进行的分享、部署及更新操作。详细介绍请参照 在线开发 - 菜单导航 - 项目管理。

视图：通过切换日志、3D容器和目录（项目列表）的显隐状态以及切换视图风格改变在线开发环境的界面布局。详细介绍请参照 在线开发 - 菜单导航 - 视图管理。

帮助：提供了快捷键的详细介绍以及ThingJS平台其他相关页面的快捷入口。详细介绍请参照