ASP.NET MVC框架下面向学员学习的船舶漫游系统设计

　　摘 要: 船舶漫游系统是一种以真实船舶为视景源，还原船舶真实场景，在球面全视域空间对船舶内部景物浏览、游历的系统，在其基础上开发的交互学习平台以漫游热点为媒介，为学员提供沉浸式的交互学习． 基于 ASP． NET MVC 框架设计，使得后台数据的处理与前台界面的显示完全分离，保证了网站设计的规范性、易于维护，并扩大了培训的范围，为后期系统的完善、功能升级与知识点的更新维护提供开发思路．

　　关键词: 场景漫游; ASP． NET MVC; 交互式了

　　近年来，随着科技现代化、信息化的普及，科学化的教学方式不断出现，许多船舶专业相关的院校都开展了自己的特色教学课程，船舶类专业的教学也逐渐多样化． 基于场景再现的船舶漫游交互式学习系统，不仅能使学习人员更加直观地了解船舶的外观、结构及各种设备，更能通过其中的交互式热点达到深层次的学习目的．船舶漫游交互学习平台是采用 ASP． NETMVC + PaperVision3D( PV3D) 引擎 + Microsoft Ac-cess 数据库搭建的一套基于网页的学习系统． 其中，使用 ASP． NET MVC 技术开发后台控制系统;利用 Flash3D 引擎中的 PaperVision3D 引擎完成船舶漫游系统的开发，并设计与漫游管理平台进行数据交互的接口; 考虑到交互式学习系统后期使用时的可移植性及系统本身轻量级数据的需求，采用Microsoft Access 搭建后台数据库． 该学习平台兼容所有主流浏览器且漫游系统运行流畅，达成初期设计目标． 系统开发流程如图 1．

图 1 系统开发流程图

　　1、船舶漫游系统开发

　　基于 Flash3D 引擎制作的场景再现船舶漫游系统，以真实船舶为视景源，通过 360°全景图片进行全船场景再现，使用户可以 100% 真实体验船舶实景． 这种浸入式的浏览方式可以直接将用户带入到真实的船舶环境中，使用户对船舶结构、设备等一目了然． 船舶漫游系统在教学平台中的使用，将船舶信息立体的呈现在学生面前，帮助学生快速地了解船舶的结构，达到船舶认知、实习的目的． 而交互式热点的开发应用让漫游系统更加灵活、功能更加丰富，完全可以达到辅助教学的效果．船舶漫游系统采用 Flash CS6 开发，其中搭载Flash3D 引擎 PaperVision3D［1］完成全景图形的渲染． 船舶漫游系统开发流程为: 船舶现场素材采集、素材图片处理、漫游系统开发．

　　1. 1、船舶实景素材采集

　　素材采集是漫游系统开发中最重要的一环． 因为基于视景再现技术的虚拟漫游系统需要使用全景图片，所以一般的拍摄设备和技术无法满足要求． 文中船舶实景素材采集使用的主要设备有数码相机、全景云台、8 mm 鱼眼镜头等，装配如图 2．

图 2 摄影器材装配图

　　全景云台可以绕三脚架中心轴 360°旋转，以确保数码相机取景点在同一平面上． 各组图片取景的中心点相同，可方便后期图片的拼接以保证全景图片的质量． 鱼眼镜头是一种视角接近 180°的超广角镜头，取景范围远超普通平面镜头，极大地减少拍摄的工作量，并且为后期图片的处理提供便利． 本套漫游系统采用 8 mm 圆形鱼眼镜头，其取景范围非常广泛，拍摄的图片效果见图 3．

图 3 圆形鱼眼图像

　　为保证照片有足够的重叠度以方便后期的图片拼接，文中拍摄全景云台每旋转 90°取景一次，取景所得图片 4 张，满足 360°全景图片拼接条件．根据船舶拍摄取景经验，在船舶机舱、驾驶室等实际环境中，因取景点上方( 天花板) 一般含有较为复杂的管系、线路布置，而取景点下方( 地板) 环境单一，考虑到拍摄时的盲点及后期全景图片拼接需求，实际拍摄时，镜头轻微向上抬起 3° ～5°．

　　1. 2、素材图片处理

　　为了提高漫游系统开发效率，图片处理采用软件 Easypano Panoweaver 进行鱼眼图片的拼接处理． 调整图片重叠部分的控制点，以达到最佳拼接效果． 得到初期全景图以后，使用 Photoshop 软件进行全景图修补天地操作，以形成最终全景图． 图 4为船舶机舱某取景点所得全景图．

