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

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

《基于Threejs技术的虚拟校园设计与实现.docx》由会员分享，可在线阅读，更多相关《基于Threejs技术的虚拟校园设计与实现.docx（37页珍藏版）》请在冰点文库上搜索。

硕士学位论文

（专业学位）

论文题目：

基于Threeis技术的虚拟校园设计与实现

作者姓名：

王芳芳

专业学位类别:

工程硕士

专业学位领域:

计算机技术

研究方向：

虚拟现实

指导教师：

厉小军

提交日期：

2017年4月

万方数据

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

摘要

虚拟现实（VR）技术是时下最流行最受关注的前沿科技之一，VR技术也称灵境技术或人工环境，其是集合仿真技术、计算机图形学、人机接口技术、多媒体技术传感技术以及网络技术等多种领域技术而开发的一种计算机仿真系统，能够创建并让用户感受到原本只有在真实世界才会拥有的体验。

本文主要是研究虚拟现实技术应用3D虚拟校园的构建，为用户创建一个可以足不出户就可以了解校园的地理信息与文化背景的虚拟平台，并在此基础上扩展了校园常用的业务功能：

用户只需通过鼠标既可了解每幢建筑物的房间分布情况，每间教室的座位数、状态信息，同时实现了进入教室，查看布局、课表查询、预约教室等功能。

虚拟校园平台的构建既有助于提升学校形象，扩大学校声望，为学校提供一个更好的宣传展示的平台，也可以为用户提供一个更为开放的信息共享平台。

本文主要使用HTML5和Threejs技术来实现虚拟校园场景的构建,使用3DMax建模软件为虚拟校园制作出3D模型，通过格式的转换，加载到Threejs构建的场景中，然后再为虚拟校园添加了多种交互功能，以便更好的展现学校的地理与文化背景。

本文为了使用户有更好

的体验，设计了两种虚拟校园漫游的模式，一种是使用鼠标对虚拟校园场景进行旋转、平移和缩放，给用户一个可以掌控虚拟校园全局的视角，另一种则是控制机器人行走在虚拟校园场景中，让用户通过机器人的视角浏览虚拟校园的每-处风景。

构建好虚拟场景，实现基础功能以后，再为虚拟校园扩展业务功能，提供数据接口，丰富虚拟校园的功能，提高实用性。

使用HTML5和Threejs技术构建的虚拟校园具有更好的兼容性、稳定性、画面渲染速度快，且具有非常棒的跨平台特性。

电脑、平板、手机，只要拥有支持HTML5的浏览器即可访问虚拟校园。

关键字：

虚拟现实技术；VR,虚拟校园；3D建模;HTML5；Threejs

DESIGNANDIMPLEMENTATIONOF

VIRTUALCAMPUSBASEDONTHREEJS

ABSTRACT

Virtualreality（VR）technologyisoneofthefrontiersofscienceandtechnologynowadays.It'sverypopularandreceivestheattention.Alsoknownasartificialenvironment,itsdefinitionisasetofcomputersimulationtechnology,computergraphics,human-computerinterfacetechnology,multimediatechnology,sensortechnologyandnetworktechnologyinvariousfieldsoftechnologicalprogress,tocreateandlettheuserfeelthatonlyintherealworldcanexperience.

Themaintopicistheresearchontheconstructionof3Dvirtualcampus,whichisanimportantapplicationfieldofvirtualrealitytechnology,creatingvirtualplatformfortheusercanstayathometoknowthecampusgeographicinformationandculturalbackground.Theconstructionofvirtualcampusplatformhelpstoimprovetheimageandexpandthereputationofschool,andtoprovideschoolabetterplatformforpublicityandpresentation.

