李芳芳 方澤文 岑崗 汪文彬

摘 要： 應(yīng)用WebGL技術(shù)的Three.js框架為三維網(wǎng)頁(yè)的開(kāi)發(fā)提供了很好的技術(shù)解決方案。Three.js框架的應(yīng)用可以免去網(wǎng)頁(yè)3D展示所需要下載渲染插件的麻煩，Three.js框架還可以把三維模型的OBJ格式很方便的加載到網(wǎng)頁(yè)中來(lái)展示。文章探討了Three.js框架技術(shù)，并對(duì)網(wǎng)頁(yè)上展示三維模型進(jìn)行了分析。

關(guān)鍵詞： 無(wú)插件； 三維模型； Three.js； 3D展示

中圖分類(lèi)號(hào)：TP311 文獻(xiàn)標(biāo)志碼：A 文章編號(hào)：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 引言

在互聯(lián)網(wǎng)的各個(gè)領(lǐng)域中，Web應(yīng)用的發(fā)展和變化是最快的，它已經(jīng)成為當(dāng)今網(wǎng)絡(luò)技術(shù)研究的重點(diǎn)。隨著網(wǎng)頁(yè)制作技術(shù)的不斷發(fā)展，網(wǎng)頁(yè)技術(shù)在PC端和移動(dòng)端也越來(lái)越成熟。近年來(lái)HTML5規(guī)范的逐步落地和WebGL等技術(shù)的成熟，通過(guò)更加合理的網(wǎng)頁(yè)技術(shù)實(shí)現(xiàn)3D網(wǎng)頁(yè)成為可能。

為了使博物館、文物館等藏品擁有一個(gè)良好的展示交互平臺(tái)，游客可以方便地在線觀看展品的三維立體效果，實(shí)現(xiàn)資源高度共享。目前很多博物館都建立了三維的網(wǎng)上博物館，很多博物館的內(nèi)部也有專(zhuān)門(mén)的設(shè)備三維的展示藏品?；赪eb3D的虛擬三維模型近年來(lái)得到廣泛的應(yīng)用，但之前的三維模型展示方式需要在客戶端瀏覽器安裝一個(gè)專(zhuān)門(mén)的渲染插件，且編程接口特別復(fù)雜。如今使用較多的虛擬現(xiàn)實(shí)軟件VRP，Virtools，Unity3D等都需要安裝相應(yīng)的渲染插件[1]。

1 基于Web3D無(wú)插件研究

Three.js是一款基于WebGL的開(kāi)發(fā)框架。它封裝了WebGL底層的圖形接口，這是調(diào)用底層0penGLES圖形庫(kù)的一個(gè)JavaScript接口，從而降低了使用WebGL的難度[2]。Three.js屬于HTML5技術(shù)的一個(gè)分支。它提供了可以直接訪問(wèn)的JavaScript API，允許在未安裝任何插件的瀏覽器端下進(jìn)行2D/3D硬件加速渲染。它可以很容易地用來(lái)創(chuàng)建各種三維場(chǎng)景包括攝像機(jī)、光影、材質(zhì)等各種對(duì)象。WebGL是通過(guò)網(wǎng)頁(yè)中的新型標(biāo)簽對(duì)三維模型進(jìn)行顯示。通過(guò)增加OpenGL ES2.0的一個(gè)JavaScript綁定，WebGL可以提供HTML5 Canvas的硬件3D加速渲染，以便Web開(kāi)發(fā)人員就可以借助系統(tǒng)顯卡來(lái)[2]。在瀏覽器里更流暢地展示模型和3D場(chǎng)景。Three.js是一個(gè)輕量級(jí)的用于在瀏覽器中創(chuàng)建3D計(jì)算機(jī)圖形圖像應(yīng)用程序的JavaScript庫(kù)。Three.js封裝了底層的圖形接口，使得程序員能夠在無(wú)需掌握繁冗的圖形學(xué)知識(shí)的情況下，也能用簡(jiǎn)單的代碼實(shí)現(xiàn)三維場(chǎng)景的渲染[3]。

