打开文本图片集

摘要：本设计以楚雄师范学院为研究对象，设计和实现了一个基于ThingJS平台的3D可视化智慧校园系统。该系统利用优诺科技公司的ThingJS平台开发，部署在其PAAS平台，实现了校园环境的三维展示、自由漫游、楼宇的信息展示与楼层交互、以及教室、宿舍、办公室和停车位等资源的实时显示。本研究为师生提供了便捷、直观的校园导航和信息查询服务，同时为校园管理提供辅助参考。通过对系统的测试，验证了该系统的可行性和实用性，为高校的数字化建设提供了新的思路和方向。

关键词：智慧校园；物联网；交互设计；ThingJS

随着校园信息化建设的进步，学校的教学和生活数据被分散存储在各个系统中，设施资源的增加也导致物联网设备的数量上升，产生了大量的信息数据，现在又正处于互联网发展的蓬勃时期，通过物联网来连接校园内的各类设施以及设备资源信息是非常有必要的。

同时教育部的《教育信息化十年发展规划》明确提出各院校要“大力推进普通高校数字校园建设”，各院校也相继制定了智慧校园的发展规划，因此急需校园大数据和设施资源的可视化展示平台。通过该平台可直观地进行大数据可视化展示，形成校园各类资源、基础设施、运行管理数据的统一展示。

1 设计主要平台及工具

1.1 ThingJS平台概述

ThingJS是北京优锘科技有限公司开发的面向物联网的3D可视化开发平台，它集成了一套可供搭建管理场景的用户使用的开发组件，如Campus Builder、零代码、低代码等。提供了ThingJS API应用编程接口，能够轻松集成3D可视化物联网应用。该平台打通了第三方物联网系统和物联网可视化应用。如图1所示为ThingJS平台与物联网领域之间的关系。它不仅可以针对单栋或多栋建筑组成的园区进行场景可视化开发，当搭载丰富插件后，它也可以针对城市级别的场景进行设计与开发[1]。

ThingJS平台使用的有两种技术，分别是HTML5和WebGL技术，可方便地在主流浏览器上进行浏览和调试，支持PC端与移动端；集成了JavaScript代码编辑器，更方便开发，并且在开发在过程中提供了实时预览窗口，可实时预览场景和渲染效果；ThingJS还提供了开发工具组件，如场景搭建工具Campus Builder、城市效果制作工具CityBuilder 、图表制作工具QuickChart等；集成了一套可覆盖基本3D可视化物联网应用开发的API接口；应用广泛，可开发多种3D可视化物联网应用。

1.2 Campus Builder（森园区）

CampusBuilder是一款园区级3D场景搭建工具，它依托于ThingJS三维引擎，提供了简洁的产品界面、高效的搭建功能，使用户身临其境般的感受物理世界在虚拟空间的从无到有的创建过程[2]。相较于传统建模，它可以在同样的时间内搭建多个场景，节省更多时间，提高生产效率。

Campus Builder提供了大量的可编程的3D模型，还能根据自己的需求上传自有模型；支持空间层级化方式搭建，很大程度降低场景搭建的复杂度；通过Campus Builder搭建完成的3D场景，可自动同步到ThingJS低代码和ThingJS-X零代码开发平台上，方便用户进一步的3D园区业务应用系统开发。

1.3 ThingJS低代码

ThingJS是一种基于WebGL的3D可视化技术，专为Web平台设计以支持复杂 的三维场景创建、渲染和交互，融合了计算机图形学、网络技术、数据可视化和人机 交互等多个领域[3]。在ThingJS中提供了许多预制的代码块，也可以自定义开发对集成的代码模块进行改变，并且能够对代码模块进行搜索。如摄像机视角控制、点线面效果、界面数据展示等可视化功能都是可以使用预制的代码块实现的。在本项目中应用其内置的JavaScript 代码编辑器和ThingJS开发接口来完成交互设计的开发。

2 基于web端可视化平台的设计分析

2.1 总体设计目标