HTML5andThreejstechnologyismainlyusedtoimplementtheconstructionofvirtualcampussceneinthispaper,using3DMaxmodelingsoftwaretoproduce3Dmodelfbrvirtualcampus,throughformatconversion,loadedintoThreejstobuildthescene,andthenaddalotofvirtualcampusinteractivefunction,inordertoshowthegeographicalandculturalbackgroundofschoolbetter.Inordertomaketheusershaveabetterexperience,thispaperdesignedtwokindsofvirtualcampusroamingmodes,onekindofvirtualcampusscenerotationistranslationandzoomwiththemousethatcanmakeuserscontrolthevirtualcampusglobalperspective,anotheristocontrolthemachinepeoplewalkinginthevirtualcampusscene.Everyviewallowsuserstobrowsethroughtheperspectiveoftherobofsvirtualcampus.

UsingHTML5andThreejstechnologytobuildavirtualcampuswithbettercompatibility,stability,renderingspeed,hasaverygoodcrossplatform.Computers,tabletsandmobilephonescanvisitvirtualcampusbyHTML5-supportedbrowser.

KEYWORDS:

virtualreality;VR;virtualcampus;HTML5;Threejs

目录

摘要 I

ABSTRACT Ill

11 • ••••••••••••••••••••••••••1

1•2夕卜犬・・・•・•・••・・・・・•・•・・・・・・•・・・・・・・・・・•・•・・••・•••••・••・.・•・••・••・•・・••・・.•.・..••・••・・.・♦•・••••••••••••••••••••••1

第2章系统的开发平台简介 3

2.1虚拟现实技术的介绍 3

2.2 系统开发..........••♦•.............................••....•...3

22 1 HTML5

22・ 2 WebGL .・....•..•...4

2・ 2・ 3 Threejs

第3 校园开发的理论与•••••••••••••••••••••••••••••••••••,, 6

3.1虚拟校园场景构建的原理 6

3.1.1（Scene） 6

3・1♦2（Cdinera）«••••••«••■••••••■•■•••••••••••••••••••••••••••••»••••••••••••••••••••»•••••«••••••••••••••••••••«6

3.1.5（Renderer）................................................. 9

3・1•6（Controls）・・・・••・•••・•••・•・・，・♦・・・•・・••・・・・・・・・・・•・・・•・・•••••••••••••••••・・•

32 •••••・・・・・・・・・•・・・・・・・•・・・•・・・・・・•・・・・・・•・•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••«•••••••

3・4・1|*bj|•••・•••・••・・•••・••••・・•・・••・・•••・・・・・•・・•・・・・•・・•・・・・・••・•••・•••••・•••••••••••••・・・・•・.•••••.・•・•・・・15

3.42简介模型面数 15

343贴图优化 16

3.5碰撞检测技术 16

4J♦企才以白勺•・・••・•••••••••••••・••••••••・・・•・・・・・・••・・•・•・・・•・•・・・・・•・・•••・••••••••••••••••••••••••• 18

4，3 养王••■••••••••••••••••••••••••••••••••••••••••••••••■•••••••••••••••■•>••■•«•«••••••■•••■•••••••••••••••••...19

第5章园场景的构 24

5.1基础拟场景的建•••••••（■•（••••••••■••••••••••••••••••••••••••••••••••••••••••"••• 24

5.2加载3D模型与视频播放器 27

5.3用户与景的32

5,4本章小结 36

第6 虚拟校园浸游的实现 37

6.1的 37

6.3两种漫游模式的g换 38

6.4虚拟校园业务扩展 38

6.4.1建筑物内部房间状态的显示 39

6.42参观教室的内部模型 39

6.4.3教室课表的查询与预约功能 40

6・4. ・•.••・•••・・・•・・••.••・•・・・・・••••・•・•・.•••••••・•・•・・・・・••••••・・•・・・・・•・・•••••••・・・・•••・•••・・・・・•・••41

6.5 42

6.6本章小结 44

第7章总结与展望 46

7.2展望 46

参考文献 48

附录 50

致谢 51

独创性声明 52

第1章绪论

1.1研究背景与意义

随着科学技术的不断发展，计算机、平板、手机等智能设备的日渐普及，网络的迅猛飞速地发展。

传统的文字、图片等交互方式己经越来越无法满足用户的需求，更好的沉浸式与更多的交互体验成了未来的必然趋势。

而虚拟现实技术的发展就是必然的结果。

