吕杰英

摘 要：全景漫游技术是一种基于图像绘制的虚拟现实技术，在“互联网+”的环境下，其良好的交互性和沉浸性，已逐渐在旅游景点虚拟漫游、房产建筑实景展示、文化教育场所三维呈现等领域得到应用。文章以实现杭州轻工技师学院装潢实训工场的全景漫游为例，介绍在全景图的基础上，结合Web标准HTML5和3D绘图标准WebGL，使用第三方库文件Three.js，达到场景水平和垂直方向的自由转换，使用户在网上就能观看实训基地的全景效果，具有身临其境的感觉。

关键词：虚拟漫游；全景图；WebGL；Three.js

中图分类号：G434 文献标志码：A 文章编号：1673-8454（2016）18-0078-03

一、引言

“互联网+”是创新2.0下互联网发展的新业态，是利用信息通信技术以及互联网平台，让互联网与传统行业进行深度融合，创造新的发展生态[1]。在“互联网+”的各个领域中，最基础、发展最快的就是Web的应用，人们不再满足于二维平面的网络体验，而是希望在访问网页的过程中具有更鲜活的场景和更真实的感受。网页正逐渐向交互式三维模式发展，其中全景漫游技术已逐渐在旅游景点虚拟漫游、房产建筑实景展示、文化教育场所三维呈现等领域得到应用。

但是，早期的网页三维技术如Java Applet并未成熟，不仅编程接口复杂，需要安装相应的渲染插件，而且创建的页面交互性能简单，画面质量相对粗糙，其主要原因就在于Java Applet在进行图形渲染时，并没有直接利用到图形硬件本身的加速功能[2]。而3D绘图标准WebGL则采用JavaScript脚本语言进行友好的交互式三维图形的描述，较好地避免了在浏览器上安装相应插件的步骤。同时，通过统一的跨平台图形程序接口OpenGL ES2.0，实现了利用底层图形硬件进行图形渲染。

二、 关键技术

1.HTML5标准及canvas标签

HTML5标准规范的出现，为多媒体在各种终端设备上的加载提供了新的支持。简单说来，HTML5其实可以看成是HTML、CSS、JavaScript等技术的组合体，该标准在原有的基础上，增加了本地存储、设备兼容、三维图形及特效等新的特性。本文主要利用的是canvas标签，它为网页提供了更绚丽的视觉体验，具备直接在浏览器上绘制矢量图的能力。

Canvas就像是一个画板，所有的绘制工作可以在 JavaScript 内部完成，通过id的调用来寻找canvas元素，从而创建context 对象。context对象是内建的HTML5对象，拥有多种绘制路径、矩形、圆形、字符和插入图像的方法。

2.3D绘图标准WebGL

WebGL是一种3D绘图标准，它实现了将JavaScript和OpenGL ES 2.0有效结合在一起，通过增加OpenGL ES 2.0的JavaScript绑定，为HTML5中的canvas标签提供底层硬件的3D加速渲染，这样开发人员就可以直接通过系统显卡在普通浏览器中展示全景漫游，还能创建复杂的导航和数据视觉化[3]。由此可见，WebGL标准脱离了传统三维网页制作所需的专用插件渲染，大大提高了不同终端设备的3D图形渲染速度，甚至可以用来设计3D网页游戏等。目前已有多种基于WebGL技术的JavaScript库被应用在3D图形创建中，如SceneJS、PhiloGL、Babylon.js、Three.js等，本文主要应用Three.js开发框架。

3.Three.js框架

Three.js是JavaScript编写的WebGL第三方库，依据WebGL规范，对底层的图形接口进行封装。它提供了一个JavaScript API，可以在没有插件的情况下进行2D/3D硬件加速渲染，减轻了开发者的负担并加快了开发速度。同时，Three.js还支持多种渲染器（renderer）进行场景制作，能够提供点、线、面、向量、矩阵等一系列三维创建时所需的基本元素，并可以便捷地将建镜头（cameras）、光线（lights）、物体（objects）等对象添加到场景（scene）中[4]。Three.js在全景漫游浏览时，与内部主要元素之间的关系如图1所示。

三、漫游系统的构建

1.全景图获取

在网页上展示虚拟漫游的效果时，一般有3D建模和全景摄影两种方式。由于全景图片直接由实物拍摄得到，因此，只要做好前期拍摄和后期图片处理，就能得到比建模更真实的视觉感受。本文所得到的虚拟漫游，就是在全景图的基础上实现的。

（1）全景图的拍摄

由于全景拍摄需要捕捉场景360°范围内的信息，因此要采用广角镜头来拍摄，甚至可以使用鱼眼镜头。但由于鱼眼镜头镜片结构复杂，边缘和中央进光存在差异，对使用者的技术水平要求比较高，因此这里所采用的是一般的广角数码相机，同时配合三脚架和云台，以保证拍摄时位置的水平。在每个场景的拍摄中，将云台设定为水平方向每60°为一个结点，垂直方向每30°为一个结点，以保证所得的照片中有至少20%的重叠量，一共拍摄3组，每组6张照片。

而对于环境的要求则是能见度高、光线充足，避免出现一亮一暗的场景。在进行室内拍摄时，一般以内部光照为主，如果室外光线过于明亮，就可能导致图中出现较多过暗的角落，影响拼接效果。全景拍摄需要表现场景的全局信息，考虑到在观看时需要旋转场景，因此拍摄点一般选在场景的几何中心或某个较高位置，同时避免在拍摄时镜头里包含运动物体。

（2）全景图的拼接