使用优诺科技的ThingJS物联网可视化平台，设计楚雄师范学院智慧校园的Web应用，该应用部署在云端，用户通过Web浏览器即可轻松实现交互式地访问楚雄师范学院数字化校园。该平台打破了传统校园参观的局限，使得用户无论身处何地，都可以通过互联网实现身临其境的校园游览体验。平台不仅提供了校园孪生应用服务的可视化功能，还为孪生管理场景应用的打造提供了强大的支持。

2.2 设计架构

本平台的开发设计主要包括场景加载、车位资源、建筑顶牌、行走漫游、飞行漫游、宿舍资源、教室资源、建筑楼层展开等功能。

而本次校园三维可视化的研究与实现的方式主要是采用基于WebGL的方法。WebGL是基于OpenGL ES的网络三维可视化浏览器标准[4]。WebGL（Web Graphics Library）是目前主要流行的一种把JavaScript和OpenGL ES 2.0结合，WebGL就可以为HTML5 编译提供3D硬件加速。那么，通过这个标准，开发人员就可以非常流畅地调用系统硬件来管理使用三维场景和模型。

在平台最左侧添加一排功能按钮，作为交互的媒介，分别对每个按钮添加功能。

（1）硬件组成：因为此平台是通过web，部署在云端，使用浏览器访问，所以其所调用的硬件其实就是电脑或手机本身。

（2）代码规范：本平台的开发使用的是ThingJS平台，其内置了JavaScript代码编辑器，代码规范就与JavaScript的规范一致。

2.3 拟采用的技术路线

制作所采用的技术路线如下图2所示。

2.4 主要功能

（1）场景加载：进入平台后，场景自动加载，视角锁定到学校。

（2）场景动态加载：对于一些大型场景，使用CampusBuilder直接制作会比较困难，并且直接加载也存在性能、加载时间等问题。动态加载就可以解决性能紧缺、加载时间过长等问题。所谓动态加载，就是将模型的外立面与楼层内部分开分别加载，在进入校园时只加载园区外立面，在点击建筑时加载对应的建筑房间，卸载校园，返回校园后卸载房间，加载校园。

（3）显示建筑顶牌：对每幢建筑的顶牌名称进行显示与隐藏。

（4）行走漫游：在校园中，点击侧边按钮即可在校园中以第一人称进行漫游行走。

（5）飞行漫游：在校园中，点击左侧按钮即可进入飞行漫游状态，可以使用键盘WASD来控制，像无人机一样在校园中飞行遨游，参观校园。

（6）车位资源：点击侧边按钮后，可以展示校园中车位的状态，如：车位状态、车位占用情况、车位使用情况、车辆车牌等。

（7）教室资源：点击左侧对应按钮之后即可查看学校的每间宿舍信息、教学楼的教室信息。

2.5 可视化平台建模搭建

在ThingJS中园区有园区、建筑和楼层三个层级，他们之间属于包含与被包含的关系。园区包含建筑，建筑包含楼层，楼层包含于建筑包含于园区。在园区中，除了建筑外，可能还存在树木、汽车、人物、椅子之类的其他物品，这些都属于小品，是构建园区的辅助物品，因此，园区中的主要构成依旧是园区、建筑和楼层。园区层级如下图3所示。

通过3Ds Max搭建完校园模型搭建完成的白模如图4所示。

将模型制作好贴图后再将制作好的模型逐个导出到CampusBuilder中，为场景搭建做好准备。

2.6 场景搭建

场景搭建的顺序为：校园外部场景—>建筑内部场景。搭建整体及内部场景都是在CampusBuilder中完成的。在场景搭建的过程中，需要注意的是，每个模型都可以设定一个专属的id，用户还可以自己设定属性值，方便在ThingJS低代码开发中调用模型。本平台有一个智慧车位信息模块，需要将车位的占用信息，车辆的车牌、外来属性展示出来。那么车辆模型的属性就要设置id与自定义属性；停车位要设置自定义属性。如表所示。

搭建完的整体场景如图5所示。

2.7 交互设计

2.7.1 场景加载

（1）应用程序初始化：首先，代码创建了一个新的THING.App实例，该实例指向特定的API URL，用于获取数据和交互。

