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

2018-05-02何东琴王聪华龚啸

计算机时代 2018年3期

何东琴王聪华龚啸

摘要：应用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是通过网页中的新型标签

2 基于Three.js三维模型显示

Three.js是依托网页创建三维物体并显示，three.js可以将二维数据以三维方式呈现出来，三维场景漫游将成为Web的主要内容，这对Web的影响是革命性的[4]。在网上展示3D物体，主要包含以下几个方面。

⑴ 创建三维场景：放置所有物体的空间容器，对应现实的三维空间，其中后续添加的所有物体都是添加到场景中去，它相当于一个大容器。

⑵ 摄像机设置：在Three.js中，摄像机可以通过两种方式将三维空间中的对象投影到二维空间：透视投影和正投投影。

⑶ 光源设置：为了更好地展示三维模型中的场景，根据具体的场景模型添加一个适合的光源，烘托出场景主体的美感。

⑷ 添加渲染：渲染器是3D引擎的核心部分，它完成绘制3D物体到屏幕上的任务。将3D空间中的物体对象映射到二维平面即电脑的显示屏上，这是渲染器的功能，将定义了场景中的物体，设置好相机之后，就可以调用渲染器的渲染函数来渲染整个场景了。

⑸ 物体模型设置：场景模型可以是Three.js中自带的规则模型，也可以是通过3D建模工具导出的相应的模型文件。Three.js为不同的文件格式提供了许多相应的.js文件，使用的时候和相机控件一样先引入html文件中。本文主要以3DMAX导出.obj和.mtl文件加载到场景中进行显示。

⑹ 加载文件：首先是加载Three.js 3D引擎的库文件，即引入Three.js文件。加载.obj三维模型的时候，可以只加载.obj文件，然后借助three.js引擎自定义材质对象Material来加载材质；也可以同时加载obj和mtl文件，此时需要引入OBJLoader.js和MTLLoader.js文件，MTLLoader.js文件封装的构造函数THREE.MTLLoader（）用来加载.mtl材质文件。

⑺ 网格模型的构建与导入、材质的添加与灯光效果的添加，完成以上四步后，一个三维网页的骨架就己经搭建成功了，之后我们就可以在其中绘制构建网格模型、添加材质以及灯光等效果了。最终完成的效果如图1所示。

图1 OBJ模型最终效果图展示

下面是展示模型的关键部分代码：

//创建场景Scene

var scene=new THREE.Scene（）；

//添加方向光

var light=new THREE. PointLight （0xffffff）；

light.position.set（0， 100， 100）；

scene.add（light）；

//创建相机

var camera=new THREE.PerspectiveCamera

（40， 600/400， 1， 500）；

camera.position.set（100，100，100）；

camera.lookAt（scene.position）；

//創建渲染器

var renderer=new THREE.WebGLRenderer（）；

renderer.setSize（window.innerWidth，window.innerHeight）；

renderer.setClearColor（0xFFFFFF，1）；

//将渲染器添加到html容器中

document.body.appendChild（renderer.domElement）；

上面我们所做的，不过是静态地往场景里添加元素。如果我们想让元素移动，就需要实现动画。一个简单实现动画的原理是，不断更新屏幕画面，animate（）做的就是这个。在animate（）里调用requireAnimateFrame（animate），就能实现画面的循环更新。

function animate（） {

//帧动画

requestAnimationFrame（animate）；

//更新屏幕画面

render（）； }

上面提到了THREE.TrackballControls，要使它有效，还需要在animate函数里去更新它。我们在render（）函数里进行改变物体属性的操作。

function render（） {

renderer.render（scene，camera）； }

3 性能分析

系统运行的环境：

CPU为Intel（R）Core（TM）i7-6700CPU @ 3.4OGHz；

内存为16.0GB；

显卡：AMD radeon（tm） r5 340x；

操作系统：Windows 10 企业版64位操作系统；

浏览器：版本 63.0.3239.84（正式版本）（64位）。

4 结束语

基于当前Web3D技术的快速发展，文中针对渲染过程中需要安装插件的麻烦，提出一种无插件的渲染方法，采用WebGL技术，三维模型可直接在客户端浏览器绘制，无需安装任何插件。通过Three.js实现了3D导出模型直接在客户端浏览器进行渲染，但此技术也存在一定的局限性，要求客户端浏览器需要支持WebGL，目前chrome、firefox、opera、safri基本上支持，IE11及以后支持展示。为了更好地配置三维场景中各模型的布局，设计了一个三维模型显示平台，可以对场景中所选模型进行移动、旋转和缩放，使其能被更好的观摩。WebGL技术与HTML5结合实现三维网页已经成为一种趋势，此三维模型展示可应用与网站展示、博物馆、校史馆、文物馆的展示等，具有较强的应用价值。

参考文献（References）：

[1] 王磊，高环，金野，许华虎.基于Web3D无插件的三维模型展

示的研究[J].计算机技术与发展，2015.4：217-220

[2]王腾飞，刘俊男，周更新.基于Three.js3D引擎的三维网页实

现与加密[J].企业技术开发，2014.2：79-80

[3] 谭文文，丁世勇.基于WebGL和HTML5的网页3D动画的

设计与实现[J].电脑知识与技术，2011.28：6981-6983

[4] 荣艳冬.基于Web GL的3D技术在网页中的运用[J].信息安

全于技术，2015.8：90-92

[5] 王维敏.Web3D技术探索及几种Web3 D技术的比较选择[D].

武汉大学硕士学位论文，2014.

[6] 方强.基于WebGL的3D图形引擎研究与实现[D].安徽大学