2 基于Three.js三維模型顯示

Three.js是依托網(wǎng)頁(yè)創(chuàng)建三維物體并顯示，three.js可以將二維數(shù)據(jù)以三維方式呈現(xiàn)出來(lái)，三維場(chǎng)景漫游將成為Web的主要內(nèi)容，這對(duì)Web的影響是革命性的[4]。在網(wǎng)上展示3D物體，主要包含以下幾個(gè)方面。

⑴ 創(chuàng)建三維場(chǎng)景：放置所有物體的空間容器，對(duì)應(yīng)現(xiàn)實(shí)的三維空間，其中后續(xù)添加的所有物體都是添加到場(chǎng)景中去，它相當(dāng)于一個(gè)大容器。

⑵ 攝像機(jī)設(shè)置：在Three.js中，攝像機(jī)可以通過(guò)兩種方式將三維空間中的對(duì)象投影到二維空間：透視投影和正投投影。

⑶ 光源設(shè)置：為了更好地展示三維模型中的場(chǎng)景，根據(jù)具體的場(chǎng)景模型添加一個(gè)適合的光源，烘托出場(chǎng)景主體的美感。

⑷ 添加渲染：渲染器是3D引擎的核心部分，它完成繪制3D物體到屏幕上的任務(wù)。將3D空間中的物體對(duì)象映射到二維平面即電腦的顯示屏上，這是渲染器的功能，將定義了場(chǎng)景中的物體，設(shè)置好相機(jī)之后，就可以調(diào)用渲染器的渲染函數(shù)來(lái)渲染整個(gè)場(chǎng)景了。

⑸ 物體模型設(shè)置：場(chǎng)景模型可以是Three.js中自帶的規(guī)則模型，也可以是通過(guò)3D建模工具導(dǎo)出的相應(yīng)的模型文件。Three.js為不同的文件格式提供了許多相應(yīng)的.js文件，使用的時(shí)候和相機(jī)控件一樣先引入html文件中。本文主要以3DMAX導(dǎo)出.obj和.mtl文件加載到場(chǎng)景中進(jìn)行顯示。

⑹ 加載文件：首先是加載Three.js 3D引擎的庫(kù)文件，即引入Three.js文件。加載.obj三維模型的時(shí)候，可以只加載.obj文件，然后借助three.js引擎自定義材質(zhì)對(duì)象Material來(lái)加載材質(zhì)；也可以同時(shí)加載obj和mtl文件，此時(shí)需要引入OBJLoader.js和MTLLoader.js文件，MTLLoader.js文件封裝的構(gòu)造函數(shù)THREE.MTLLoader（）用來(lái)加載.mtl材質(zhì)文件。

⑺ 網(wǎng)格模型的構(gòu)建與導(dǎo)入、材質(zhì)的添加與燈光效果的添加，完成以上四步后，一個(gè)三維網(wǎng)頁(yè)的骨架就己經(jīng)搭建成功了，之后我們就可以在其中繪制構(gòu)建網(wǎng)格模型、添加材質(zhì)以及燈光等效果了。最終完成的效果如圖1所示。

圖1 OBJ模型最終效果圖展示

下面是展示模型的關(guān)鍵部分代碼：

//創(chuàng)建場(chǎng)景Scene

var scene=new THREE.Scene（）；

//添加方向光

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

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

scene.add（light）；

//創(chuàng)建相機(jī)

var camera=new THREE.PerspectiveCamera

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

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

camera.lookAt（scene.position）；

//創(chuàng)建渲染器

var renderer=new THREE.WebGLRenderer（）；

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

renderer.setClearColor（0xFFFFFF，1）；

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

document.body.appendChild（renderer.domElement）；