虚拟现实技术（VR技术）是通过计算机设备将多媒体技术、计算机图形学技术以及仿真技术的融合应用,构建一个虚拟仿真的3D世界，从而让用户产生身临其境的感觉。

VR技术主要包含多感知性、沉浸性、构想性以及交互性四个特征，既能使用户通过外部的摄入设备与虚拟场景进行交互，也能让用户产生身临其境的体验,激发人类的想象力与创新性思维。

VR技术在教育、军事、医学、工程等社会生活的各个领域都己有广泛的应用，尤其在教育方面上效果是非常显著的。

随着VR技术的蓬勃发展，虚拟校园作为VR技术的一个重要应用领域，也越发的欣欣向荣。

虚拟校园技术主要融合了VR虚拟现实技术、计算机网络技术、地理信息技术等，对校园地理信息、校园景观、与历史文化等进行数字化处理，构件仿真的虚拟校园。

同时也可以为虚拟校园扩展更多的业务功能，将知识、信息以更形象、更多维、更生动的形式传输给用户。

虚拟校园通过VR技术将学校的地理信息与内在的历史文化相结合，让用户足不出户就可以了解校园的基本信息，了解校园的悠远历史文化，为学校树立良好的形象，提高学校的知名度，还可以为未来的校园决策提供一个平台。

目前，虚拟校园己成为国内外各大高校大力建设的基础信息平台。

1.2国内外研究现状

美国对于VR技术的研究开展的最早，研究的领域飞最为广泛。

在虚拟校园这一领域，国外虚拟校园己实现了虚拟化，美国圣何塞州立大学在虚拟世界平台“第一人生”建立了虚拟校园，学生可以在虚次校园中学习，观摩实验，教师也可以通过虚拟校园对学生进行辅导。

通过虚拟校园让学生更有现场感。

我国对于VR技术的研究目前还处于探索与技术跟踪阶段，部分高校也建立了虚拟校园。

香港理工大学同样也构建了一套完善的虚拟校园系统，主要集成了电子地图、学校数据库，使得用户可以通过计算机设备浏览校园虚拟场景、进行网上办公、查披数字图书馆等功能。

而清华大学构建的虚拟校园系统更是实现了虚拟深堂等功能。

国内各大高校，近几年纷纷搭建了3D虚拟校园。

然而R靛更多的虚拟校园都只是一种全景图模式，画面不够清晰，画面切换不够自然，很容易使用户晕头转向，不知身在何处。

现有系统体验效果比较差，对外扩展的业务功能几乎没有，大大的缺少了实用性。

1.3本文组织结构

本论文是在虚拟现实技术和目前的网络标准背景下，制作了基于HTML5+Threejs技术实现虚拟校园仿真系统，从而实现了只需要浏览器即可的跨平台漫游的虚拟校园仿真系统。

本文共分为以下几个部分：

第1章：

“绪论”。

本章主要介绍本论文的研究背景和意义，国内外虚拟现实技术和虚拟校园的现状与不足之处，并介绍了本论文的整体思路。

第2章：

“系统开发平台简介”。

本章主要介绍了虚拟现实技术的概念与理论,以及开发虚拟校园所选择的工具介绍。

第3章：

“虚拟校园的理论与技术”。

本章主要介绍构建虚拟校园所需的基本原理与知识，同时还介绍在构建虚拟校园过程中需要用到的关键技术的理论与实现过程。

第4章：

“虚拟校园的设计”。

本章主要对虚拟校园进行需求分析，介绍系统开发的软硬件平台，同时对虚拟校园的系统流程进行了模块化没计，同时为虚拟校园的场景进行模块化分层设计。

第5章：

“虚拟校园场景的构建”。

本章主要介绍了虚拟校园的构建全过程,3D模型的创建、格式的转换与模型的导入，还介绍了与虚拟校园互动功能的实现。

第6章：

“虚拟校园漫游的实现”。

本章主要介绍虚拟校园漫游的两种模式的实现，通过漫游功能，将学习的历史文化，与基本信息相结合，实现虚拟校园与用户的交互功能，并扩展了虚拟校园的业务功能。

