基于Threejs技术的虚拟校园设计与实现.docx

1、硕士学位论文（专业学位）论文题目：基于Threeis技术的虚拟校园设计与实现作者姓名：王芳芳专业学位类别:工程硕士专业学位领域:计算机技术研究方向：虚拟现实指导教师：厉小军提交日期：2017年4月万方数据基于Threejs技术的虚拟校园设计与实现摘要虚拟现实(VR)技术是时下最流行最受关注的前沿科技之一， VR技术也称灵境技术或人工环境，其是集合仿真技术、计算机图形 学、人机接口技术、多媒体技术传感技术以及网络技术等多种领域 技术而开发的一种计算机仿真系统，能够创建并让用户感受到原本 只有在真实世界才会拥有的体验。本文主要是研究虚拟现实技术应用3D虚拟校园的构建，为用户 创建一个可以足不出户就

2、可以了解校园的地理信息与文化背景的虚 拟平台，并在此基础上扩展了校园常用的业务功能：用户只需通过 鼠标既可了解每幢建筑物的房间分布情况，每间教室的座位数、状 态信息，同时实现了进入教室，查看布局、课表查询、预约教室等 功能。虚拟校园平台的构建既有助于提升学校形象，扩大学校声 望，为学校提供一个更好的宣传展示的平台，也可以为用户提供一 个更为开放的信息共享平台。本文主要使用HTML5和Threejs技术来实现虚拟校园场景的构建, 使用3D Max建模软件为虚拟校园制作出3D模型，通过格式的转换， 加载到Threejs构建的场景中，然后再为虚拟校园添加了多种交互功 能，以便更好的展现学校的地理与文

3、化背景。本文为了使用户有更好的体验，设计了两种虚拟校园漫游的模式，一种是使用鼠标对虚拟校 园场景进行旋转、平移和缩放，给用户一个可以掌控虚拟校园全局的 视角，另一种则是控制机器人行走在虚拟校园场景中，让用户通过机 器人的视角浏览虚拟校园的每-处风景。构建好虚拟场景，实现基础 功能以后，再为虚拟校园扩展业务功能，提供数据接口，丰富虚拟校 园的功能，提高实用性。使用HTML5和Threejs技术构建的虚拟校园具有更好的兼容性、 稳定性、画面渲染速度快，且具有非常棒的跨平台特性。电脑、平板、 手机，只要拥有支持HTML5的浏览器即可访问虚拟校园。关键字：虚拟现实技术；VR,虚拟校园；3D建模;HTM

4、L5； ThreejsDESIGN AND IMPLEMENTATION OFVIRTUAL CAMPUS BASED ON THREEJSABSTRACTVirtual reality (VR) technology is one of the frontiers of science and technology nowadays. Its very popular and receives the attention. Also known as artificial environment, its definition is a set of computer simulation

5、technology, computer graphics, human-computer interface technology, multimedia technology, sensor technology and network technology in various fields of technological progress, to create and let the user feel that only in the real world can experience.The main topic is the research on the constructi

6、on of 3D virtual campus, which is an important application field of virtual reality technology, creating virtual platform for the user can stay at home to know the campus geographic information and cultural background. The construction of virtual campus platform helps to improve the image and expand

7、 the reputation of school, and to provide school a better platform for publicity and presentation.HTML5 and Threejs technology is mainly used to implement the construction of virtual campus scene in this paper, using 3D Max modeling software to produce 3D model fbr virtual campus, through format con

8、version, loaded into Threejs to build the scene, and then add a lot of virtual campus interactive function, in order to show the geographical and cultural background of school better. In order to make the users have a better experience, this paper designed two kinds of virtual campus roaming modes,

9、one kind of virtual campus scene rotation is translation and zoom with the mouse that can make users control the virtual campus global perspective, another is to control the machine people walking in the virtual campus scene. Every view allows users to browse through the perspective of the robofs vi

10、rtual campus.Using HTML5 and Threejs technology to build a virtual campus with better compatibility, stability, rendering speed, has a very good cross platform. Computers, tablets and mobile phones can visit virtual campus by HTML5-supported browser.KEYWORDS: virtual reality; VR; virtual campus; HTM

11、L5; Threejs目录摘要 IABSTRACTIll1 1 11 2 夕卜犬. 1第2章系统的开发平台简介32.1虚拟现实技术的介绍32. 2系统开发.32 21HTML52 22WebGL.4223Threejs第3校园开发的理论与 , 63. 1虚拟校园场景构建的原理63. 1.1 (Scene)63 1 2 (Cdinera) 63. 1.5 (Renderer).931 6 (Control s)， 3 2 341 |*bj| .153. 4 2简介模型面数153 4 3贴图优化163. 5碰撞检测技术164 J企才以白勺 184， 3养王 .19第 5 章 园场景的构 245.