图 4 全景图

　　1. 3、船舶漫游系统开发

　　基于场景再现的船舶漫游系统，是将制作的船舶实景全景图通过 Adobe Flash 组织图片，通过PV3D 引擎渲染图片并展示给用户． PV3D 引擎是一款流行的 Flash 3D 动画引擎，它是一款开源项目，受到国内开发人员的喜爱，因此，基于该引擎的Flash 作品也是层出不穷［2］． 通过 PV3D 引擎制作的船舶漫游系统运行流畅、系统稳定、用户体验极佳．PV3D 引擎的开源开发包中包括以下几个核心类: 视口 Viewport3D、场景 Scene3D、相机 Camera3D、材质 Material、对象 Object3D、渲染引擎 BasicRen-derEngine［3］． PV3D 引擎的场景元素关系如图 5．

图 5 PV3D 场景基本元素

　　基于 PV3D 引擎的漫游系统需要经过以下过程: 创建球形容器，将全景图片作为材质添加到球形容器的内表面; 实例化相机对象并对其进行重要参数初始化，如初始位置、焦距、缩放参数等; 构建ActionScript 文档类［4］，有效组织上述实例化对象，进行漫游系统开发．在漫游系统基本开发完成以后，需要添加船舶漫游交互式热点的核心功能索引． 因整个系统运行在服务器上，用户通过访问网页的方式进行学习，故系统需要为漫游热点添加热点索引，并且为每一个热点添加执行 JavaScript 代码的功能，以方便后期数据的读取．

　　用户对热点的每一次点击都会响应一次鼠标单击事件，为鼠标的热点单击事件添加功能函数getHotspotIndex，当点击事件发生时，该函数将内置的热点索引“fishery － 81 － ER － ME － 001”响应到系统后台控制器，后台将根据热点索引来确定加载什么类型的窗口，从数据库中读取所对应的数据．

　　2、交互式学习平台开发

　　船舶漫游交互式学习平台的主要特点是对船舶漫游系统的集成，传统基于场景再现技术的漫游系统只能在漫游开发时为其添加有限的信息资源，并且一旦系统发布，将无法对其中的信息进行更改，除非重新开发并发布，这无疑增加了额外的维护成本，不利于信息的更新与系统的维护． 而船舶漫游交互式学习平台，实现了与各种主流数据库的访问接口，可以根据需要随时从数据库中读取漫游内的信息． 漫游系统与数据库数据交互的实现，为系统后期的维护管理提供了非常有利的条件［5］，丰富了漫游系统的功能，使学生在交互式学习中获得更佳的体验．船舶漫游交互式学习平台使用 ASP．NETMVC框架技术开发漫游管理系统，使用jQuery EasyUI实现系统的界面设计．

　　2. 1、整体布局

　　考虑到漫游系统与数据库的交互响应式窗口的弹出以及核心管理功能的需要，界面布局时以漫游系统为主，管理控制区域以可伸缩窗口的方式位于漫游系统的左侧，整体布局设计如图 6．

图 6 系统布局图

　　2. 2、窗口设计

　　船舶漫游交互式学习平台设计了 3 种窗口类型: 信息提示型、图文信息型、题目测试型． 信息提示型窗口负责各类设备、仪器等的文字信息显示;图文信息型窗口提供与热点相对应的设备的相关图片及文本信息; 题目测试型窗口显示相关的测试题目． 窗口的实际应用如图 7 ～9．

图 7 信息型窗口

图 8 图文信息型窗口

图 9 题目测试型窗口

　　2. 3、功能模块设计

　　系统设计 3 种角色类型: 超级管理员、教师、学生． 其中，超级管理员可以访问和修改任何信息，可以对教师和学生角色进行管理; 教师角色可以对学生用户进行管理，并对船舶数据库操作的权限; 学生角色无管理权限．用户角色的设计主要是为了满足不同的用户群使用不同的功能，教师可以对漫游热点数据库进行读写操作，根据自己所教课程的实际情况对热点内容，图片、视频、文档等都可以自定义添加，以应对不同的教学场合，并且可以为自己的学生添加账户; 学生可以完成教师指定的测试题目，并将测试结果返回到教师用户以便于其统计分析，同时浏览船舶漫游的所有功能，且向教师角色提交建议．

　　2. 4、数据库设计