第7章：

“总结与展望”。

本章主要是对本论文进行总结概括，并提出本文的不足之处，明确未来的研究方向。

第2章系统的开发平台简介

2.1虚拟现实技术的介绍

虚拟现实技术（VR技术）就是使用计算机构建一个仿真的虚拟世界，是多种技术的融合，并具有交互性，从而让用户产生沉浸式体验的技术。

VR技术主要包含多感知性、沉浸性、构想性以及交互性四个特征，既能使用户通过外部的摄入设备与虚拟场景进行交互，也能让用户产生身临其境的体验,激发人类的想象力与创新性思维。

VR技术在教育、军事、医学、工程等社会生活的各个领域都己有广泛的应用，尤其在教育方面上效果是非常显著的。

本文主要研究虚拟场景的构建。

在构建虚拟校园的过程中，本文用到了以下几种开发工具。

2.2虚拟现实系统开发工具

2.2.1HTML5简介

HTML5是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改。

HTML5的主要特性有：

语义特性（Class：

Semantic）：

HTML5提供了庞大的标签库，通过使用这些标签，用户可以更细致的描述文档结构，让文档更容易理解，搜索引擎也可以更快的解析，通过搜索引擎我们可以更容易的搜多到更准确的信息•

本地存储特性（Class:

Offline&Storage）：

HTML5提供了具有持久化的本地存储，HTML5可以在不影响网站性能的情况下存储大量的数据，只有在请求时才会使用数据。

不需要向每个服务器进行请求传递。

极大的提高了网站的使用效率。

设备兼容特性（Class:

DeviceAccess）：

HTML5为用户提供了更多的数据与应用接入的开放接口，使得外部应用更容易与浏览器内部的数据进行直接相连。

并且也为用户提供了更多的体验与优化。

连接特性（Class:

Connectivity）：

HTML5具有更有效的连接工作效率，让用户能实现基于页面的实时聊天，更快的网页交互体验，HTML5具有更有效的服务器推送技术，能实现服务器对客户端进行数据推送的功能。

网页多媒体特性（Class:

Multimedia）：

HTML5新增了Audio和Video标签，这些标签让我们可以非常方便的处理音频和视频文件。

三维、图形、特效特性（Class:

3D,Graphics&ESects）：

SVG,Canvas,WebGL、CSS3可以绘制3D图像，给用户更流畅的视觉效果，更为其实的体验。

性能、集成特性（Class:

Performance&Integration）：

HTML5通过XMLHttpRequest2等技术，解决以前的跨域问题，帮Web应用和网站在多样化的环境中更快速工作，用户不需要等待网页加载结束，即可查看大部分内容。

CSS3特性（Class:

CSS3）：

CSS3为HTML5提供了更多的风格，更高的灵活性与控制性，让HTML5的排版与显示效果更强大。

2.2.2WebGL简介

webGL（WebGraphicsLibrarjO是-•套免费、跨平台的API,可以在Web页面上绘制3D图形或动画的API,继承于0penGLES2.0标准，可以运行在任意的操作系统上，支持手机、平板、电脑等各种智能设备。

WebGL是通过JavaScript编程接口的调用，在HTML的Canvas中实现3D内容的绘制渲染。

用户通过浏览器可以更流畅的观察3D模型与虚拟场景甚至于3D网页游戏等。

WebGL同时也解决了与3D场景的交互问题，无需任何插件即可使用浏览器绘制3D动画并与之进行交互，同时也通过统一标准的跨平台OpenGL接口实现图形的渲染。

2.2.3Threejs简介

Three.js是一个3DJavaScript库，作者是巴塞罗那的RicardoCabelloMiguels,又称Mr.doob,Threejs对于大多数软件以及浏览器具有很好的交互性和兼容性，主要是因为它是WebGL的一个第三方库，并对WebGL进行底层的图形封装，即只需使用相对于WebGL来说少量的代码即可实现相同的功能。

从而极大的提高了开发的效率，减少时间成本。

并且Threejs使用JavaScript语言进行编译。

