智慧校园的3D全景漫游技术实践 ThingJS

回复

ingFang SC", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei", sans-serif; white-space: pre-wrap;">

#三维可视化##3D开发#

1. 智慧校园总体设计与规划
2. 用户与虚拟场景的互动
3. 实现全局场景的漫游模式

ingFang SC", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei", sans-serif; white-space: pre-wrap;">

国内各大高校，近几年纷纷搭建了3D智慧校园，如清华大学智慧校园系统，更是实现了虚拟课堂功能。新华三集团与优锘ThingJS达成技术战略合作，利用ThingJS平台构建3D智慧校园，创建一个足不出户就可以了解校园地理信息与文化背景的虚拟平台。

ingFang SC", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei", sans-serif; clear: left; color: rgb(18, 18, 18); white-space: pre-wrap;">
1. 总体设计与规划

ingFang SC", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei", sans-serif; white-space: pre-wrap;">

智慧校园系统的架构设计分为基础层、数据层、服务层、应用层和表示层五个层次。

ingFang SC", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei", sans-serif; white-space: pre-wrap;">

基础平台采用的是服务器，ThingJS平台提供在线发布和离线部署两个项目管理功能，本文选择局域部署，采用Windows平台配合Tomcat来配置服务器；数据层主要负责文本数据、多媒体数据、关系型数据的存储管理；服务层负责给应用层提供基础性服务；应用层组件可以单独使用，提供监控管理、角色模式漫游和全局模式漫游；表示层将系统进行客户端的展示，即对用户所能直观看到的页面进行展示。

ingFang SC", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei", sans-serif; white-space: pre-wrap;">

构建虚拟场景，主要基于WebGL 3D绘图技术实现虚拟场景的生成整合，将前面准备好的模型导入到智慧校园场景的目标坐标内，并为建筑物和天空贴图，再添加3D交互脚本，实现用户与虚拟场景的漫游功能。

JavaScript开发逻辑下的3D框架-ThingJS，将复杂的3D功能代码封装起来，开发者可以不必关心框架内部的代码是如何实现的，只要正确的调用接口即可快速的完成应用的开发，节省了开发者的时间和精力，同时这种方式也避免了开发者在运用 JavaScript代码时出现不应该出现的错误，3D交互更轻松。【注册使用】

2. 用户与虚拟场景的互动

我们可以使用鼠标控制智慧校园的场景，任意地旋转、平移、缩放，可以查看每个建筑物的名称和文化背景。

建筑物标签和文字性说明的显示，即在每个建筑物上方添加一个建筑物的名称，比如文科楼等标识牌的显示；接下来实现鼠标互动功能，当鼠标移动到建筑物上面时，智慧校园将会显示该建筑物的历史文化等文字性说明。

实现步骤如下：

（1）利用快捷界面库来创建一个2D HTML界面，为前面构建好的几幢建筑物上方添加一个小面板，说明建筑物的名称,让用户一眼就能清晰的了解整个智慧校园建筑物的大致分布情况。2D面板的创建，我们使用 ThingJS提供的UIAnchor对象来实现，用户可以很方便的了解该建筑物的文化背景同时也很直观的了解该建筑物在校园中所在的大致位置。

（2）鼠标操作场景的旋转、平移、缩放属于ThingJS系统内置功能，任何3D场景默认添加一个控制器，即常用的轨迹球控件 Orbit Controls，并限制了上下旋转的角度范围和滚轮控制相机离中心点的最大距离和最小距离。

（3）在3D场景导入一个机器小人，机器人在虚拟场景行走时，利用ThingJS提供的角色动画api，为它添加了一个行走、跑步、招手等动画效果，跟随着机器人漫游智慧校园的每一个角落，更加生动有趣。

3. 实现全局场景漫游模式

为了能更清晰明了的构建整合智慧校园，便于未来的扩展，需要对整个场景进行模块化。通过按层次的划分，对模型进行归类，逐层分解模型，从而明确智慧校园的场景元素及场景框架。

智慧校园实现场景漫游，实际上就是对场景中相机的控制，通过鼠标跟随移动的物体浏览智慧校园的每一个角落，每帧更新摄像机的位置实现，让用户对智慧校园的建筑物分布有个全局清晰的概念，比如提供室内的模拟参观功能。

用户可以单击按钮，进入教室内部的空间,通过计算机渲染，直接查看该教室的整体布局。用户可以随意在房间中行走,在任意角度观察该教室的3D模型。

本项目在CampusBuilder简单搭建教室的3D场景【客户端下载】，放置一个绿板、一个教室讲台、以及若干的课桌椅。可以根据实际情况一一定制，或者从ThingJS扩展库取用3D模型，避免重新建模。然后将这些模型与建筑物一起导入ThingJS平台，并加载到智慧校园的场景，最后计算每个房间的坐标，以便用于机器人定位。

ThingJS - 物联网3D可视化开发平台

ThingJS库是用 JavaScript编写的 WebGL第三方库，支持中小企业快速开发3D项目，极大简化了整体流程：1. 在CampusBuilder完成场景的搭建、展示，2. 通过 JavaScript代码可以完成鼠标对场景的控制，如移动、平移、缩放等操作，3. 在ThingJS平台进行实时数据对接，4. 选择在线或者离线部署，支持iframe链接在线访问3D场景。