资源描述：
《基于web的3d模型浏览与交互系统》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。
学校代码10530学号201510171884分类号TP391密级硕士学位论文基于Web的3D模型浏览与交互系统学位申请人郭明金指导教师陈姝副教授学院名称信息工程学院学科专业计算机技术研究方向计算机视觉、模式识别二○一八年四月十日 3DModelBrowsingandInteractionSystemBasedonWebCandidateGuoMingjinSupervisorAssociateProf．ShuChenCollegeCollegeofInformationEngineeringProgramComputerTechniqueSpecializationComputerVisionandPatternRecognitonDegreeMasterofEngineeringUniversityXiangtanUniversityDateApril10，2018 摘要随着互联网技术的持续发展，人们浏览信息的方式不断改变，不再仅仅只需浏览2D网页，对3D网页的要求也越来越高，3D交互技术也因此得到了越来越广泛的应用。目前国内大部分的3D场景交互技术都需要安装客户端，一些基于Web的3D技术也需要在浏览器中安装插件，由此给用户带来了不便。因此，本文提出的基于Web的3D模型浏览与交互系统具有较好的应用前景。本文设计的基于Web的3D模型浏览与交互系统，主要采用基于WebGL的第三方库Three.js来实现。该系统的建立主要包括场景的构建、场景的交互控制和模型的云存储。模型是场景构建的前提，用户可从外部导入所需模型或利用系统自带的简单模型进行模型的构建。场景的交互技术主要包括模型的平移、旋转、缩放、拾取、剖切、3D动画模型的播放以及信息的显示等。模型的云存储是指用户可以通过登录账户将3D模型存储到服务器，日后需要时直接从服务器中加载即可。基于Web的3D模型浏览与交互系统，是一个可在Web浏览器内进行3D模型高效浏览与便捷交互的可视化平台，旨在帮助用户实时上传自己的3D模型并在浏览器端进行展现，并且用户可对模型进行实时操控。关键词：3D模型；WebGL技术；Three.js库；服务器；可视化I AbstractWiththecontinuousdevelopmentoftheInternettechnology,people'sdemandsforinformationacquisitionareconstantlyimproving.Theynolongerremainintheprevious2Dpages,butmoreandmoretendto3Dpages.Therefore,3Dinteractivetechnologyhasalsobeenwidelyused.Atpresent,mostofthe3DsceneinteractiontechnologiesinChinarequiretheinstallationofclients,andsome3Dtechnologiesbasedonwebalsorequiretheinstallationofplug-insinthebrowser,therebycausinginconveniencetousers.Therefore,3DModelBrowsingandInteractionSystemBasedonWebproposedinthispaperhasagoodapplicationprospect.3DModelBrowsingandInteractionSystemBasedonWebisdesignedinthispaper,whichmainlyadoptsthethird-partylibraryThree.jsbasedonWebGLtorealize.Theestablishmentofthesystemmainlyincludestheconstructionofthescene,theinteractivecontrolofthesceneandthecloudstorageofthemodel.Themodelisthepremiseofsceneconstruction,userscanimporttherequiredmodelfromtheoutsideorusethesystem'ssimplemodeltobuildthemodel.Theinteractivetechnologiesofthescenemainlyincludethetranslation,rotation,zooming,pickingupofthemodel,playingofthe3Danimationmodel,anddisplayofinformationandsoon.Thecloudstorageofthemodelmeansthattheusercanstorethe3Dmodelontheserverbyloggingintotheaccount,andcandirectlyloaditfromtheserverwhenneeded.3DModelBrowsingandInteractionSystemBasedonWebisavisualplatformforefficientbrowsingandconvenientinteractionof3Dmodelsinawebbrowser.Itisdesignedtohelpusersuploadtheirown3Dmodelsinrealtimeanddisplaythemonthebrowserside.Andtheusercanmanipulatethemodelinrealtime.KeyWords:3Dmodel;WebGLtechnology;Three.jslibrary;server;visualII 目录摘要..............................................................................................................................IAbstract......................................................................................................................II目录..........................................................................................................................III第1章绪论..................................................................................................................11.1课题研究背景及意义.........................................................................................11.2研究现状.............................................................................................................21.3研究目标及内容.................................................................................................31.4章节安排.............................................................................................................4第2章Web3D关键技术...............................................................................................52.1HTML5技术.......................................................................................................52.2WebGL技术........................................................................................................62.2.1WebGL简介.................................................................................................62.2.2WebGL坐标系统.........................................................................................72.3Three.js.................................................................................................................72.3.1场景构建.......................................................................................................82.3.2几何体与材质...............................................................................................92.3.3外部模型的导入.........................................................................................102.4JavaScript...........................................................................................................112.5Tomcat................................................................................................................122.6本章小结...........................................................................................................12第3章系统设计........................................................................................................143.1需求分析............................................................................................................143.2系统结构设计....................................................................................................143.3系统布局设计....................................................................................................153.4系统功能............................................................................................................163.5系统接口设计....................................................................................................163.6数据库设计........................................................................................................203.6.1总体构想....................................................................................................203.6.2用户表........................................................................................................21III 3.6.3平台表........................................................................................................213.6.4模型总表....................................................................................................213.6.5模型详表....................................................................................................223.6.6状态表........................................................................................................223.7本章小结...........................................................................................................22第4章系统的实现....................................................................................................244.1系统主界面的实现...........................................................................................244.2主要算法的实现...............................................................................................244.2.1BSP分割算法............................................................................................244.2.2动画模型算法............................................................................................254.3主要功能的实现...............................................................................................264.3.1注册与登录功能........................................................................................264.3.2导入导出功能............................................................................................264.3.3模型操作功能............................................................................................274.3.4渲染功能....................................................................................................334.3.5模型加载与上传功能................................................................................334.3.6信息存储与显示功能................................................................................344.4本章小结...........................................................................................................35第5章实验分析........................................................................................................365.1实验环境...........................................................................................................365.2渲染比较...........................................................................................................365.3功能测试...........................................................................................................375.4性能测试...........................................................................................................425.5本章小结...........................................................................................................44第6章总结与展望....................................................................................................456.1总结...................................................................................................................456.2展望...................................................................................................................45参考文献......................................................................................................................46致谢..............................................................................................................................48附录A攻读硕士学位期间发表的论文.....................................................................49IV 第1章绪论1.1课题研究背景及意义随着计算机技术的不断发展，交互式的计算机图形学现今已经是一种实用的工具。计算机图形学在建筑、科学、医药、商务和娱乐等各种领域的应用已经非常广泛，目前已经成为各个应用领域中极其重要的技术，成为计算机视觉、图像处理、多媒体技术、模式识别等各个学科的技术基础｡Web3D作为三维计算机图形学与网络技术的产物，其发展和应用非常广泛，它可以在网页上创建一个服务[1]器，使得用户可以直接通过浏览器实现3D场景的实时渲染与互动。[2]随着电子科学信息的不断增长与科学技术的发展，仿真技术在工业设计中的应用越来越广泛。但是三维技术入门较难，三维交互软件需占用大量内存，对计算机的CPU和GPU要求很高，功能虽多却操作复杂，因此只是在专业领域应用广泛，普通用户很少接触三维模型交互技术。随着3D技术的应用领域逐渐增多，普通用户对其需求逐步提高，参与设计3D模型的兴趣也越来越浓烈，因此为了满足这些用户的需求，必须要创建出一个适合大众用户且操作简单、方便快捷的3D模型浏览与交互工具。网页制作与设计人员一直都尝试通过各种技术实现3D网页，其中包括“Java3D”、“Flash3D”、“Sliverlight”、“Unity3D”以及“CopperCube”等来实现3D商品展示、3D打印、3D游戏、虚拟现实。然而，这些技术却存在一些问题，首先，这些技术都必须要安装特定的插件，安装插件会影响网页的跨平台性及稳定性，特别是限制了其在移动终端网页中的应用；其次，许多技术仅仅针对特定行业，其通用性不强，比如Unity3D只适合游戏网页的开发；再次，技术实现较为困难，开发成本高，并且制作效率低下。为了解决[3]这些问题，本系统采用WebGL技术，WebGL的优势是不用在浏览器上安装插件，就能被应用到网页中去以创建多种多样的复杂3D模型，在硬件条件相同的情况下提高3D模型的渲染性能和渲染效果。目前，国内Web3D相关产品比较稀缺，资源和资料也比较稀少，所以，本文提出的基于Web的3D模型浏览与交互系统是虚拟现实技术亟待解决的重要技术问题之一，应用前景非常好。基于Web的3D模型浏览与交互系统，是一个在线网页版3D浏览平台，是一个旨在帮助用户实时上传自己的3D模型并在浏览器端进行展现，系统采用[4]WebGL技术来对三维模型进行显卡渲染加速，并且不需要安装复杂的3D软件，用户输入网址即可进入系统，以实现对模型的浏览与操作。此技术将给用户带来极大的方便与快捷，既实现了PC端3D模型的交互又实现了手机等移动端3D模1 [5]型的可视化与交互操作，促进了虚拟现实技术的应用范围，为其运用到实际的生产生活中提供了有力的促进作用。1.2研究现状目前，桌面版3D模型交互软件很多，如Blender、3Dmax、SketchUp、Maya等，并且都具有非常强大的功能，且在3D领域已被普遍运用。但是这些是专业人员运用的专业软件，普通用户不易掌握，存在操作复杂的困扰。近几年，网络媒体对图形图像处理和视频技术等提出了更高的要求，各3D图形公司纷纷陆续[6]推出了自己的Web3D制作工具，各具特色，使得Web3D虚拟现实技术的操作[7]更加简单，使用更加便捷。目前国内外在线3D模型交互平台及工具不多，目前比较成型的有国外的3DTin和TinkerCAD以及国内的WebMax等。（1）TinkerCADAutodesk的TinkerCAD是一个在线网页版3D平台，用户只需几分钟就可以完成3D作品的设计，无论使用者是不是3D领域的专业设计人员，都可以快速[8]地对3D模型进行设计制作，并具有较好的渲染性能和渲染效果。TinkerCAD可应用于3D打印，它一直致力于帮助用户设计自己的3D模型并通过使用3D打印机将其打印出来。TinkerCAD可以无限制地存储设计模型，不仅可以通过简单地拖拽几何形状进行组合，甚至可以使用“超级脚本”进行更高水平的3D模[9]型设计。TinkerCAD降低了3D模型设计的门槛，让非专业领域用户也可以方便快捷的使用CAD工具。（2）3DTin3DTin是一款3D模型交互工具，使用现在非常盛行的WebGL技术进行开发，[10]它提供了两种方法来构建3D模型，一是用户通过使用系统自带的模型工具来构建3D模型进行交互，二是导入用户已设计好的模型来进行交互操作。用户制[11]作好3D模型后可将模型保存在服务器以便下次使用，也可以将其导出为国际标准的3D格式模型供用户传输，比如dae格式和obj格式。（3）WebMax[12]WebMax是一款由中国上海创图公司自主研发的Web3D软件开发技术，它使用C++和DirectX编写，采用分布式三维实时渲染技术实现巨大规模场景的[13]实时渲染，拥有其独一无二的压缩技术，是国内Web3D技术开发的先驱，3D交互功能非常强，三维渲染效果也非常好，并且运算速度非常快，是我国Web3D技术的重大突破。这三款Web3D工具都具有操作简单并且方便快捷的特点。但是，TinkerCAD2 和3DTin是国外产品，在网络带宽不足的情形下系统会出现严重的卡顿，造成用[14]户体验感极大降低。WebMax是我国国内出现的第一个具有完全自主知识产权三维在线软件开发技术，运算速度快、交互性强等优点是同类国外技术无可比拟的。但是WebMax需要下载插件才能完成网页上Web3D的浏览，插件的安装将会影响用户的使用热情。1.3研究目标及内容本文的研究目标是做出一个基于Web的3D模型浏览与交互系统，即一个在线网页版3D浏览平台，用户可实时上传自己的3D模型并在浏览器端进行展现，无需在客户端安装复杂的3D软件，用户只需输入网址进入系统，即可实现对模型的浏览与操作。用户可对模型进行修改，并保存用户修改的模型信息，进行导出保存。系统的功能按钮需简洁清晰，运行流畅自如。本系统旨在建立一个方便快捷的3D模型交互平台，其功能与复杂度可能比不上现有成熟的桌面3D软件，但简单流畅、方便快捷是本系统的主要优势，也是本系统所研究的目标。研究内容包括：1)模型信息导入与加载系统支持导入已创建好的3D模型。用户可以从本地导入，也可从服务器加载，导入或加载到浏览器即可进行浏览或修改操作。此项研究内容可极大提高系统的交互性及其扩展性。2)模型信息导出与上传在用户完成模型的修改之后，系统可对整个场景的模型信息进行存储，可导出到本地，或登录账号保存到服务器中，以后用户想要查看这个模型，只需再次从本地导入或登录账号进行加载即可进行查看与修改。这些功能使得系统的实用性增强，是重点研究内容之一。3)3D场景交互场景的交互技术主要包括模型的平移、旋转、缩放、拾取、材质的修改、3D动画模型的播放以及信息的显示等。系统提供一些基本的几何体（如平面、正方体和圆柱体等），用户可以将其进行组合拼接，或导入所需模型增加一些基本模型，组合成用户所需的复杂模型。模型在场景中可以被复制，也可以被删除。如何做到灵活流畅的控制模型，也是本系统重点研究的内容之一。4)场景实时渲染本系统是在线网页系统，在导入模型或修改模型时，应该确保能够实时渲染场景，做到流畅自如，使系统具有较高的性能。为此，系统采用了WebGL技术[15]进行显卡加速并使场景能够实时渲染。3 1.4章节安排本文的章节共有六章，章节安排如下：第1章为绪论，本章对课题的研究背景及意义，国内外的研究现状，研究目标及内容进行了介绍。第2章介绍了本系统主要涉及的Web3D关键技术，包括HTML5技术，WebGL技术，Three.js的相关知识如场景构建、几何体与材质、外部模型的导入，JavaScript和Tomcat。第3章对系统的总体设计进行了介绍，具体介绍了需求分析，系统结构设计，系统布局设计，系统功能，系统接口设计以及数据库设计。第4章对系统的实现进行了介绍，主要涉及系统主要算法与主要功能的实现。第5章是对系统的实验的记录及分析。第6章为总结与展望。4 第2章Web3D关键技术2.1HTML5技术[16]HTML5是由万维网联盟（W3C）推出的HTML标准的最新版本，是该标准的第五个正式修订版本，2014年10月正式完成标准的制定。HTML5技术[17]是互联网的核心技术之一，它是一种在万维网上构建和呈现内容的结构化标记语言。HTML标准在1990年被首次提出，并在1999年被修订为HTML4.01[18]和XHTML1.0标准，而HTML5则是取代了HTML4.01和XHTML1.0标准，使其在网络迅速发展时，网络标准能达到当代网络需求。HTML5还在进一步发展和完善，但是国内外大多数主流浏览器都已经支持HTML5，比如微软的IE11浏览器、谷歌的Chrome浏览器以及IOS的Safari浏览器等，其中Chrome浏览器和Firefox浏览器对HTML5支持的最好。此外，HTML5在移动互联网中也具有好的兼容性，ChromeAndroid、UCforAndroid和IOSSafari等浏览器都对HTML5有很好的支持。[19]从广义上来讲，HTML5其实是一个技术的组合体，包含HTML、CSS和JavaScript等技术，可以提高其网络应用服务的性能。通过HTML5技术能开发出许多跨平台的并且功能更为丰富的软件产品。另外，它还可以进行多线程处理并新增了部分功能，这些新功能不仅可以提供丰富的媒体支持，而且还增强了对创建与用户、本地数据和服务器交互的Web应用程序的支持，比以前更有效的进行交互，更易于实现大型的复杂程序。通过文档对象模型里新增的API，再加上WebGL、Canvas和CSS3等技术，HTML5能够实现Flash的一些功能，同时也拥有了实现3D模型浏览与交互系统的基础。[20]在HTML5平台上，浏览图象、动画等同电脑的交互操作被标准化了。在HTML5出现之前，每种应用都一定要依赖自己的插件，三维图像在浏览器中不可以直接渲染展示，但是由于每种插件的标准不一样，安装插件对于浏览器甚至对系统来说也可能存在一定的安全隐患，因为插件可能会通过后台程序来盗取用户信息，或者插件自身也可能会有木马或者病毒，损害电脑的安全，而且下载多[21]种插件也是一种资源的浪费。HTML5技术能够解决以前系统存在的插件不标准，不安全和耗资源等问题，这样不但给开发人员带来了很大的便利，而且用户也不需要安装有关的插件，其加载速度也得到了改善，并且它还能够跨浏览器及[22]跨平台使用。5 2.2WebGL技术2.2.1WebGL简介[23]WebGL是一种3D绘图标准，是一套可以跨平台使用的的JavaScript[24]API，它在HTML中以3D绘图上下文的形式实现了OpenGLES（OpenGLfor[25][26]EmbeddedSystems）2.0的功能，把OpenGLES2.0与JavaScript结合起来，并以底层的文档对象模型DOM（DocumentObjectModel）接口的形式将开发接口暴露出来，使得Web开发者能够更便捷的在网页中展示更加流畅的3D模型与场景。[27]WebGL已经被纳入HTML5标准之中，这使得它定义的3D图形的应用程序接口可以通过其Canvas元素来呈现，在网页中不需要安装相关插件即可对复杂的3D模型及场景进行较强的交互操作功能，WebGL能够把Canvas元素当作DOM的API来使用，并且可以通过JavaScript来实现硬件加速与内存管理功能。WebGL能够运行在各种各样的设备上，例如移动设备、PC机以及高性能的智能电视等，现在很多常用的浏览器的最新版本基本都对WebGL的功能有着很好的支持，图2.1介绍了目前PC及各移动端对WebGL的支持情况。利用WebGL能够展现丰富多彩的三维图形图像，其应用领域非常的广泛，应用领域主要有3D建模、数据可视化、物理空间模拟、在线互动游戏、房地产、游戏、电影等方面。图2.1各主流浏览器对WebGL的支持情况WebGL的虽然功能非常的强大，可以创建出令人惊叹的3D视觉效果。但是原生的WebGLAPI开发起来非常困难，涉及很多基础的开发，开发者必须付出大量的精力。目前，为了提升开发的便捷性，很多开发者使用第三方辅助库来进行开发以提高其开发效率，较具有代表性的第三方库有Three.js、CopperLicht、X3DOM以及Oak3D等。这些图形库对WebGL进行了封装，只需要少量的几行就可以实现绚丽的效果，图形库中封装了许多函数，例如camera相机、light光6 源以及材质和纹理等。为了使用户体验更佳，许多交互性的内容都被添加到了图形库中，只需要通过某个特定的事件接口就能够实现有关的动作编程。本系统采用的是Three.js作为系统的3D引擎。2.2.2WebGL坐标系统WebGL使用的是三维笛卡尔坐标系，它具有三个坐标轴，分别为x轴、y轴和z轴。在WebGL中，其原点在屏幕的中心点，当你面向计算机时，X轴的正方向是水平向右的，Y轴的正方向是垂直向上的，而Z轴的正方向则为垂直于屏幕向外。如图2.2所示，WebGL坐标系又被称为右手坐标系。yxzCanvas图2.2WebGL坐标系2.3Three.js[28]Three.js是在浏览器中运行的基于WebGL的第三方辅助图形库，是众多第[25]三方库中的领导者，使用JavaScript编写。它提供了一套基于WebGL的、非[29]常易用的JavaScriptAPI，能够简易而直观的创建3D图形中的常见物体。它使用了很多最佳实践的图形引擎技术，渲染速度很快。而且还内置了多种类型的对象和方便的工具，简化了开发的步骤，减轻了开发者的负担，功能非常的强大。目前互联网上许多优秀的WebGL作品都是使用Three.js来构建的。但是由于这[30]款3D引擎目前尚未成熟，还处于开发阶段，没有非常系统和详细的文档，这增加了学习者的难度。幸运的是Three.js的官网上提供了大量的示例和代码，可以从中学习到Three.js提供的所有的API。7 2.3.1场景构建使用Three.js程序构来建场景必须要包含三部分，即场景、照相机以及渲染[31]器。有了这三部分，我们才可以用相机将物体渲染到场景中。场景Scene是所有物体的容器，通常来说，场景在程序初始化时进行构建，在Three.js中的场景只有一种构建方式，所以构建场景使用的代码也较简单，即：varscene=newTHREE.Scene()。类Scene中包含了所有显示在屏幕上的对象，比如三维模型和灯光效果。相机Camera在3D引擎中是一个非常重要的组件，它能决定场景中的哪些对象可见，什么角度的物体会被显示出来。Three.js中的相机有两种，一种是orthographic正投影相机，另一种为perspective透视相机。两种相机的对比如图2.3和图2.4所示。图2.3正投影视图图2.3透视投影视图8 在图2.2和图2.3中可以清楚地观察到，使用正投影相机时，不管远近，物体都具有相同的视觉效果，但是采用透视投影相机时，物体却是远小近大的视觉效果，所以在不同需求时，选取的相机种类是不同的，本交互系统用于让用户浏览3D模型，所以在选取相机时，选择与人类的视觉习惯相同的相机能更好的进行交互，因此系统选用透视投影相机。透视投影相机的函数为varcamera=newTHREE.PerspectiveCamera(fov,aspect,near,far)，函数初始化时其参数的取值需依据具体情况来选取。最后一部分是渲染器，渲染器决定了渲染的结果，决定绘制在页面的什么元素上，并且以怎样的方式来绘制。本文中的系统目的是浏览交互三维模型，所以需要选择WebGL渲染器，其函数为varrenderer=newTHREE.WebGLRenderer()。另外还必须要使用document.body.appendChild(renderer.domElement)将渲染器的domElement元素加入到网页元素中。其全部渲染都是绘制在domElement上的，因此将domElement元素添加到网页的文档对象中以后，渲染结果才会显示在页面中。但是仅添加domElement元素还不能保证场景的正常显示，还必须要进行渲染。渲染分为离线渲染和实时渲染两种方式。对于质量较高的场景图，需要事先将一帧帧图片渲染好，之后再将图片拼接起来连续显示，即离线渲染。而实时渲染，则需要实时对画面进行渲染，就是说即使场景中对象没有做出改变，也必须要进行重新渲染。本文系统中呈现的场景，运用当前的电脑CPU及GPU，都可以满足其实时渲染的要求。需要使场景对象实时渲染的代码如下：functionrender(){renderer.render(scene,camera);requestAnimationFrame(render);}如上述代码所示，render()函数中的requestAnimationFrame()函数非常重要，它可以多次调用函数中的参数，因此以当requestAnimationFrame()嵌套在render()中时，能够不断重复调用这两个函数，如果再在render()中添加使场景中对象的坐标变换的代码，就能够实现场景对象的每一帧都能改变其坐标的实时渲染。2.3.2几何体与材质几何体是THREE.Geometry的实例，主要用于描述场景中对象的形状。它都是由顶点与面构成的，这些顶点与面都能够通过定义其对象数组来访问。这些顶点在三维笛卡尔坐标系中拥有自己的坐标值，都是THREE.Vector3对象，这些面都是THREE.Face3的对象。在Three.js中不管多么复杂的三维模型都是由一些三角形的面组成的。通常情况下，开发者并不用直接处理顶点与面这类底层的数据，9 因为Three.js中的提供了很多用来生成常见的形状的子类，例如有平面、圆形、立方体、球体、圆柱体以及圆环等，这些基础几何体的属性都可以自己设置。绘制图形时，开发人员可以选择直接给定顶点的坐标来进行绘制，然而如需用到复杂模型的场景时，还是要使用专业的3D绘制软件来设计。材质(Materials)是THREE.Material的实例，就像是物体的皮肤，与渲染效果相关，通过设置材质可以改变物体的颜色以及光照模式和纹理贴图等。总而言之，材质可以决定对象在场景中的视觉效果。下面是几种常见的材质种类的介绍。（1）MeshBasicMaterial：基础材质，赋予几何体一种简单的颜色或线框。（2）MeshNormalMaterial：材质颜色是根据每一个面外指的法向量的计算得出其分量，可以快速辨别对象的形状。（3）MeshDepthMaterial：它显现的灰色阴影的强度会随相机的距离变化而产生变化。一般用于在添加真实纹理之前设计场景。（4）MeshLambertMaterial：这种材质会受到光照的影响，没有光照时会呈现黑色。可以用来创建暗淡的物体。（5）MeshPhongMaterial：这种材质也会受到光照影响，产生镜面反射。所以镜面和金属对象使用这种材质比较适合，没有光照时会呈现黑色。材质类的属性map(纹理图)应用十分广泛，这个属性可以覆盖拥有该材质的几何对象的表面纹理图。本文在导入3D模型时可以将纹理图一并导入并实时渲染到场景中。可通过下述代码来设置材质的map属性，其材质表面就会呈现纹理图的视觉效果。varimage=THREE.ImageUtils.loadTexture(`imagename.jpg');newTHREE.MeshLambertMaterial({map:image});2.3.3外部模型的导入使用Three.js创建常见的几何体十分方便，但对复杂的模型使用几何体来组合则会难度非常大，Three.js允许用户导入由Blender或3dsMax等软件制作的3D模型，并可导入到场景中。这些函数支持的模型格式如表2.1所示。表2.1导入模型支持的文件格式JOSN格式是Three.js自带的格式，可以用来定义几何体或者场景。虽然这种格JSON式不是正式的，但它方便使用与重用。OBJ是当前使用最普遍的格式之一。OBJ和MTL是一起使用的，MTL中详细OBJ/MTL描述了OBJ模型对象里全部组件的表面材质。Collada一种基于XML的3D格式，内部存储了3D动画及网格的数据。这是普Collada遍使用的一种格式，有大量的3D引擎与3D软件支持这种格式。10 （上接表2.1）VRML格式具有更强的三维模型表达能力，支持3D动画，同时支持颜色，材VRML质，光照等常见属性，应用更加广泛。STL是用于表示三角网格的一种格式。3D打印机打印的文件通常都是STL格式。STLCTM是由OpenCTM构建的一种3D格式，它是一种可用于存储由三角形网格CTM构成的三维模型的压缩格式。VTK主要用于存储面和顶点，是由可视化工具定义出的文件格式。VTKPLY是一种多边形文件格式，通常被用于存储3D扫描仪的信息。PLY2.4JavaScriptJavaScript简称JS，是一种跨平台的、直译式动态的解释性脚本语言，但可以基于原型（prototype）的面向对象进行编程，使用小程序段的方式来实现编程。它的基本结构同C++非常相似。但是它不用先编译，而是在程序的运行过程中逐个被解释。JavaScript和HTML结合起来使用，可方便开发人员操作。JavaScript是一种直译式的脚本语言，它可以为客户端提供数据验证、面向对象的编程以及事件驱动等，是当前世界上使用最广泛的脚本语言，最开始是由Netscape公司设计研发出来的，其不仅能够在客户端进行开发，也可以应用于服务器端编程。JavaScript技术由三个部分组成，分别是核心ECMAScript、文档对[32]象模型DOM以及浏览器对象模型BOM，如图2.2所示。ECMAScript是为了标准化JavaScript创建的，BOM封装了JavaScript和浏览器交互的方法与接口，DOM则封装了JavaScript和页面进行操作的方法与接口。许多用HTML5新特性来实现较好效果的web应用程序都需使用JavaScript。JS语言是世界上最流行的编程语言之一，其设计目标是在不占用太多系统资源及网络资源的情形下，提供一种可以将不同应用程序的通用代码嵌入其中的[33]方法。它可以不用依赖特定的操作系统或机器，也就是它是独立于操作平台的。其平台无关性使它可以广泛应用于笔记本电脑或个人电脑、智能移动终端以及服务器等，功能丰富并且适用性强。11 JavaScriptECMAScriptDOMBOM文档对象模型浏览器对象模型图2.2Javascript组成结构图2.5TomcatTomcat服务器是由Apache软件基金会开发的免费的、开源的JavaServlet容器，是由Sun、Apache以及其他公司和个人一起开发而成的。因为有了Sun[34]公司的参与和支持，Tomcat对最新的Servlet和JSP规范有着非常好的支持，Tomcat7支持最新的JSP2.2与Servlet3.0规范。Tomcat服务器性能稳定而且技术先进，并且经过不断的成长与完善，目前的Tomcat已经具有许多常用的应用系统开发功能，比如扩展性好、运行时占用系统资源较小以及支持负载平衡和邮件服务等优点，已经成为当前企业开发者用来开发JavaWeb应用时最常用的应用服务器之一。Tomcat是属于轻量级的小型应用服务器，它是一种JSP/Servlet容器，在中小型系统中或着并发用户不多的场合下被普遍使用，是开发与调试JSP程序的最[35]佳选择。Servlet最常见的用途是用来扩展JavaWeb服务器的功能组件，同时可以提供很容易使用、能移植并且非常安全的CGI代理品。Tomcat服务器是在Apache的基础上发展起来的，它扩展了Apache的功能，可以成功支持动态网页。2.6本章小结本章主要介绍了系统开发所使用的Web3D关键技术，首先了介绍了HTML5技术的发展历程及其包含的技术和特点等。接着介绍了WebGL的网页结构、坐标系统以及程序流程，可以看出直接用WebGL底层语言搭建三维场景，开发效率较低，因此我们采用Three.js这一WebGL的第三方库，用面向对象的方式开发本系统。随后对Three.js进行了系统的介绍，包括如何用Three.js搭建三维场12 景、几何体与材质以及外部模型导入。接着对本系统使用的主要语言JavaScript进行了介绍。最后对本系统使用的服务器Tomcat的发展与功能进行了介绍。13 第3章系统设计3.1需求分析3D模型的浏览与交互系统是一个在线网页版的3D模型浏览平台，用户通过此平台可以上传自己的3D模型，在浏览器端进行浏览与交互操作，并能将3D模型上传到服务器端进行保存，下次直接从服务器进行加载即可。系统的主要需求如下：（1）用户能够流畅地访问系统，系统稳定性高，并且对于可能发生的异常情况，系统能够捕获异常，对其进行及时的处理与反馈。（2）系统界面简洁友好，操作简单，用户通过鼠标键盘就能够在场景中进行3D浏览与交互，并能实现漫游、平移、旋转、缩放、剖切、撤销、恢复等功能，场景切换流畅。（3）能够方便有效的对模型进行导入导出、修改、删除等操作，能够对用户上传的模型进行云端存储，并能随时有效的加载出用户上传的模型，加载速度快。（4）简单易用，不需要安装任何插件或软件，通过浏览器便可直接浏览与修改三维模型。3.2系统结构设计基于Web的3D模型浏览与交互系统，采用B/S（Browser/Server）结构,系统的结构设计如图3.1所示，主要由三个部分组成，分别是客户端、服务器端和数据库。服务器端采用Java编写，对数据库中各表进行了封装，从而数据的安全性得到了保障。14 客户端服务器数据库/本地数据模型图3.1系统软件结构设计不同客户端如手机、电脑等通过Web浏览器导入或加载模型，服务器接收其请求，并将模型传送到客户端，然后客户端的浏览器通过WebGL加速渲染模[36]型，形成三维场景。用户可以在客户端浏览器的场景中实现场景漫游和模型平移或缩放等操作。同时，客户端可以向服务器发送请求，查看数据库中存储的模型。3.3系统布局设计系统的布局界面如图3.2所示，系统界面分为三个区域：场景渲染区域、菜单栏区域及信息栏区域。场景渲染区域是系统界面最主要的区域，用来对3D场景进行实时渲染；菜单栏区域为用户与界面交互的区域，用于用户的注册登录、模型的导入导出、编辑与操作等的控制，菜单栏区域采用下拉列表的方式；信息栏区域包括场景信息显示栏、模型基础信息栏和模型材质栏，用于指导用户使用该系统及显示系统其他一些相关信息。菜单栏区域场景渲染区域信息栏区域图3.2系统界面布局15 3.4系统功能系统由服务器端与客户端两部分组成，客户端主要用于用户与系统的交互，服务器端则主要负责存储用户上传的模型，并能通过用户的操作实时加载模型到场景中。客户端包括本地导入、本地导出、模型操作、渲染、信息的存储与显示等功能模块。服务器端主要包括用户登录、用户登出、模型与场景的加载、上传和删除等功能模块。其系统功能模块图如图3.3所示：登录登出模块加载模块导出模块客户端导入模块渲染模块上传模块服务器端信息存储与模型操作模块显示模块图3.3系统功能模块图3.5系统接口设计该系统提供了标准的API接口，我们定义了七个类作为API接口，分别是用户注册类RegisterServlet，登录类LoginServlet，注销类LogoutServlet，上传模型类UploadServlet，加载模型类LoadServlet，查找模型标识类ModelListServlet和删除模型类DeleteServlet。用户注册类API用于添加用户，它调用了数据库的用户表，实现用户表中用户的增加，成功注册后用户即可登录。API设计如下表3.1所示。16 表3.1用户注册类接口表模块说明模块文件名RegisterServlet.java所在路径src/com.polaris.register.web.servlet/RegisterServlet.javaurl路径/RegisterServlet下级模块调用RegisterService模块输入1.字段名为pltID，值为平台ID(已经默认给出Info.PLATFORM_DEFAULT_ID)2.字段名为username，值为所要注册的用户名3.字段名为password，值为所要注册的用户密码模块输出注册成功则返回10，否则返回20数据库操作使用了th_user表程序逻辑用户注册界面openWindowOption.js登录类API用于提供用户登录，首先调用数据库的用户表，检查是否存在该用户，若存在并密码输入正确，则可进行加载和上传操作，此时调用数据库的模型总表和模型详表。API设计如下表3.2所示。表3.2登录类接口表接口说明模块文件名LoginServlet.java所在路径src/com.polaris.loginout.web.servlet/LoginServlet.javaurl路径/LoginServlet下级模块调用LoginService模块输入1.字段名为param_username，值为用户名2.字段名为param_password，值为密码模块输出1.成功则将user对象保存在session域中，失败则不做此操作2.成功则返回json字符串，{“result”:true,“username”:登录的用户名}失败返回json字符串，{“result”:false}数据库操作使用了tb_total_model、tb_detail_model表程序逻辑用户登录界面openWindowOption.js17 注销类API用于退出用户登录。API设计如下表3.3所示。表3.3注销类接口表接口说明模块文件名LogoutServlet.java所在路径src/com.polaris.loginout.web.servlet/LoginServlet.javaurl路径/LogoutServlet下级模块无模块输入字段名为session_user值为用户对象(要求用户必须登录)模块输出移除session中的用户对象数据库操作无程序逻辑用户注销界面openWindowOption.js上传模型类API提供登录用户上传模型或场景到服务器保存，调用数据库的模型总表和模型详表。API设计如下表3.4所示。表3.4上传类接口表接口说明模块文件名UploadServlet.java所在路径src/com.polaris.upload.web.servlet/UploadServlet.javaurl路径/UploadServlet下级模块调用UploadService模块输入1.字段名为session_user，值为用户对象(要求用户必须登录)2.缓存目录(Info.REPOSITORY_PATH已经给出)3.缓存大小(Info.SIZE_THRESHOLD已经给出)4.字段param_modelName，值为模型的名字5.字段param_modelPicServicePath，值为服务器上的模型附属文件路径，路径之间用分号(;)隔开6.上传的表单项模块输出1.将附属文件保存在指定目录2.在数据库中插入模型记录和相应的附属文件记录3.返回上传信息(10为上传成功，20为上传失败，30为上传大小超出范围)数据库操作使用了tb_total_model、tb_detail_model表程序逻辑保存用户上传的模型界面openWindowOption.js18 加载模型类API提供登录用户加载模型或场景到客户端进行场景渲染，调用数据库的模型总表和模型详表。API设计如下表3.5所示。表3.5加载模型类接口表接口说明模块文件名LoadServlet.java所在路径src/com.polaris.load.web.servlet/LoadServlet.javaurl路径/LoadServlet下级模块调用ModelService模块输入字段名为param_modelID，值为模型ID模块输出该模型ID对应的附属文件的JSON形式(“附属文件ID”：“附属文件目录”)数据库操作使用了tb_total_model、tb_detail_model表程序逻辑返回给定的模型对应的附属文件路径界面openWindowOption.js查找模型标识类API提供登录用户查找模型或场景，当用户需要从服务器加载模型到客户端时，必须先在数据库中查找该用户的云端存储了哪些模型或场景，调用数据库的模型总表。API设计如下表3.6所示。表3.6查找模型类接口表接口说明模块文件名ModelListServlet.java所在路径src/com.polaris.load.web.servle/tLoadServlet.javaurl路径/ModelListServlet下级模块调用ModelService模块输入字段名为session_user，值为用户对象(要求用户必须登录)模块输出该用户的所有模型文件的JSON形式(“模型ID”：“模型名字”)数据库操作使用了tb_total_model表程序逻辑返回给定用户的所有抽象的模型文件界面openWindowOption.js删除模型类API提供登录用户删除保存在服务器模型或场景，调用数据库的模型总表。API设计如下表3.7所示。表3.7删除模型类接口表接口说明模块文件名DeleteServlet.java所在路径src/com.polaris.delete.web.servlet/DeleteServlet.javaurl路径/DeleteServlet19 （上接表3.7）下级模块调用DeleteService模块输入字段名为param_delete_modelIDs，值为模型ID模块输出修改模型的状态为删除状态，不修改附属文件。成功回写“succeedtodeletethemodels!”数据库操作使用了tb_total_model表程序逻辑删除给定的模型界面openWindowOption.js3.6数据库设计3.6.1总体构想为了使模型能够云端存储，并实现模型的动态加载与上传，将模型数据存入MySQL数据库中，用户登录自己的账号即可从数据库中加载上传过的模型，通过数据库的查询和删除等操作实现模型的加载与删除等操作。本系统所涉及的表主要有用户表tb_user、平台表tb_platform、模型总表tb_total_model、模型详表tb_detail_model和状态表tb_status，各个表之间的联系如图3.4。图3.4数据库20 3.6.2用户表用户表主要用于存储用户的信息，包括用户编号、平台编号、用户名、用户密码等相关信息，如表3.8所示。useID用于描述用户编号，pltID用于描述平台编号、username用于描述用户名、password用于描述用户密码、usrStatus用于描述用户状态。其中usrID为tb_user表的主键，pltID为tb_user的外键。表3.8tb_user表的设计字段名数据类型长度主/外键默认值是否为空描述usrIDBIGINT8主键否用户编号(自增)pltIDINT4外键否平台编号usernameVARCHAR20否用户名passwordVARCHAR20否用户密码usrStatusINT22否用户状态3.6.3平台表平台表主要用于存储平台的信息，包括平台编号、平台名称、创建时间等相关信息，如表3.9所示。pltID用于描述平台编号、username用于描述用户名、password用于描述用户密码、usrStatus用于描述用户状态。其中pltID为tb_platform表的主键。表3.9tb_platform表的设计字段名数据类型长度主/外键默认值是否为空描述pltIDINT4主键否平台编号(自增)pltNameVARCHAR30否一级类别名称pltCreTimeDATETIMENow()否平台创建时间pltStatusINT22否平台状态3.6.4模型总表模型总表主要用于存储模型编号、创建者、模型名称、模型创建时间等相关信息，如表3.10所示。mdlID用于描述模型编号、usrID用于描述创建者的编号、mdlName用于描述模型名称、mdlCreTime用于描述模型的创建时间、mdlStatus用于描述模型名称的状态。其中mdlID为tb_total_model表的主键，usrID为tb_total_model为表的外键。21 表3.10tb_total_model表的设计字段名数据类型长度主/外键默认值是否为空描述mdlIDBIGINT8主键否模型编号(自增)usrIDBIGINT8外键否创建者mdlNameVARCHAR50否模型名称mdlCreTimeDATETIMENow()否模型创建时间mdlStatusINT22否模型状态3.6.5模型详表模型详表主要用于存储模型文件编号、模型编号、文件路径和文件状态等相关信息，如表3.11所示。mdlTtID用于描述模型文件编号、mdlID用于描述模型编号、mdlPath用于描述文件路径、mdlStatus用于描述文件的状态。其中mdlTtID为tb_detail_model表的主键，mdlID为tb_detail_model表的外键。表3.11tb_detail_model表的设计字段名数据类型长度主/外键默认值是否为空描述mdlTtIDBIGINT8主键否模型文件编号(自增)mdlIDBIGINT8外键否模型编号mdlPathVARCHAR20否文件路径mdlStatusINT22否文件状态3.6.6状态表状态表主要用于存储状态编号、表名、属性名、属性值和状态描述等相关信息，如表3.12所示。sttID用于描述状态编号、tblName用于描述表名、fldName用于描述属性名、sttValue用于描述属性值、sttDesc用于描述状态描述。其中sttID为tb_total_model表的主键。表3.12tb_status表的设计字段名数据类型长度主/外键默认值是否为空描述sttIDBIGINT8主键否状态编号(自增)tblNameVARCHAR20否表名fldNameVARCHAR20否属性名sttValueINT22否属性值sttDescVARCHAR50否状态描述3.7本章小结本章主要介绍了基于Web的3D模型浏览与交互系统的设计过程，首先对用户的需求进行了分析，确定系统的目标以及功能，然后对系统的结构进行设计，22 确定采用B/S结构来架构整个系统，接着设计系统界面布局，将尽可能多的信息呈现在页面中，然后对系统的功能进行了分析，接着对系统的API进行了设计，最后对数据库进行设计，主要包括用户表、平台表、模型总表、模型详表和状态表等。23 第4章系统的实现4.1系统主界面的实现主界面分为三个区域：场景渲染区域、菜单栏区域及信息栏区域大体布局。如图4.1所示。图4.1主界面实现图4.2主要算法的实现4.2.1BSP分割算法由于Three.js本身并没有提供几何体布尔运算的布尔函数，因此本系统的剖切操作使用Three.js的扩展库ThreeBSP.js函数库进行布尔运算，主要用到了BSP[37]分割算法，下面将对BSP分割算法的实现进行解析。首先需要先构建一个根节点，并把全部的顶点表、平面表以及结构化三角形表一起放入这个根节点中。然后，分割的流程如下：1）遍历该节点的全部备选平面，寻找一个合适的分割平面；2）若找不到合适的分割平面，则这个节点是一个叶子节点，返回；3）若找到了，标记这个平面已经被使用过；[38]4）新建两个新节点，一个为正向节点，一个为负向节点，挂接到本节点下；24 5）遍历所有结构化面。若结构化面是在分割平面的正向，那么就将这个结构化面与其所对应的平面加入到正向节点中。如果结构化面在分割平面的负向，就放入到负向节点中。如果结构化面被分割平面分割，就分割此三角形，并将分割后的结果放入相应的子节点；（发现结构化面所对应的平面已被标记时，则只放结构化面，不放分割平面，以防同一个平面用于分割两个以上空间，违反BSP空间二分逻辑的唯一性）6）遍历全部细节面。处理细节面的方法和结构化面相似，但是由于不用考虑与细节面所对应的平面的问题，相对更简单；7）遍历完毕，由于全部的结构化三角形、平面以及细节面都已经转移到两个子节点中了，所以从本节点中解除掉所有的结构化三角形、平面和细节面的引用。节点所需保留的数据只需要是分割平面和两个下级节点的指针即可；8）对两个子节点，分别从1）开始递归执行。当执行结束时，就构建了一棵完整的BSP树，全部的节点中只保留有节点的分割平面与两个下级节点，而与渲染有关的结构化三角形以及细节面就全都在叶子节点中。最后，只需顺着根节点递归，将节点全部组织成节点表就完成了。4.2.2动画模型算法本系统支持dae格式和vrml格式的3D模型动画的浏览，模型动画可以理解为，在设定的时间轴内通过改变对象的数据及数据结构来实现。模型动画是由连续的帧组成，每一帧都需要把模型重新渲染。实现模型动画的播放，关键就是解析出时间值与对象数据变化之间的对应关系，进而渲染出每一帧动画。下面将分别对dae格式和vrml格式的动画进行解析。dae格式的动画其时间是以关键帧的时间点来存储的，两个关键帧之间往往对应着一段独立的动画，动画存储在中，其用法及解析如下；骨骼动画数据动画的关键帧，OUTPUT中所对应的数据是关键帧的数据和结点可用来获得动画数据所关联的目标引用source结点中的“TIME”param的name为“TRANSFORM”source指出sampler源的id;taget指出变换类型,如旋转、平移、缩放等25 vrml格式的动画模型主要由7个节点控制，分别为TimeSensor节点、ColorInterpolator节点、CoordinateInterpolator节点、NormalInterpolator节点、PositionInterpolator节点、ScalarInterpolator节点和OrientationInterpolator节点。1）时间传感器TimeSensor节点的作用就是建立一个虚拟时钟，然后将时间值发送给其他节点。TimeSenor节点在此格式中不产生可视效果。它的作用仅仅是向各个插补器输出事件，使得插补器节点能够产生所要的动画效果。任何组节点都可以包含该节点，但是它独立于所选择的坐标系。2）ColorInterpolator节点是用来表示颜色间插值的节点。该节点能够作所有编组节点的子节点，但是独立于所使用的坐标系，即不受坐标系的约束。3）CoordinateInterpolator节点是表示坐标插值的节点。坐标插补器实现的是坐标点的移动动画，它通过使用CoordinateInterpolator节点，能够使此格式中物体的各个坐标点拥有各自的运动轨迹，即可使物体造型改变。4）NormalInterpolator节点在Normal节点中的法向量矢量中进行插值，以产生动画效果。5）PositionInterpolator节点主要是用来描述动画位置的关键值。适合于对平移进行插值。6）ScalarInterpolator节点描述的是在动画中使用的一系列关键色彩值。在一组SFFloat值之间进行线性插值，这个插值适合于用简单的浮点值定义的任何参数。7）OrientationInterpolator节点用来描述vrml格式在动画中使用的旋转值。该节点不创建造型效果，在一组SFRotation值之间插入插值，通过使用此节点，能够使其旋转。4.3主要功能的实现4.3.1注册与登录功能用户注册与登录功能主要用于登录账号后模型在服务器的存储，以便日后上传与加载模型。用户注册只需输入用户名和密码并重复密码即可，不过用户名需遵循一定的命名规则。用户登录只需输入用户名和密码即可登录，如果登录成功则异步刷新当前页面的账户信息，失败则弹出警告框。4.3.2导入导出功能（1）本地导入系统支持导入外部模型到场景中渲染，外部模型格式可选，包括wrl、obj、26 dae、stl、ply等国际通用格式。其核心算法描述如下：FunctionlocalLoader（editor）{loadFile(file){varextension=filename.split('.').pop().toLowerCase();//取出文件后缀switch(extension){case‘文件类型’://判断文件类型varreader=newFileReader();reader.addEventListener('load',function(event)，false);//导入文件}}handleJSON(data,file,filename){}}（2）本地导出系统支持导出场景以及场景中的模型，默认导出为three.js支持的json格式，另外，还支持导出stl和obj格式。系统支持导出场景中的所有信息，包括灯光及其基本信息，模型及其基本信息与材质信息，以及场景列表中的信息。导出对象时会将其对象名称、位置坐标、旋转角度、缩放比例、显示/隐藏、描述信息和材质信息一起导出。其核心算法描述如下：FunctionfileExport（）{varexporter=newTHREE.ObjectExporter();//将导出信息转换成字符串varoutput=JSON.stringify(exporter.parse(),null,'t');varblob=newBlob([output],{type:'text/plain'});saveAs(blob,meshName+".js");//保存为js格式}4.3.3模型操作功能模型操作功能包括漫游、对象拾取、热点交互、撤销与恢复、剖切对象、克隆对象、删除对象等操作，其用例图如图4.2所示。27 剖切操作漫游撤销操作对象拾取恢复操作热点交互播放/暂停添加几何体克隆对象平移操作参与者删除对象旋转操作缩放操作显示/隐藏鹰眼图4.2模型操作用例图（1）漫游用户可以通过鼠标控制camera在场景中漫游，可以360°全方位浏览场景中的每个角落，按住左键拖动，可以将相机进行旋转和翻滚；按住右键拖动可以将相机进行平移；按住中键拖动或转动滚轮能够将场景放大或缩小，但是这每种方式的缩放系数不同。其核心算法描述如下：varcontrols=newTHREE.EditorControls(camera,container.dom);//绑定camera和containercontrols.addEventListener('change',function(){//监听transformControls.update();//更新场景变化signals.cameraChanged.dispatch(camera);});（2）对象拾取用户可以通过鼠标左键点击场景中的某个对象，实现对该对象的拾取，进而可以对其进行操作与控制。28 其核心算法描述如下：functionupdateControls(){varvector=newTHREE.Vector3(mouse.x,mouse.y,0.5);projector.unprojectVector(vector,camera);varray=newTHREE.Raycaster(camera.position,vector.sub(camera.position).normalize());varcasterArray=ray.intersectObjects(pos);if(mouse.clicked){if(casterArray.length>0){meshOption(caseterArray[0]);//拾取对象后，对其进行操作控制}}}（3）热点交互在信息栏中列出整个场景中所有对象名字的列表，当在列表中选中某个名字时，场景中就会同时选中该名字对应的对象，反之，当用户在场景中选中某个对象时，列表中对应的名字也会呈选中状态。其核心算法描述如下：Functioncharge(object){if(objectinstanceofTHREE.Mesh){mesh=object;meshOption();//对模型对象mesh的操作}else{varlen=object.children.length;for(varj=0;jmodelDetailList){}}4.3.6信息存储与显示功能信息存储与显示功能主要用于模型基本信息的展示，用户修改模型时模型信息会实时显示在信息栏，同样的，若用户在信息栏修改模型信息，修改的信息也会实时渲染到场景中。信息栏的显示功能主要包括场景对象名字列表、选中对象的基本信息、几何信息和材质信息。（1）场景对象名字列表：系统信息栏中能够显示场景中所有对象名称的列表，且以树状结构展示，当在对象名字列表中选中某个名字时，场景中就会同时选中该名字对应的对象，反之，当用户在场景中选择某个对象时，列表中对应的名字也会呈选中状态。（2）对象的基本信息：信息栏中显示选中对象的基础信息，包括对象名称、位置坐标、旋转角度、缩放比例、显示/隐藏和描述信息，可在信息栏中对这些信息进行修改，同时渲染区域的对象会随着信息栏的数据实时发生改变。（3）材质信息：信息栏中显示选中对象的材质信息，包括材质名称、材质类型、材质颜色和透明度，材质类型包括简单表面、光亮表面、暗淡表面、法向颜色、深度着色和渲染线框，可对这些信息进行修改，该对象的材质也会发生相应的变化。34 本模块的核心算法描述如下：FunctioninfoBar(editor){sceneInfo(editor){sceneGraphChanged();//绘制列表框objectSelected();//对象选择}objectInfo(editor){container.add(objectNameRow);//对象的namecontainer.add(objectPositionRow);//对象的位置container.add(objectRotationRow);//对象的旋转角度container.add(objectScaleRow);//对象的缩放比例container.add(objectIntensityRow);//灯光强度container.add(objectColorRow);//灯光颜色container.add(objectDistanceRow);//灯光范围update();//根据信息栏的数据实时更新模型信息}materialInfo(editor){container.add(materialNameRow);//材质的名称container.add(materialClassRow);//材质类型container.add(materialColorRow);//材质颜色container.add(materialOpacityRow);//透明度update();//根据信息栏中的数据实时更新模型的material信息}}4.4本章小结本章首先展示了系统主界面的实现，随后对系统用到的主要算法BSP分割算法和动画模型算法的实现进行了介绍，最后对系统的功能进行了实现，包括注册与登录功能、导入导出功能、模型操作功能、渲染功能、模型加载与上传功能、信息存储与显示功能等。35 第5章实验分析5.1实验环境系统的开发环境分为前端和后台。前端开发工具采用WebStorm8，页面设计语言采用HTML5，页面排版布局采用CSS样式处理，前端语言采用JavaScript语言，并运用jQuery.js及Three.js框架进行设计，后台语言采用Java语言，数据库采用sql语言，前端与后台数据交互使用ajax技术。后台开发工具使用MyEclipse8.6，数据库使用MySQL5.7，服务器使用用Tomcat7.0，3D模型处理软件采用3dsMax2012及Blender。系统的运行环境为支持WebGL的浏览器，本系统PC端测试采用的环境为Windows7操作系统上的GoogleChrome65浏览器，移动端测试环境使用Android的UC浏览器。5.2渲染比较本系统是基于Web的3D模型浏览与交互系统，需要在浏览器中渲染出客户端软件的渲染效果。因此，对本系统导入模型后的渲染效果和3dsMax2014、Cortona3D和BSContact软件的渲染效果进行了比较，如图5.1所示。图5.1模型在不同软件中的渲染效果比较图36 图中四行四列展示了四个模型在四种系统中的渲染效果，其中，本系统为第一列，Cortona3D、BSContact和3DMax则分别为第二列、第三列以及第四列。从图中可以看出，本系统与三个软件的渲染效果存在一定的差异，不过都达到了比较好的渲染效果，四者的渲染效果相差不大。可见本系统达到了预期的渲染效果。5.3功能测试功能测试主要是测试系统的主要功能模块是否已经实现，能否运行出预期的结果。（1）注册与登录用户进入系统后点击注册按钮，弹出注册框，如图5.2，输入用户名与密码，用户名只能由数字、字母、符号"-"及符号"_"任一组成，密码只能由数字、字母、符号"-"、符号"_"、符号"."、符号"@"任一组成。图5.2用户注册在确认密码后即可注册，注册成功后会弹出提示，如图5.3，若输入的用户名已存在则会提示“该用户名已存在！”。图5.3注册成功37 注册成功后即可进行登录，点击登录按钮，弹出登录框，输入账号与密码即可登录，如图5.4，如果登录成功则异步刷新当前页面的账户信息，失败则弹出警告框。在用户登录状态下点击注销按钮即可退出登录。图5.4登录页面（2）导入与导出用户选择导入后，弹出导入单个模型文件提示，确认后即可导入单个的模型文件，若有贴图文件需在弹出的对话框中确认，选择贴图或材质文件（可以多选），若无贴图文件则应在对话框中选择取消，导入成功后，模型会在渲染区域显示，同时模型的基本信息会在信息栏显示，如图5.5所示。若导入失败，则窗口无变化。图5.5导入成功用户可选择导出对象或导出场景，在场景中修改的对象的各种信息或者添加的各种对象等都可以保存在导出的文件中。导出的格式可选，默认导出js格式，可选择stl或obj格式。38 （3）上传与加载用户选择上传场景后，弹出文件上传对话框，如图5.6所示，选择需要上传的场景或模型，若有贴图，可以点击添加，将贴图一起上传。图5.6上传场景用户选择加载后，会弹出服务器中的模型列表，如图5.7所示，选择需加载的模型后则会将服务器中的模型加载到系统中显示。图5.7加载操作39 为了确保导入导出与加载上传功能的正常使用，本人在实验中对多种格式的3D模型进行了测试。测试结果如表5.1所示。表5.1导入导出与加载上传测试名称模型格式模型大小贴图数量贴图大小导入导出加载上传Truckdae295KB34.04MB成功成功成功成功buildingdae2.79MB122.27MB成功成功成功成功chairdae2.09MB00成功成功成功成功alienobj1.11MB118.6KB成功成功成功成功femaleobj577KB3142KB成功成功成功成功chairobj1.25MB00成功成功成功成功jessicawrl592KB82.82MB成功成功成功成功pumpwrl1.12MB385.1KB成功成功成功成功chairwrl525KB00成功成功成功成功appleply46.5KB00成功成功成功成功dolphinsply43.5KB00成功成功成功成功camaroctm459KB2243KB成功成功成功成功handctm71.1KB00成功成功成功成功aspirinpdb3.08KB00成功成功成功成功applestl83.2KB00成功成功成功成功chairstl693KB00成功成功成功成功从表5.1中可以看出，本系统对dae、wrl、js等格式都有很好的支持，导入导出与加载上传操作都能正常实现其功能。（4）克隆用户选中克隆对象后，选择克隆即可将所选对象克隆到场景中，如图5.8。图5.8克隆对象40 （5）添加几何体与灯光用户可以在场景中添加几何体，本系统提供的几何体有平面、立方体、圆形、圆柱体、球体、二十面体、圆环体、环面扭结体和精灵，用户可以通过修改其参数来改变几何体的形状，图5.9为添加立方体的效果。图5.9添加立方体用户若觉得系统光线不够，可添加灯光，灯光类型有平型光、点光源、环境光、聚光灯和半球光。图5.10为添加平型光的效果，用户还可修改平行光的基本信息，如位置坐标、灯光强度等。图5.10添加平行光41 （6）剖切操作用户需首先添加剖切切片，将剖切切片移到需要剖切的位置，并选中剖切对象，即可对对象进行剖切，如图5.11。图5.11剖切操作5.4性能测试性能测试主要测试系统的3D场景渲染性能，帧率是检测系统渲染性能的关键指标之一。帧率就是在渲染场景时图形处理器每秒钟的刷新次数。帧率越高说明系统展示的动画效果越流畅。通常每秒30帧及以上就能达到较好的实时渲染[40]的效果，就能让人觉得较逼真。在本次测试中，测试了系统在承载五种不同大小的模型时在场景中渲染帧率，模型大小分别是5M、10M、25M、50M和100M，每隔10秒记录一次，结果如表5.2所示。表5.2渲染帧率记录表序号平均模型12345678值大小5M43FPS47FPS47FPS48FPS50FPS47FPS50FPS46FPS47FPS10M37FPS40FPS39FPS42FPS43FPS41FPS38FPS43FPS40FPS25M34FPS34FPS36FPS40FPS36FPS33FPS34FPS31FPS35FPS50M24FPS21FPS20FPS25FPS23FPS18FPS19FPS23FPS22FPS100M4FPS6FPS5FPS4FPS5FPS4FPS5FPS4FPS5FPS42 从表5.2中的数据可以看出，在不同的时刻，渲染帧率在不停的变化，但是都波动幅度不大。总体来说，系统承载25M以内的数据量时，渲染帧率都保持在每秒30帧以上，场景渲染效果较好，操作流畅，用户体验感较好。但是当数据量达到50M时，场景渲染效果就开始变得不太流畅，操作也会出现轻微的卡顿，影响用户体验。当数据量达到100M时，模型的平均渲染帧率只有每秒5帧，系统操作出现了严重卡顿，用户体验极差。50M及100M的渲染效果如图5.12及5.13所示。由此可见，系统承载的数据量存在一定的上限，在模型导入时需注意模型的大小，尽量限制在50M以内。另外，系统的承载上限跟系统硬件的性能也有必然关系，要想提高渲染性能，也可采取升级硬件的方式。图5.12导入50M模型的渲染效果图5.13导入100M模型的渲染效果43 5.5本章小结本章首先介绍了实验的开发环境和运行环境，然后将本系统与桌面软件3dsMax2014、Cortona3D和BSContact进行了渲染比较，发现渲染效果相当，表明本系统达到了预期的渲染效果。接着通过功能测试和性能测试分析了系统功能完整性、稳定性、兼容性以及流畅性，并给出了测试的结果。结果表明本文实现了预期的功能，并且具有较快的访问速度和兼容性，达到了预期的设计目标。44 第6章总结与展望6.1总结基于Web的3D模型浏览与交互系统，是一个在线网页版3D浏览平台，用户可实时上传自己的3D模型并在浏览器端进行展现，系统使用WebGL来对3D场景与模型进行显卡的加速渲染，并且用户不需要安装复杂的3D软件，只需要输入网址即可进入系统，实现对模型的浏览与操作。用户可对模型进行修改，并保存用户修改的模型信息，进行导出保存。系统的功能按钮简洁清晰，运行流畅自如。本文通过对基于Web的3D模型浏览与交互系统关键技术的研究，介绍了模型信息导入与加载、模型信息导出与上传以及3D场景交互和场景的实时渲染等方法。系统还支持解析3D动画模型文件，可以支持dae格式和vrml格式的3D动画模型的播放。在PC端或移动端的浏览器中将3D数据进行实时渲染，并确保用户在模型操作过程中的各个功能的正常使用，提高系统的交互性以及实用性。6.2展望目前，在线Web3D技术还不够成熟完善，性能较好且成型的在线3D交互系统还很少，而且在使用上也存在一些问题，主要是受限于网络带宽和硬件条件。本文希望能通过对基于Web的3D模型浏览与交互系统关键技术的研究，找到在线3D交互过程中的存在的问题并找出对应的解决方法，通过实验与研究，发现了本系统仍存在以下问题需要解决：（1）系统存在一定的数据承载上限，渲染轻量级模型比较流畅，模型太大就会使系统卡顿，甚至奔溃，因此，需要提高渲染效率以支持重量级模型。要提高渲染性能，可采取硬件升级的方法。另外，还可以通过相关算法来减少模型的大小且又不使其失真。（2）系统导出格式有限。系统支持的导出格式只有.js、.obj和.stl。这些格式虽然也是较为常见的格式，但是都不是国际标准的3D模型格式，目前较为流行的是vrml格式，若能够导出vrml格式，系统的应用将会更加广泛。（3）切片功能，目前已能实现，但效率较低，需要改进算法。（4）模型动画暂不支持修改，只支持动画的播放与暂停，增强模型动画的交互功能，系统应用将会更加广泛。45 参考文献[1]MidoriTanakaTakahikoHoriuchi,ShojiTominaga.Colornamingexperimentsusing2Dand3Drenderedsamples[J].ColorRes.Appl.2015,Vol.40(3).[2]MKrálik,ŽákováK.InteractiveWebGLModelofHydraulicPlant[J].IFAC-PapersOnLine.2015,48(29):146-151.[3]XiaJ.Y.,B.J.Xiao,DanLi,etal.InteractiveWebGL-based3DvisualizationsforEASTexperiment[J].FusionEngineering&Design.2016.112:p.946-951.[4]AnderssonSGöranssonJ,AnderssonJGS.VirtualTexturingwithWebGL[J].2012.[5]BSawicki,ChaberB.Efficientvisualizationof3Dmodelsbywebbrowser[J].Computing.2013,95(1):661-673.[6]EvansAlun,MarcoRomeo,ArashBahrehmand,etal.3Dgraphicsontheweb:Asurvey[J].Computers&Graphics.2014.41(1):p.43-61.[7]李连民,翟阳阳.基于WebGL的汽车3D展示系统的创建[J].电子技术与软件工程.2017(11):p.72-72.[8]LavouéGuillaume,LaurentChevalier,FlorentDupont.Streamingcompressed3DdataonthewebusingJavaScriptandWebGL[J].Neuroimage.2013.84(1):p.265-278.[9]JiménezJ,A.M.López,JCruz,etal.AWebplatformfortheinteractivevisualizationandanalysisofthe3DfractaldimensionofMRIdata[J].JournalofBiomedicalInformatics.2014.51(31):p.176.[10]苏亚光,王冬,刘佳.通过Three.js引擎加载STL模型[J].电脑编程技巧与维护.2016(10):p.7-8.[11]王腾飞,刘俊男,周更新.基于Three.js3D引擎的三维网页实现与加密[J].企业技术开发.2014.33(2):p.79-80.[12]艾达,乔明明,李敏.Web3D技术综述[J].微型机与应用.2014(2):4-7.[13]陈新林,卢伟娜.基于Web的虚拟校园的构建及漫游系统的实现[J].电脑知识与技术.2009,5(17):4420-4421.[14]NyamsurenPurevdorj,SooHongLee,HyunTaeHwang,etal.Aweb-basedcollaborativeframeworkforfacilitatingdecisionmakingona3Ddesigndevelopingprocess[J].JournalofComputationalDesign&Engineering.2015.2(3):p.148-156.[15]LevinD.Mesh-independentsurfaceinterpolation[J].GeometricModelingforScientificVisualization.2004:37-49.[16]HTML5[EB/OL].https://en.wikipedia.org/wiki/HTML5.2018-3-8.[17]梁仲智.基于HTML5的跨终端Web生成系统的设计与实现[D].中山大学.2013.[18]张焱洪.基于web3d技术的数字博物馆设计与实现[D].吉林大学.2013.[19]刘海娜.基于HTML5的全景漫游技术研究[D].郑州大学.2013.46 [20]梁国健.基于Ajax技术和HTML5的实验室管理系统的设计与实现[D].中山大学.2012.[21]梁栋.基于HTML5的校园全景漫游系统研究与实现[D].四川师范大学.2015.[22]纪寿庆.基于HTML5的全景漫游系统制作平台的设计与研究[D].兰州交通大学.2015.[23]魏书寒孙麒.基于HTML5和WebGL的三维智慧社区管理系统的设计与研究[J].工业控制计算机.2017,30(5):139-140.[24]魏云申.基于WebGL的全景3D漫游系统的设计与实现[D].南京大学.2016.[25]ParisiTony.Programming3DApplicationswithHTML5andWebGL:3DAnimationandVisualizationforWebPages[M].2014:O'ReillyMedia,Inc.[26]荣艳冬.基于WebGL的3D技术在网页中的运用[J][J].网络空间安全.2015,6(8):90-92.[27]JoJJangI.Across-browser,web-basedgeospatialopenplatformusingHTML5andWebGL[J].InternationalConferenceonInformationandCommunicationTechnologyConvergence.2017:1070-1073.[28]https://github.com/mrdoob/three.js/[J].[29]DirksenJos.LearningThree.js:TheJavascript3DLibraryforWebGL[M].2013.[30]王烈.基于WebGL的三维算法演示系统的设计与实现[D].山东师范大学.2017.[31]顿儒源..基于WebGL的织物三维展示系统[D].浙江大学.2016.[32]徐秀勤.浅谈JavaScript语言中文档节点访问技术[J].电子制作.2013(14):71-71.[33]房体盈.基于JavaScript技术的WebGIS设计与实现[D].大连理工大学.2008.[34]王建设,徐金梅.基于JSP的论文文献资源管理网站开发[J].计算机与数字工程.2011,39(2):207-210.[35]张岚.基于JAVAWEB技术旅游服务网站系统设计与实现[D].电子科技大学.2012.[36]夏金瑶.基于WebGL的EAST可视化系统[D].中国科学技术大学.2017.[37]殷永利.多用户虚拟环境感知模型及其关键技术研究[D].西安电子科技大学.2007.[38]杨成杰,吴冲龙,翁正平.矢量剪切技术在地质三维建模中的应用[J].武汉大学学报(信息科学版).2010,35(4):419-422.[39]黄蓝枭.游戏引擎中特效的实时渲染技术研究[D].电子科技大学.2008.[40]杨润斌,梁文章,陈姝.基于WebGL的3D动画实时播放系统[J].计算机系统应用.2015,11(58-63).47 致谢三年的研究生生活即将结束，回首三年的学习与生活，感受到了自己的成长与蜕变，心中满怀感恩。在即将毕业之际向辛勤指导我的导师、热心帮助我的同学以及不断鼓励我的家人和朋友表示最真挚的感谢并送上最美好的祝福。首先，我要感谢的是我的导师陈姝副教授，无论是在学习上还是生活中，都给予了我很大的帮助。由于自身能力的不足与经验的缺乏，在实验过程中遇到了不少困难，经过陈老师细心的指导，这些困难才被一一解决。本文从论文的选题到正文的撰写，陈老师都给予了我悉心的教导和莫大的帮助。陈姝老师严谨的治学态度和良好的教学方式使我受益匪浅。除此之外，陈老师还让我们业余时间组织春游，放松了大家的心情，提高了学习效率。在此，谨向我尊敬的导师表示崇高的敬意和由衷的感谢！其次，我还要感谢信息工程学院的老师们给我们提供了良好的科研氛围，使我们可以安心的进行学术研究。再次，我要感谢实验室的全体成员、班上的同学以及我的室友，他们不论是在学习还是生活中都给予了我很多关心和鼓励，使我度过了充实且有意义的研究生生活。特别要感谢的是师兄杨润斌和倪佳佳以及同门匡文彬，他们在科研方面为我提供了很多的关心和帮助。最后，我要感谢我的父母家人对我的支持和鼓励。他们的默默付出和无私奉献让我在前进的路上充满了力量。48 附录A攻读硕士学位期间发表的论文已发表论文：[1]郭明金,倪佳佳,陈姝.混合卷积神经网络的人脸验证[J].计算机系统应用.2018.27(2):24-29.[2]郭明金，陈姝.基于Web的3D模型浏览与交互系统的研究与实现[J].计算技术与自动化.（已录用）49
