基于WebGL的三维大屏可视化技术实践 thingjs 3d 开发

DataV, 腾讯云图，帆软等可视化大屏应用厂商，都提供三维可视化分析工具。ThingJS是近两年新兴的3D可视化开发组件，助力物联网3D可视化的未来发展。新基建浪潮汹涌，智慧城市建设也到了落地阶段，不再是纯粹的概念，很多物联网技术开始崭露头角，相较于之前的低调行为，3D可视化领域有何变化呢？

以前

三维可视化城市大屏应用属于保密项目，CVS（可视化展示服务）系统部署在安全消防、城市交通、智慧工厂、城市管理等运营管理客户端，属于小众需求，随着云模式部署比例加大，大屏应用支持可视化组件进行监控画面搭建，中小开发团队有机会入场，云端共享各行业的“示例”开发资源，加速3D可视化开发。

现在

CVS系统基于HTML5技术构建，运行于浏览器环境中，大屏应用基于Webgl开发3D效果，thingjs提供一站式在线开发服务，一键发布3D项目。用户不需要安装任何插件或客户端软件，可以直接访问URL地址在浏览器中设计工业监控画面，具有极大灵活性。

北京市朝阳区智慧城市三维地图大屏应用 - 3D城市 - ThingJS

ThingJS系统采用B/S架构，基于webG绘图技术标准，提供一套基于Web浏览器的3D可视化平台组件，支持HTML5/SVG等最新技术，为开发人员制作符合用户使用习惯的大屏可视化应用，包括2D图表分析、3D建筑实景等相关内容，能够在可视化界面进行详略操作，控制实时数据及动画展示、历史回放、报警、命令下发等功能。

运行环境主要是最终配置好的监控画面运行相关的功能集合，包括实时数据及动画展示、历史回放、报警、命令下发等功能。在运行环境中会在浏览器窗口中加载用户所创建好的画面，并根据屏幕实际大小进行自适应缩放，同时根据用户设置的刷新周期进行数据获取和元素渲染，实现对设备的远程监控、诊断维护和故障预警。

项目交付初期可以跨平台终端（PC/手机/浏览器）展示和访问，最大化演示效果。使得整套系统可以获取最全面的信息，用户只需要一个浏览器便可以掌控整个系统运行情况，极大满足随时随地监控的需求，从而能够更加从容处理各种突发情况。

ThingJS用于构建大屏可视化应用2D/3D效果，属于物联网可视化“最后一公里”，比起纯粹的炫酷效果，用户更希望所有信息都可以实时到达终端界面，最大限度降低人员操作的延迟，提升工作效率。为了让开发者有精力处理更重要的数据可视化分析内容，ThingJS平台提供了可靠的3D开发步骤（场景搭建-3D开发-数据接入-项目部署），大幅降低开发成本，可视化效果保质保量，让“最后一公里”不掉队。

1. 基于城市级、园区级场景的组态设计

CityBuilder城市级、CampusBuilder园区级场景设计器使用SVG技术，采用图形拖拽、属性设置等操作搭建3D场景，加入2D图表进行可视化分析。使用thingjs自带chartbuilder编辑器，或者导入echarts等BI软件，基于城市基础数据加入专业的趋势和报警控件。

2. 自定义的3D开发生态

thingjs支持使用 Java Script脚本语言实现事件监听、命令下发等操作，3D源码示例易用性强，使得用户能够快速上手，用最短的学习时间搭建专业级的3D动画，效果直观。

3. 多平台项目管理方式

值得一提的是，数据安全性、操作有效性是项目开发过程中的核心要求。完成3D场景开发，接下来应该接入实时数据源，接收物联网设备传感信息。thingjs提供统一的框架接口，支持多种数据格式如JSON 、OBJ、 Collada、STL。为了更好地对接企业中已有的系统和大数据环境，thingjs支持两种部署模式：在线部署（即云模式）和离线部署。

云模式针对大数据云环境的部署，可以跟大数据PDS(Process Data Service)对接，一键在线发布项目。离线部署在局域网的客户端进行私密部署，通过不同数据代理接入不同系统数据进行展示。

4. 跨系统多终端访问

用户的访问操作跨终端跨平台，项目一般会采用多套系统完成整体实施，因此画面的跨系统访问性也非常重要。为了满足项目演示、协作和分享需求，thingjs提供了iframe分享功能，用户可以生成画面的唯一URL链接和二维码,，可以直接在其他Wcb系统嵌入该画面进行展示。