　　数据库是船舶漫游交互式学习平台中最重要的部分，它将各个部分有机的组织起来，完成角色管理、热点管理等数据存储任务． 整套系统集成了多种不同类型的船舶漫游系统，为方便对每艘船舶信息的管理，每条船舶将单独创建各自的数据库．因为每艘船舶的热点信息数目有限，属于轻量级小型数据库，同时考虑到系统后期的可移植性，文中系统采用 Microsoft Access 数据库．系统将创建一个公共的数据库，用来进行角色管理以及存储一些公共的信息． 公共数据库将用于存储用户注册信息、用户权限信息、船舶热点汇总信息等一些重要信息并对各船舶数据库进行统一管理．

　　3、系统实现

　　整个船舶漫游交互式学习系统的实现需要将上述各系统通过数据库有效的组织起来． 为了将船舶漫游系统完整地嵌入到交互式学习平台，使用内联框架 ＜ iframe ＞ … ＜ /iframe ＞ 在网页中新建一个窗口区域，将漫游放入到这个新的窗口区域，不仅便于系统的整体布局，而且不会影响到船舶漫游系统的稳定性．系统中对热点做出响应的关键是将内置在船舶漫游系统的热点索引取出来并发送到后台控制器，由后台控制器完成对数据库的访问，并将需要的数据取出返回到前台页面显示，系统访问的流程如图10．热点索引的获取 使用漫游系统开发时内置的JavaScript 功能函数 getHotspotIndex 来获取．

图 10 系统热点访问流程图

　　船舶漫游交互式学习平台发布到 IIS 服务器后的实际运行状况如图 11、12．

图 11 船舶漫游交互式学习平台首页

图 12 船舶漫游交互式学习平台操作页面

　　4、结论

　　通过 ASP． NET MVC + jQuery EasyUI + PV3D引擎 + Access 数据库搭建基于船舶场景漫游的交互式学习平台，具有良好的可维护性和可扩展性［8］，不仅方便教师教学使用，更利于学员自主学习． 基于真实船舶视景建立的漫游系统，让未接触过船舶或较少机会接触船舶的学生以浸入式的浏览方式身临其境地感受其内部空间的各种设备与系统． 与此同时，多套不同船型的船舶场景、交互式的操作界面、沉浸式的浏览体验，使得船舶的认知学习不再枯燥乏味，具有实际的推广与应用价值．

　　参考文献
　　［1］ TONDEUR P，WINDER J． Papervision3D Essentials［M］． UK: Packt Publishing，2009．
　　［2］ 陈宁，龚苏斌． 基于 PV3D 的全景漫游关键技术研究［J］． 系统仿真学报，2013，25( 9) : 2140 －2143．CHEN Ning，GONG Subin． Research of key techniques of panorama roaming based on PV3D［J］． Journal of SystemSimulation，2013，25( 9) : 2140 － 2143． ( in Chinese)
　　［3］ 李卫，袁铭． Flash Papervision3D 中 3D Web 应用程序设计［J］． 现代电子技术，2012，35( 21) : 89 －92．LI Wei，YUAN Ming． Design of 3D Web applicationprogram for Flash Papervision3D［J］． Modern Electron-ics Technique，2012，35( 21) : 89 － 92． ( in Chinese)
　　［4］ GRAHAM R，AMIN A，PHILLIP B． Developing un-derstanding of programming principles using Flash Ac-tionscript［J］． ITALICS，2007，6 ( 4) : 51 － 71．
　　［5］ 林庆，朱翠苗，郑广成，等． 基于 ASP． NET 的 MVC 设计模式的研究［J］． 计算机工程与设计，2008，29( 1) : 167 －169．LIN Qing，ZHU Cuimiao，ZHENG Guangcheng，et al．Study on MVC design pattern in ASP． NET［J］． Com-puter Engineering and Design，2008，29( 1) : 167 － 169．( in Chinese)
　　［6］ SANDERSON S． Pro ASP． NET MVC 3 Framework ［M］． US: Apress，2011．
　　［7］ GALLOWAY J，HAACK P，WILSON B． Professional ASP． NET MVC 4［M］． UK: Wrox Press，2012．
　　［8］ 黄胜根，陈蜀宇． 基于 ASP． NET MVC 框架的干教系统的设计与实现［J］． 计算机技术与发展，2010，20( 2) : 190 －193．HUANG Shenggen，CHEN Shuyu． Design and imple-mentation of education management system based on ASP． NET MVC［J］． Computer Technology and Devel-opment，2010，20( 2) : 190 － 193． ( in Chinese)