（2）相机初始位置设定：定义了两个变量，camera_init_position和camera_init_target，分别表示相机的初始位置和目标位置。这些坐标用于控制应用程序中的虚拟相机视角。

（3）主场景加载处理： 当应用程序的主场景加载完成后，代码将删除楼层（优化渲染效率）。然后，相机被设置为飞向预先定义的初始位置和目标位置，这个过程持续2000毫秒（即2秒）。

（4）动态加载文件：使用THING.Utils.dynamicLoad方法异步加载多个JS和CSS文件。

2.7.2 场景动态加载

（1）配置动态加载的室内园区场景URL：在this.buildingConfig对象中，为不同的建筑（如笃学楼、明德楼等）设置了API URL。这些URL将用于动态加载对应的室内园区场景。

（2）创建场景加载进度条数据对象：this.dataObj被设置为包含一个名为progress的属性，用于跟踪场景加载的进度。初始进度设置为0。

（3）绑定事件：调用this.eventBind（）函数，该函数负责为面板绑定相关的事件处理函数，用于加载和切换场景、控制进度条等。

（4）创建组件：调用this.createWidgets（）函数，该函数负责创建和初始化面板上的各种组件，如可能的选项卡、按钮、进度条等。

（5）在应用程序（app）中监听特定的事件，即当用户离开某个级别的时候，它会执行一些操作来卸载动态创建的园区。具体来说，当用户离开名为“Campus”的级别时，它首先获取到用户之前所在的层级“Building”。然后，如果这个“Building”有名为“floors”的属性（指楼层），那么它就会调用“destroy”方法来销毁这些楼层。

2.7.3 显示建筑顶牌

定义了一个名为TopCardUI的类，该类包含两个静态属性：topCard和topCardShowed。其主要功能是管理顶卡的显示状态，通过调用toggle（）方法，可以在显示和隐藏顶卡之间切换。即可查看建筑顶牌方便直观展示校园建筑分布。

2.7.4 行走漫游

（1）设置摄像机位置和目标点：这部分代码设定了三维场景中摄像机的位置和目标点，决定了观察场景的视角。

（2）添加第一人称行走控件：通过调用app.addControl（）方法为场景添加了一个名为THING.WalkControl的控件。这个控件提供了第一人称视角下的行走、旋转和跳跃等交互功能。控件的参数可以动态修改，包括行走速度、旋转速度、重力、人物高度、跳跃速度等。此外，还可以设置是否启用键盘控制旋转、碰撞检测和重力效果等选项。

主要功能是设置摄像机位置并提供一种类似于游戏内第一人称视角的交互方式，让用户能够更直观地探索和体验三维场景。

2.7.5 飞行漫游

（1）添加控件：如果变量ctrl为空（即未初始化），则创建一个新的THING.FlyControl对象，并将其添加到应用程序中。此时会显示一条提示消息，告知用户控件已成功添加。

（2）键盘控制：一旦添加了控件，用户可以通过键盘按键W、A、S、D来控制飞行方向，Q和E键控制升降。

（3）移除控件：当再次触发“change”事件时，如果ctrl不为空（即控件已存在），则首先使用app.camera.flyTo方法让摄像机飞回初始位置，并在动画结束后移除控件。此时，ctrl变量被设置为null，并重新显示一条提示消息。

2.7.6 车位资源

（1）检查页面中是否已经存在图表元素，如果没有，则创建四个不同的ECharts图表，用于展示停车场的相关信息，包括当前的车位状态、车辆类型、上周的车位占用情况和车牌信息。

（2）使用的是_createEChartMain的静态方法，它负责创建和初始化一个ECharts图表。该方法接受一个名称参数name，根据该参数执行不同的逻辑。

这个方法的主体部分是一个switch语句，根据传入的name值执行不同的操作。目前支持的图表类型包括：“当前车位状态”、“车辆类型”、“上周车位占用情况”、“显示车牌信息”对于每种类型，都会调用_main函数创建和初始化图表。

该功能可以动态展示校园停车位的“上周车位占用情况”、“车位状态”、“车辆类型”、“车牌信息”。如图6所示。

2.7.7 教室资源

使用的是一个JavaScript的脚本，主要用于处理一个名为ClassroomUsageUI的用户界面（UI）。

