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

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

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

研究方向：

虚拟现实

指导教师：

厉小军

提交日期：

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;

目录

摘要 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世界，从而让用户产生身临其境的