Threejs是一个非常小的轻量级引擎，但却具有非常强大的3D渲染功能。

Threejs提供了一套简易且直观的创建3D图形中常见物体的方案，它使用了许多优秀的图形引擎技术，处理速度非常快，同时内置了很多类型的对象与工具，可以用于游戏的开发、数据可视化、模型加载以及特殊效果的渲染机制等。

Three.js良好的兼容性使WebGL可以实现的功能Tliree.js也基本完全可以实现，即使少部分无法实现，或者一些细节的调整Three.js无法做到，也完全可以使用WebGL直接进行编译，不用担心产生冲突。

2.2.43DMAX简介

3DMAX是由Autodesk公司开发的软件，这款软件是基于PC操作系统的的3D动画渲染和制作软件，目前最为广泛应用并且销售量最大的建模软件，主要应用于游戏、动画以及模型制作的领域-3DMAX对于电脑的硬件要求并不高,市面上关于3DMAX的教程非常丰富，让用户更容易掌握软件的应用，所以一般来说3DMAX是用户的首选。

3DMAX在建筑与工业制图方面是非常专业的工具，无论是室内建筑的装饰效果图，还是室外建筑设计效果图，3DMAX强大的功能和灵活性都是事先创造力的最佳选择。

2.3本章小结

本章主要介绍了虚拟现实的概念以及现状，开发实现虚拟场景的主要开发工具，IITML5、WebGL、Threejs和3DMAX四大工具的概念、特性、及其在本文中起到的作用。

第3章虚拟校园开发的理论与技术

3.1虚拟校园场景构建的原理

一个完整的虚拟现实的场景主要包括以下元素：

1.场景（Scene）：

是物体、光源等元素的容器。

2.相机（Camera）：

控制视角的位置、范围以及视觉焦点的位置，一个3D环境中只能存在一个相机。

3.物体对象（Mesh）：

包括二维物体（点、线、面）、三维物体、粒子。

4.光源（Light）：

包括全局光、平行光、点光源。

5.渲染器（Renderer）:

指定渲染方式，如WebGL、canvas2D、Css2D、Css3D等。

6.控制器（Control）:

相机控件，可通过键盘、鼠标控制相机的移动。

3.1.1场景（Scene）

物体、光源、控制器的添加必须使用secen.add（object）添加到场景中才能渲染出来。

一个3D项目中可同时存在多个scene,例如将3D环境中的各个物体分组后以scene来控制其位置旋转等，从而控制scene中所有的元素随着scene移动或旋转。

3.1.2相机（Camera）

图形学中的照相机定义了三维空间到二维屏幕的投影方式，就是决定哪些东西将要在屏幕上渲染。

针对投影方式，Threejs有两种不同的相机：

正交投影相机和透视投影相机。

举个简单的例子来说明正交投影相机与透视投影相机的区别。

使用透视投影相机获得的结果是类似人眼在真实世界中看到的有“近大远小”的效果（如图3-1）；而使用正交投影相机获得的结果就像我们在数学几何学课上老师教我们画的效果，对于在三维空间内平行的线，投影到二维空间中也一定是平行的（如图3-2）o因为透视投影相机更贴近真实世界，所以本文使用的是透视投影相机。

图3-1正交投影

图3-2透视投影

透视相机的原理如图3-3,包括：

Fov：

垂直方向夹角

Aspect：

可视区域长宽比width/height

Near：

渲染区域离摄像机最近的距离，即近平面与相机中心点的垂直距离。

Far：

渲染区域离摄像机最远的距离，即元平面与相机中心点的垂直距离。

.仅在距离摄像机near和far间的区域会被渲染到canvas中。

14

万方数据

透视图 侧视图

图3-3透视相机的原理图

3.1.3物体（Mesh）

物体就是在相机透视图里主要的渲染对象：

房子、植物、地面等等。

一个完整的物体对象（mesh）包括材质（Material）和形状（Geometry）«

Threejs包含很多种材质类型，这里主要介绍一些基础和本课题将会使用的材质特性。

MeshBasicMater