基于Three.js无插件三维模型展示的研究.docVIP

基于Three.js无插件三维模型展示的研究 　　摘 要： 应用WebGL技术的Three.js框架为三维网页的开发提供了很好的技术解决方案。Three.js框架的应用可以免去网页3D展示所需要下载渲染插件的麻烦，Three.js框架还可以把三维模型的OBJ格式很方便的加载到网页中来展示。文章探讨了Three.js框架技术，并对网页上展示三维模型进行了分析。 　　关键词： 无插件； 三维模型； Three.js； 3D展示 　　中图分类号：TP311 文献标志码：A 文章编号：1006-8228（2018）03-18-03 　　Research on plug-in less 3D model demonstration based on Three.js 　　He Dongqin， Wang Conghua， Gong Xiao 　　（Xizang Minzu University， Xianyang， Shannxi 712082， China） 　　Abstract： The Three.js framework with WebGL technology provides a good technical solution for the development of 3D web pages. The application of the Three.js framework can avoid the trouble of downloading the rendering plug-ins during 3D web page displaying. The Three.js framework can also easily load the OBJ format of 3D model into the web page to display. This paper discusses the Three.js framework technology and analyzes the 3D model displaying on the web page. 　　Key words： plug-in less； 3D model； Three.js； 3D display 　　0 引言 　　在互联网的各个领域中，Web应用的发展和变化是最快的，它已经成为当今网络技术研究的重点。随着网页制作技术的不断发展，网页技术在PC端和移?佣艘苍嚼丛匠墒臁＝?年来HTML5规范的逐步落地和WebGL等技术的成熟，通过更加合理的网页技术实现3D网页成为可能。 　　为了使博物馆、文物馆等藏品拥有一个良好的展示交互平台，游客可以方便地在线观看展品的三维立体效果，实现资源高度共享。目前很多博物馆都建立了三维的网上博物馆，很多博物馆的内部也有专门的设备三维的展示藏品。基于Web3D的虚拟三维模型近年来得到广泛的应用，但之前的三维模型展示方式需要在客户端浏览器安装一个专门的渲染插件，且编程接口特别复杂。如今使用较多的虚拟现实软件VRP，Virtools，Unity3D等都需要安装相应的渲染插件[1]。 　　1 基于Web3D无插件研究 　　Three.js是一款基于WebGL的开发框架。它封装了WebGL底层的图形接口，这是调用底层0penGLES图形库的一个JavaScript接口，从而降低了使用WebGL的难度[2]。Three.js属于HTML5技术的一个分支。它提供了可以直接访问的JavaScript API，允许在未安装任何插件的浏览器端下进行2D/3D硬件加速渲染。它可以很容易地用来创建各种三维场景包括摄像机、光影、材质等各种对象。WebGL是通过网页中的新型标签对三维模型进行显示。通过增加OpenGL ES2.0的一个JavaScript绑定，WebGL可以提供HTML5 Canvas的硬件3D加速渲染，以便Web开发人员就可以借助系统显卡来[2]。在浏览器里更流畅地展示模型和3D场景。Three.js是一个轻量级的用于在浏览器中创建3D计算机图形图像应用程序的JavaScript库。Three.js封装了底层的图形接口，使得程序员能够在无需掌握繁冗的图形学知识的情况下，也能用简单的代码实现三维场景的渲染[3]。 　　2 基于Three.js三维模型显示 　　Three.js是依托网页创建三维物体并显示，three.js可以将二维数据以三维方式呈现出来，三维场景漫游将成为Web的主要内容，这对Web的影响是革命性的[4]。在网上展示3D物体，主要包含以下几个方面。 　　⑴ 创建三维场景：放置所有物体的空间容器，对应现实的三维空间，其中后续添加的所有物体都是添加到场景中去，它相当于一个大容