基于Three.js 的全景漫游产品设计与实现

权西瑞，王 凯，王小飞，吕 佩

（1. 自然资源部陕西基础地理信息中心，陕西 西安 710054）

全景地图是一种全新的地理信息表现方式，通过虚拟现实技术将全景影像构建成真实三维场景，以其灵活的交互方式实现第一视角地图浏览体验，能精确地展示实际的地理场所，帮助用户更真实地掌握环境信息[1]。由于全景地图对真实场景的图像渲染效果逼真，用户交互手段丰富，已被广泛应用于旅游景区、虚拟校园、智慧城市和房地产管理等领域[2]。目前，将WebGL技术应用于全景数据可视化领域的研究逐渐成为热点，如陈秀万[3]等分析了基于WebGL搭建三维地理信息场景的基本方法，研究了全景地图数据获取与处理方法，提出了采用开源WebGL框架构建小型漫游场景的实现流程；韩昕熠[4]等针对全景地图数据和实景模型融合过程中存在的问题，提出了基于Cesium三维平台构建实景导览系统的实现方法；任宏康[5]等研究了第三方WebGL 类库引擎，提出了将瓦片和DEM 数据应用于构建三维地形的方法；陈林[6]研究了Three.js引擎的跨平台技术，提出了将该技术应用于管线三维可视化建模过程的实现方法；罗雅丹[7]等研究了利用WebGL技术渲染全景云台相机拍摄的全景照片的方法，并构建了景区的全景漫游系统。

本文通过对全景可视化关键技术的深入分析，研究了全景数据组织方法、全景服务发布技术和展示技术，设计了全景产品的概念模型、系统架构和功能模块，并基于Three.js 技术开发了全景漫游产品，分析了该产品的可行性和实用性。

1 全景可视化技术研究

全景可视化技术是利用图像合成与渲染技术，基于一定的规则展示特定三维场景的技术。通过对全景相机采集的图像进行整合拼接处理，形成全景照片；再通过相应的可视化引擎渲染为三维场景。全景漫游产品开发过程中涉及的技术包括全景图像获取技术、图像拼接技术、场景渲染技术和场景编辑技术等。常用的第三方可视化引擎技术包括Three.js、Krpano等。

1.1 Three.js可视化技术

Three.js 是一个轻量级的WebGL 开源框架，用于在浏览器中渲染三维场景和模型数据，包含一组基于Javascript语言编写的第三方库，提供了原生态WebGL的API接口；同时封装了投影、矩阵和矢量运算等常用的数据计算库，支持制作动画、游戏、模型与粒子特效等，具备相机、光源、网格、材质、光源、纹理等三维场景渲染对象。Three.js渲染引擎支持多种三维模型文件格式，可直接加载obj、fbx 等多种格式的模型数据，同时支持加载特定JSON 格式的三维模型数据。Three.js可视化技术的实现流程如图1所示。

图1 Three.js可视化技术的实现流程图

1.2 Krpano可视化技术

Krpano是一个图像展示与交互引擎，提供了图像渲染技术，支持运行在PC 端、移动端和平板电脑端的Flash 应用程序；在全景图像渲染方面，支持多种图像格式，包括六面体模型、球面模型和圆柱模型等全景格式。Krpano是对基于Flash语法的动态脚本Ac⁃tion Script的二次开发，提供了API接口和面向不同应用场景的插件，支持开发各种全景应用产品。在全景系统中，利用xml 格式的数据结构配置文件存储全景视图、图像、场景热点、图层、热点跳转等信息，实现全景场景渲染与浏览操作。

随着全景技术的快速发展和轻量化WebGL 技术的不断成熟，基于插件式的全景地图浏览方式的弊端愈发凸显，市面上的主流浏览器逐渐开始不支持插件，基于Flash 插件的Krpano 全景渲染技术无法满足不同用户跨平台浏览的需求。由于Three.js 具备无需插件支持、跨平台浏览器展示、灵活的三维交互体验等优点，本文利用Three.js 设计并开发全景漫游产品。

2 全景漫游产品架构设计

2.1 全景产品的概念设计

