基于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物體，主要包含以下幾個方面。

⑴ 創建三維場景：放置所有物體的空間容器，對應現實的三維空間，其中后續添加的所有物體都是添加到場景中去，它相當于一個大容器。

⑵ 攝像機設置：在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].安徽大學

碩士學位論文，2014.

[7] 劉愛華，韓勇，張小壘等.基于WebGL技術的網絡三維可視化

研究與實現[J].地理空間信息，2012.5：79-81