在得到场景图后，可以使用Photoshop、PhotoImpact、Fireworks等图像处理软件对它们进行去噪、杂色处理和色彩色调等相关调整，使得同一场景的曝光程度和色彩浓度基本保持一致。本文所采用的图像处理软件是Photoshop CS3，同时该软件能智能化地完成全景图的拼接，步骤依次为选择文件菜单、自动、photomerge（照片拼合）。最后使用变形工具和裁剪工具把完整部分切割出来，装潢实训工场的全景图如图2所示。

2.三维环境的设置

（1）镜头设置

最终实现的装潢实训工场全景漫游如图3所示。

四、结束语

本文介绍了基于装潢实训工场全景图的虚拟漫游实现技术，采用HTML5和WebGL相结合的模式，创建出具有良好交互性和沉浸性的三维网页效果，提供了较二维网页更友好的用户体验和形象生动的画面效果。WebGL 是新一代Web3D 技术，也是未来三维网页开发的核心技术，加之与规范的Web标准HTML5的紧密配合，必然成为三维网页应用的趋势。同时对第三方库文件Three.Js进行研究分析，实现了全景图的仿真视角和相关鼠标事件的操作，具有较强的应用价值。

参考文献：

[1]百度百科.“互联网+”[DB/OL].http：//baike.baidu.com/link？url=z3Tj1V657OaXjPEIhtH1wXaUC7_sfIz 6udmtmknF _XSljkJpo_YZkq674SElGIhISv3-RHn9h7 lTZGD85xE-J_.

[2]方强.基于WebGL 的3D图形引擎设计与实现[D].合肥：安徽大学，2013.

[3]百度百科.”OpenGL ES” [DB/OL].http：//baike.baidu.com/link？url=P0fvVPhRHIQ4Z7Af8w1YyYXa4IePYK45dQ4XL3iCD012kn-AE5Tm2lLyoLH5Iq6ut FGM2jFGM8cwoIecEv9s3a.

[4]许虎，聂云峰，舒坚.基于中间件的瓦片地图服务设计与实现[J].地球信息科学学报，2010（4）：562-567.

[5]刘爱华，韩勇等.基于WebGL技术的网络三维可视化研究与实现[J].地理空间信息，2012（5）：79-81.

[6]周辉，程陈，任海军，王丹宁等.基于HTML5的全景图展示[J].微型机与应用，2012（20）.

（编辑：鲁利瑞）

2.基于微信公众平台的碎片化知识针对性强，但是却缺乏适用性

微信公众平台根据我们的兴趣推送了相应的学习内容之后，这种内容很符合我们的需求，但是却缺乏实际情境的验证。它仅仅是一种问题的单一解决方法，如果迁移到其他情境中就无法适用。比如：我们在学习操作性的知识时，它是必须要结合实践进行的，而碎片化知识只能知道问题解决的方法，却不知道问题的原因，在实际解决时，我们又不知道怎样办。

3.微信公众平台缺乏多样的交互

虽然微信公众平台可以根据关键词进行回复，但是这种回复是不是学习者想要的答案或者对学习者有没有用处，这些都是未知的。另一方面，微信公众号在推送了相应的学习内容之后，学习者是否有效地阅读，或者学习者在阅读了相应的学习内容之后，无法直接进行提问，也得不到针对性的解答。

五、思考与建议

微信公众平台在为碎片化学习提供支持之外，也存在一些问题。但是并不能因为存在问题我们就要拒绝这些碎片化知识。因此怎样把这些碎片化知识建构到自己的知识体系，与已有知识之间建立联系就显得至关重要。

1.建立碎片化学习体系是基础

我们在接受碎片化知识时除了要系统地学习、思考、分析之外，最重要的是找到一个自己感兴趣的知识点，以此为根节点，不断扩充其分支。也就是说要建立一个系统的知识体系。或者将这些知识点纳入到自己已有的知识体系中，找到它们之间的联系。

2.“思维导图”就是一种将放射性碎片化思考具体化的方法

研究表明，思维导图的建立有利于人们对其思考的问题进行全方位和系统的描述与分析。同时它又是灵活的，个性化的，具有无限的发展性的，这些特点非常符合碎片化学习的特征，因此对于碎片化思考具体化它是一个很有效的方法，同时，它有助于提高学习者的学习能力，有助于一个学习者真正实现终身学习的目标。现在随着移动技术的发展，手机端也有很多使用方便的软件，比如：极品思维导图、思维简图等等，它们可以结合微信公众号进行使用。

3.检验和输出是完善碎片化学习知识体系最关键的环节

在建立相应的知识体系之后，并不是所有的碎片化知识都能纳入其中，我们需要对这些知识进行检验，也就是说，我们要弄清楚它与已有知识之间的联系，如果联系不大或者它根本没有价值，我们要果断舍弃。而对于输出，即碎片化知识的巩固和迁移，其中最简单的方法就是，可以将碎片化知识进行转述给其他人，或者将借助一些外部工具做笔记，建立思维导图等等。

碎片化学习作为非正式学习的一种，它不仅仅只可以通过微信公众平台获得，还有很多其他途径，但是它的特点和利弊都普遍存在，我们一定要理性辩证地思考它的利弊，合理检验与输出，从而真正实现随时随地的碎片化学习。

参考文献：

[1]顾小清.超越碎片化学习——语义图示与深度学习[J].中国电化教育.2015（3）.

[2]王竹立.零存整取：网络时代的学习策略[J].远程教育杂志，2013（3）.

[3]朱学伟，朱昱，徐小丽.基于碎片化应用的微型学习研究[J].现代教育技术，2011（12）.

[4]王承博，李小平，赵丰年，张琳.大数据时代碎片化学习研究[J].电化教育研究，2015（10）.

[5]柳玉婷.微信公众平台在移动学习中的应用研究[J].软件导刊，2013（10）.

[6]张志辉，彭立，王宏艳，公海霞.基于微信的非正式学习的应用研究[J].软件导刊.2015（7）.（编辑：郭桂真）