上面我們所做的，不過(guò)是靜態(tài)地往場(chǎng)景里添加元素。如果我們想讓元素移動(dòng)，就需要實(shí)現(xiàn)動(dòng)畫(huà)。一個(gè)簡(jiǎn)單實(shí)現(xiàn)動(dòng)畫(huà)的原理是，不斷更新屏幕畫(huà)面，animate（）做的就是這個(gè)。在animate（）里調(diào)用requireAnimateFrame（animate），就能實(shí)現(xiàn)畫(huà)面的循環(huán)更新。

function animate（） {

//幀動(dòng)畫(huà)

requestAnimationFrame（animate）；

//更新屏幕畫(huà)面

render（）； }

上面提到了THREE.TrackballControls，要使它有效，還需要在animate函數(shù)里去更新它。我們?cè)趓ender（）函數(shù)里進(jìn)行改變物體屬性的操作。

function render（） {

renderer.render（scene，camera）； }

3 性能分析

系統(tǒng)運(yùn)行的環(huán)境：

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

內(nèi)存為16.0GB；

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

操作系統(tǒng)：Windows 10 企業(yè)版64位操作系統(tǒng)；

瀏覽器：版本 63.0.3239.84（正式版本）（64位）。

4 結(jié)束語(yǔ)

基于當(dāng)前Web3D技術(shù)的快速發(fā)展，文中針對(duì)渲染過(guò)程中需要安裝插件的麻煩，提出一種無(wú)插件的渲染方法，采用WebGL技術(shù)，三維模型可直接在客戶端瀏覽器繪制，無(wú)需安裝任何插件。通過(guò)Three.js實(shí)現(xiàn)了3D導(dǎo)出模型直接在客戶端瀏覽器進(jìn)行渲染，但此技術(shù)也存在一定的局限性，要求客戶端瀏覽器需要支持WebGL，目前chrome、firefox、opera、safri基本上支持，IE11及以后支持展示。為了更好地配置三維場(chǎng)景中各模型的布局，設(shè)計(jì)了一個(gè)三維模型顯示平臺(tái)，可以對(duì)場(chǎng)景中所選模型進(jìn)行移動(dòng)、旋轉(zhuǎn)和縮放，使其能被更好的觀摩。WebGL技術(shù)與HTML5結(jié)合實(shí)現(xiàn)三維網(wǎng)頁(yè)已經(jīng)成為一種趨勢(shì)，此三維模型展示可應(yīng)用與網(wǎng)站展示、博物館、校史館、文物館的展示等，具有較強(qiáng)的應(yīng)用價(jià)值。

參考文獻(xiàn)（References）：

[1] 王磊，高環(huán)，金野，許華虎.基于Web3D無(wú)插件的三維模型展

示的研究[J].計(jì)算機(jī)技術(shù)與發(fā)展，2015.4：217-220

[2]王騰飛，劉俊男，周更新.基于Three.js3D引擎的三維網(wǎng)頁(yè)實(shí)

現(xiàn)與加密[J].企業(yè)技術(shù)開(kāi)發(fā)，2014.2：79-80

[3] 譚文文，丁世勇.基于WebGL和HTML5的網(wǎng)頁(yè)3D動(dòng)畫(huà)的

設(shè)計(jì)與實(shí)現(xiàn)[J].電腦知識(shí)與技術(shù)，2011.28：6981-6983

[4] 榮艷冬.基于Web GL的3D技術(shù)在網(wǎng)頁(yè)中的運(yùn)用[J].信息安

全于技術(shù)，2015.8：90-92

[5] 王維敏.Web3D技術(shù)探索及幾種Web3 D技術(shù)的比較選擇[D].

武漢大學(xué)碩士學(xué)位論文，2014.

[6] 方強(qiáng).基于WebGL的3D圖形引擎研究與實(shí)現(xiàn)[D].安徽大學(xué)

碩士學(xué)位論文，2014.

[7] 劉愛(ài)華，韓勇，張小壘等.基于WebGL技術(shù)的網(wǎng)絡(luò)三維可視化

研究與實(shí)現(xiàn)[J].地理空間信息，2012.5：79-81