全景产品通过全景技术引擎驱动全景数据在不同终端的浏览器中进行渲染。从数据源来看，全景数据包括全景切片数据和全景业务数据，全景切片数据是采用LOD 分级模式存储的每个拍摄站点的全景影像，用于全景渲染引擎的展示；全景业务数据是实现全景场景组织的关键，采用“对象—场景组—场景”的模式进行组织和管理，其中对象是需要建模的主体，场景组是一系列场景的集合，可以是对象的某层或某个分区，场景是最小的组织单元，对应于一个全景点位。全景数据的概念模型如图2所示。

图2 全景产品的概念模型

2.2 全景产品的系统架构

全景产品基于C/S和B/S双重模式体系，采用多层架构进行构建，主要包括软硬件支撑层、数据层、引擎层和应用层，如图3所示。

图3 全景产品总体架构

软硬件支撑层由硬件、操作系统、数据库等构成。根据数据特点，数据库采用混合存储架构，全景切片数据采用MongoDB数据库存储，全景业务数据采用MySQL数据库存储。数据层包括全景产品相关的各类数据，如全景切片数据、热点数据、导览图数据、专题数据和路径漫游数据等。引擎层由全景可视化引擎Three.js、前端框架Vue.js、服务端框架Spring Boot、前端开发语言Javascript 和服务端开发语言Java等构成，是系统框架功能实现的基础。根据全景产品功能需要，应用层面向用户提供了全景产品数据生产和展示功能，实现了全景数据处理、数据生产、数据展示、应用管理。

2.3 全景产品的功能模块

全景产品包括全景数据处理、全景数据生产、全景应用管理、全景数据展示等子系统，功能模块设计如图4所示。

图4 全景产品功能结构

全景数据处理子系统包括全景模糊处理、全景切片管理和全景离线版导出等模块，其中全景模糊处理模块包括人脸辅助识别、全景模糊、模糊还原等功能；全景切片管理模块包括全景切片、追加切片、更新切片和删除切片等功能；全景离线版导出模块负责将数据库中的数据导出为本地文件，满足离线应用需求。

全景数据生产子系统包括全景热点数据生产、全景导览图数据生产、全景专题数据生产、导览图热点数据生产和漫游路径数据生产等模块，用于建立全景照片之间的关联关系和跳转逻辑；实现了全景数据目录组织、资源管理、场景编辑等功能；针对专题数据浏览和自动漫游需求，提供了专题数据采集和漫游路径生产功能。

全景应用管理子系统包括全景应用发布和全景应用管理模块，其中全景应用发布模块通过设置全景应用系统的数据源，将标准的应用程序发布至Web服务器上，包括应用名称设置、数据源设置、发布类别设置、应用缩略图设置和应用发布等功能；全景应用管理模块包括应用列表展示，应用启动、停止和移除等应用管理功能。

全景数据展示子系统包括全景展示、全景热点数据展示、全景导览图数据展示、全景导览图热点数据展示、专题数据展示和路径漫游等模块，其中全景展示模块包括场景展示、场景热点展示和场景目录树展示等，提供了场景缩放、旋转和通过目录树进入不同场景等功能；全景导览图热点数据展示模块包括导览图、导览热点和场景缩略图等，提供了通过导览图和场景组缩略图进入场景等功能；专题数据展示模块包括图层控制和专题数据显示功能，可通过专题图标定位场景并查看专题设施；路径漫游模块包括漫游路径列表展示和路径漫游功能，可根据漫游路径进行全景场景漫游浏览。

3 基于Three.js的全景漫游产品实现

全景产品利用Three.js、Vue.js和Spring Boot进行构建，实现了场景浏览、场景组展示和路径漫游等功能。场景浏览功能实现了场景目录树和场景热点的展示，支持根据热点和目录跳转至场景进行浏览，场景展示过程中支持场景放大、缩小、旋转等。场景组展示功能实现了场景缩略图、导览图和导览热点的展示，通过导览图可直观展示场景的平面分布图和导览热点，支持在导览图中点击热点进入场景，通过场景缩略图可直观展示场景的图像信息，支持点击场景缩略图进入场景。路径漫游功能可根据预先设计的漫游路径进行场景漫游浏览，并支持在导览图中展示漫游位置。

4 结 语

本文通过对全景可视化技术进行研究，设计了全景漫游产品的概念模型、系统框架和功能结构，并基于Three.js 技术开发了全景漫游产品，实现了全景数据处理、全景数据生产、全景应用管理、全景数据展示等模块。相较于传统全景地图产品，该产品具有一定的实用性和先进性，对于后续的全景可视化技术发展与应用具有一定的参考价值。