（1）静态方法： 这些方法都被声明为static，这意味着它们属于ClassroomUsageUI类本身，而不是它的实例。

（2）_addData（）： 此方法用于绑定数据。它首先向Panel中添加一个Tab标签页，然后遍历ClassroomUsageUI.tablesData中的每个键值对。对于每个键值对，它会创建一个表格并将其链接到之前添加的标签页。它还会遍历表格中的每个单元格，如果单元格的文本内容为"1"，则会将该单元格的背景颜色设置为黄色。

（3）show（）： 此方法用于显示UI。如果ClassroomUsageUI.ui不存在，它将调用_init（）方法初始化UI，然后将ClassroomUsageUI.showed标志设置为true。

（4）reset（）： 此方法用于重置UI。它会移除所有与ThingJS_wrap相关的HTML元素，然后将ClassroomUsageUI.ui、ClassroomUsageUI.showed设置为null和false。

（5）toggle（）： 此方法用于切换UI的显示状态。如果ClassroomUsageUI.ui不存在，它将调用_init（）方法初始化UI并显示，否则它会调用reset（）方法隐藏UI。

（6）变量和属性：代码中使用了一些变量和属性，如ClassroomUsageUI.ui、ClassroomUsageUI.showed、ClassroomUsageUI.tabData和ClassroomUsageUI.tablesData，这些变量和属性用于存储和管理UI的状态和数据。该功能可以实时查看教室的使用情况，可以查看教学楼教室的上课节次、任课教师等。如图7所示。

3 总结与展望

这个集成了尖端技术与丰富功能的智慧校园解决方案，不仅改变了传统的校园参观方式，还为教育教学带来了新的可能性和机遇。它为师生提供了更便捷、更丰富的教育和学习体验，提升了教学效率和质量。

随着科技的不断进步，我相信此平台将会运用到越来越多的领域中，物联网的发展也会越来越好，在不远的将来，人们将可以生活在一个充满智慧物联的世界中，人们的生活也会被科技所改变，人人都可以享受科技带来的乐趣。

楚雄师范学院智慧校园可视化平台的推出是学校在智慧化教育领域迈出的重要一步。未来，它将不断演进，引领教育创新，为师生提供更优质的教育资源和体验，推动教育的数字化转型和可持续发展。

参考文献：

[1]张世城，翟嘉琪.智慧教室3D模型的设计与实现[J].现代计算机，2020（36）：100-103.

[2]于永志.数字孪生油田注水系统可视化平台的设计与研究[D].东北石油大学，2023.DOI：10.26995/d.cnki.gdqsc.2023.000372.

[3]王鹏飞.面向虚拟实验的WebGL开发框架的研究[D].北京邮电大学，2019.

[4]MARRIN C.WebGL Specification.Khronos WebGL Working Group，http：// www.khronos.org/webgl/.

[5]罗强，王秋妹，仇巍巍.元宇宙概念下自然资源孪生应用探索[J/OL].自然资源信息化，1-8[2024-03-02].

[6]练永华.物联网技术在智慧校园建设中的应用探究[J].数字技术与应用，2023，41（08）：69-71.DOI：10.19695/j.cnki.cn12-1369.2023.08.21.

[7]孟刚，李昭昶，郭慧等.大数据与数字孪生驱动的智慧校园集成设计研究[J].包装工程，2023，44（18）：458-466.DOI：10.19554/j.cnki.1001-3563.2023.18.054.

[8]刘哲，赵晓宇，李艳丽等.数字孪生技术在智慧校园中的研究与应用[J].微型电脑应用，2023，39（12）：45-48.

[9]陈思彤.浅谈3DMAX软件在建筑三维建模中的应用[J].房地产世界，2022，（23）：60-63.

1.赵智鸿，楚雄师范学院2023级数字媒体技术专业（专升本）学生，2023年云南省大学生创新创业训练计划项目主持人。

2.姜华，楚雄师范学院教师，副教授，从事计算机技术应用与数字媒体技术应用教学与研究。通讯作者。

3.基金项目：2022年云南省教育厅科研项目，基金编号：2022J0852