12、1 基础 拟场景的建( 245. 2加载3D模型与视频播放器275. 3 用户与景的325, 4本章小结36第6虚拟校园浸游的实现 376.1 的376.3两种漫游模式的g换386.4虚拟校园业务扩展386. 4. 1建筑物内部房间状态的显示396. 4 2参观教室的内部模型396. 4. 3教室课表的查询与预约功能4064. 416. 5 426. 6 本章小结 44第7章 总结与展望467.2展望46参考文献48附录50致谢51独创性声明52第1章绪论1.1研究背景与意义随着科学技术的不断发展，计算机、平板、手机等智能设备的日渐普及，网 络的迅猛飞速地发展。传统的文字、图片等交互方式己经越

13、来越无法满足用户的 需求，更好的沉浸式与更多的交互体验成了未来的必然趋势。而虚拟现实技术的 发展就是必然的结果。虚拟现实技术（VR技术）是通过计算机设备将多媒体技 术、计算机图形学技术以及仿真技术的融合应用,构建一个虚拟仿真的3D世界， 从而让用户产生身临其境的感觉。VR技术主要包含多感知性、沉浸性、构想性以及交互性四个特征，既能使 用户通过外部的摄入设备与虚拟场景进行交互，也能让用户产生身临其境的体验, 激发人类的想象力与创新性思维。VR技术在教育、军事、医学、工程等社会生活的各个领域都己有广泛的应 用，尤其在教育方面上效果是非常显著的。随着VR技术的蓬勃发展，虚拟校园作为VR技术的一个重要

14、应用领域，也 越发的欣欣向荣。虚拟校园技术主要融合了 VR虚拟现实技术、计算机网络技术、 地理信息技术等，对校园地理信息、校园景观、与历史文化等进行数字化处理， 构件仿真的虚拟校园。同时也可以为虚拟校园扩展更多的业务功能，将知识、信 息以更形象、更多维、更生动的形式传输给用户。虚拟校园通过VR技术将学校的地理信息与内在的历史文化相结合，让用户 足不出户就可以了解校园的基本信息，了解校园的悠远历史文化，为学校树立良 好的形象，提高学校的知名度，还可以为未来的校园决策提供一个平台。目前， 虚拟校园己成为国内外各大高校大力建设的基础信息平台。1.2国内外研究现状美国对于VR技术的研究开展的最早，研究

15、的领域飞最为广泛。在虚拟校园 这一领域，国外虚拟校园己实现了虚拟化，美国圣何塞州立大学在虚拟世界平台 “第一人生”建立了虚拟校园，学生可以在虚次校园中学习，观摩实验，教师也 可以通过虚拟校园对学生进行辅导。通过虚拟校园让学生更有现场感。我国对于VR技术的研究目前还处于探索与技术跟踪阶段，部分高校也建立 了虚拟校园。香港理工大学同样也构建了一套完善的虚拟校园系统，主要集成了 电子地图、学校数据库，使得用户可以通过计算机设备浏览校园虚拟场景、进行 网上办公、查披数字图书馆等功能。而清华大学构建的虚拟校园系统更是实现了 虚拟深堂等功能。国内各大高校，近几年纷纷搭建了 3D虚拟校园。然而R靛更 多的虚

16、拟校园都只是一种全景图模式，画面不够清晰，画面切换不够自然，很容 易使用户晕头转向，不知身在何处。现有系统体验效果比较差，对外扩展的业务 功能几乎没有，大大的缺少了实用性。1.3本文组织结构本论文是在虚拟现实技术和目前的网络标准背景下，制作了基于 HTML5+Threejs技术实现虚拟校园仿真系统，从而实现了只需要浏览器即可的 跨平台漫游的虚拟校园仿真系统。本文共分为以下几个部分：第1章：“绪论”。本章主要介绍本论文的研究背景和意义，国内外虚拟现实 技术和虚拟校园的现状与不足之处，并介绍了本论文的整体思路。第2章：“系统开发平台简介”。本章主要介绍了虚拟现实技术的概念与理论, 以及开发虚拟校园

17、所选择的工具介绍。第3章：“虚拟校园的理论与技术”。本章主要介绍构建虚拟校园所需的基本 原理与知识，同时还介绍在构建虚拟校园过程中需要用到的关键技术的理论与实 现过程。第4章：“虚拟校园的设计”。本章主要对虚拟校园进行需求分析，介绍系统 开发的软硬件平台，同时对虚拟校园的系统流程进行了模块化没计，同时为虚拟 校园的场景进行模块化分层设计。第5章：“虚拟校园场景的构建”。本章主要介绍了虚拟校园的构建全过程, 3D模型的创建、格式的转换与模型的导入，还介绍了与虚拟校园互动功能的实 现。第6章：“虚拟校园漫游的实现”。本章主要介绍虚拟校园漫游的两种模式的 实现，通过漫游功能，将学习的历史文化，与基本

18、信息相结合，实现虚拟校园与 用户的交互功能，并扩展了虚拟校园的业务功能。第7章：“总结与展望”。本章主要是对本论文进行总结概括，并提出本文的 不足之处，明确未来的研究方向。第2章系统的开发平台简介2.1虚拟现实技术的介绍虚拟现实技术(VR技术)就是使用计算机构建一个仿真的虚拟世界，是多 种技术的融合，并具有交互性，从而让用户产生沉浸式体验的技术。VR技术主要包含多感知性、沉浸性、构想性以及交互性四个特征，既能使 用户通过外部的摄入设备与虚拟场景进行交互，也能让用户产生身临其境的体验, 激发人类的想象力与创新性思维。VR技术在教育、军事、医学、工程等社会生活的各个领域都己有广泛的应 用，尤其在教

19、育方面上效果是非常显著的。本文主要研究虚拟场景的构建。在构建虚拟校园的过程中，本文用到了以下 几种开发工具。2. 2虚拟现实系统开发工具2. 2.1 HTML5 简介HTML5是万维网的核心语言、标准通用标记语言下的一个应用超文本标记 语言(HTML)的第五次重大修改。HTML5的主要特性有：语义特性(Class： Semantic)： HTML5提供了庞大的标签库，通过使用这些 标签，用户可以更细致的描述文档结构，让文档更容易理解，搜索引擎也可以更 快的解析，通过搜索引擎我们可以更容易的搜多到更准确的信息本地存储特性(Class: Offline & Storage)： HTML5提供了具有

20、持久化的本地 存储，HTML5可以在不影响网站性能的情况下存储大量的数据，只有在请求时 才会使用数据。不需要向每个服务器进行请求传递。极大的提高了网站的使用效 率。设备兼容特性(Class: Device Access)： HTML5为用户提供了更多的数据与 应用接入的开放接口，使得外部应用更容易与浏览器内部的数据进行直接相连。 并且也为用户提供了更多的体验与优化。连接特性(Class: Connectivity)： HTML5具有更有效的连接工作效率，让用 户能实现基于页面的实时聊天，更快的网页交互体验，HTML5具有更有效的服 务器推送技术，能实现服务器对客户端进行数据推送的功能。网页多媒

21、体特性(Class: Multimedia)： HTML5新增了 Audio和Video标签， 这些标签让我们可以非常方便的处理音频和视频文件。三维、图形、特效特性(Class: 3D, Graphics & ESects)： SVG,Canvas, WebGL、 CSS3可以绘制3D图像，给用户更流畅的视觉效果，更为其实的体验。性能、集成特性(Class: Performance & Integration)： HTML5 通过 XML Http Request 2等技术，解决以前的跨域问题，帮Web应用和网站在多样化的环境中 更快速工作，用户不需要等待网页加载结束，即可查看大部分内容。CS

22、S3特性(Class: CSS3)： CSS3为HTML5提供了更多的风格，更高的灵活 性与控制性，让HTML5的排版与显示效果更强大。2. 2. 2 WebGL 简介webGL (Web GraphicsLibrarjO是-套免费、跨平台的API,可以在Web页 面上绘制3D图形或动画的API,继承于0penGL ES 2.0标准，可以运行在任意 的操作系统上，支持手机、平板、电脑等各种智能设备。WebGL是通过JavaScript编程接口的调用，在HTML的Canvas中实现3D 内容的绘制渲染。用户通过浏览器可以更流畅的观察3D模型与虚拟场景甚至于 3D网页游戏等。WebGL同时也解决了

23、与3D场景的交互问题，无需任何插件即可使用浏览 器绘制3D动画并与之进行交互，同时也通过统一标准的跨平台OpenGL接口实 现图形的渲染。2. 2. 3 Threejs 简介Three.js 是一个 3D JavaScript 库，作者是巴塞罗那的 Ricardo Cabello Miguels, 又称Mr.doob, Threejs对于大多数软件以及浏览器具有很好的交互性和兼容性， 主要是因为它是WebGL的一个第三方库，并对WebGL进行底层的图形封装， 即只需使用相对于WebGL来说少量的代码即可实现相同的功能。从而极大的提 高了开发的效率，减少时间成本。并且Threejs使用JavaS

24、cript语言进行编译。 Threejs是一个非常小的轻量级引擎，但却具有非常强大的3D渲染功能。Threejs 提供了一套简易且直观的创建3D图形中常见物体的方案，它使用了许多优秀的 图形引擎技术，处理速度非常快，同时内置了很多类型的对象与工具，可以用于 游戏的开发、数据可视化、模型加载以及特殊效果的渲染机制等。Three.js良好的兼容性使WebGL可以实现的功能Tliree.js也基本完全可以实 现，即使少部分无法实现，或者一些细节的调整Three.js无法做到，也完全可以 使用WebGL直接进行编译，不用担心产生冲突。2. 2.4 3D MAX 简介3D MAX是由Autodesk公司

25、开发的软件，这款软件是基于PC操作系统的 的3D动画渲染和制作软件，目前最为广泛应用并且销售量最大的建模软件，主 要应用于游戏、动画以及模型制作的领域-3DMAX对于电脑的硬件要求并不高, 市面上关于3D MAX的教程非常丰富，让用户更容易掌握软件的应用，所以一 般来说3D MAX是用户的首选。3D MAX在建筑与工业制图方面是非常专业的工具，无论是室内建筑的装饰 效果图，还是室外建筑设计效果图，3D MAX强大的功能和灵活性都是事先创造 力的最佳选择。2. 3本章小结本章主要介绍了虚拟现实的概念以及现状，开发实现虚拟场景的主要开发工 具，IITML5、WebGL、Threejs和3D MAX

26、四大工具的概念、特性、及其在本文 中起到的作用。第3章虚拟校园开发的理论与技术3.1虚拟校园场景构建的原理一个完整的虚拟现实的场景主要包括以下元素：1. 场景(Scene)：是物体、光源等元素的容器。2. 相机(Camera)：控制视角的位置、范围以及视觉焦点的位置，一个3D环 境中只能存在一个相机。3. 物体对象(Mesh)：包括二维物体(点、线、面)、三维物体、粒子。4. 光源(Light)：包括全局光、平行光、点光源。5. 渲染器(Renderer):指定渲染方式，如 WebGL、canvas2D、Css2D、Css3D 等。6. 控制器(Control):相机控件，可通过键盘、鼠标控制

27、相机的移动。3.1. 1 场景(Scene)物体、光源、控制器的添加必须使用secen.add(object)添加到场景中才能渲 染出来。一个3D项目中可同时存在多个scene,例如将3D环境中的各个物体分组后 以scene来控制其位置旋转等，从而控制scene中所有的元素随着scene移动或 旋转。3.1.2 相机(Camera)图形学中的照相机定义了三维空间到二维屏幕的投影方式，就是决定哪些东 西将要在屏幕上渲染。针对投影方式，Threejs有两种不同的相机：正交投影相机和透视投影相机。举个简单的例子来说明正交投影相机与透视投影相机的区别。使用透视投影 相机获得的结果是类似人眼在真实世界中

28、看到的有“近大远小”的效果(如图3- 1 )；而使用正交投影相机获得的结果就像我们在数学几何学课上老师教我们画的 效果，对于在三维空间内平行的线，投影到二维空间中也一定是平行的(如图3- 2)o因为透视投影相机更贴近真实世界，所以本文使用的是透视投影相机。图3-1正交投影图3-2透视投影透视相机的原理如图3-3,包括：Fov：垂直方向夹角Aspect：可视区域长宽比width/heightNear：渲染区域离摄像机最近的距离，即近平面与相机中心点的垂直距离。 Far：渲染区域离摄像机最远的距离，即元平面与相机中心点的垂直距离。. 仅在距离摄像机near和far间的区域会被渲染到canvas中。14万方数据透视图侧视图图3-3透视相机的原理图3.1.3 物体(Mesh)物体就是在相机透视图里主要的渲染对象：房子、植物、地面等等。一个完 整的物体对象(mesh)包括材质(Material)和形状(Geometry)Threejs包含很多种材质类型，这里主要介绍一些基础和本课题将会使用的 材质特性。MeshBasicMater