基于Three.js無插件三維模型展示研究

何東琴 王聰華 龔嘯

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

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

中圖分類號(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)頁制作技術(shù)的不斷發(fā)展，網(wǎng)頁技術(shù)在PC端和移動(dòng)端也越來越成熟。近年來HTML5規(guī)范的逐步落地和WebGL等技術(shù)的成熟，通過更加合理的網(wǎng)頁技術(shù)實(shí)現(xiàn)3D網(wǎng)頁成為可能。

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

1 基于Web3D無插件研究

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

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

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

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

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

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

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

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

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

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

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

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

//創(chuà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）；

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

function animate（） {

//幀動(dòng)畫

requestAnimationFrame（animate）；

//更新屏幕畫面

render（）； }

上面提到了THREE.TrackballControls，要使它有效，還需要在animate函數(shù)里去更新它。我們在render（）函數(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é)束語

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

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

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

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

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

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

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

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

[4] 榮艷冬.基于Web GL的3D技術(shù)在網(wǎng)頁中的運(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] 劉愛華，韓勇，張小壘等.基于WebGL技術(shù)的網(wǎng)絡(luò)三維可視化

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