基于Three.js的機械產品展示研究

姚震 仲梁維 陳彩鳳

摘 要：普通的商品網頁展示方法很難滿足機械產品的展示要求。隨著HTML5的出現以及WebGL技術的推廣，在網頁上展示三維機械模型有了新的解決方案。提出了基于Three.js三維模型展示平臺的構建方法。對網頁上簡單的三維場景顯示流程和場景中三維模型的交互進行了分析，借助WebGL的第三方類庫Three.js，免去了網頁3D展示所需的渲染插件麻煩，顯示了WebGL的開放性、免插件、跨平臺、硬件加速的優(yōu)勢。用戶可在網頁面上觀看設計的三維效果，操作簡便，效果很好。

關鍵詞：HTML5；無渲染；WebGL；Three.js；三維模型

DOI：10.11907/rjdk.172850

中圖分類號：TP317.4

文獻標識碼：A 文章編號：1672-7800（2018）005-0187-04

Abstract：The general merchandise webpage display method is difficult to meet the display requirements of mechanical products. With the emergency of HTML5 and the promotion of WebGL technology， a new solution is provided for the display of three-dimensional mechanical models on webpages. In order to emphasize the construction and implementation of a realistic mechanism， we use Three. js of WebGL′s third-party library to eliminate the rendering plug-ins required for displaying a web page in 3D， and present a three-dimensional model display platform based on Three.js. The interaction between the simple 3D scene display process and the 3D model in the sceneis analysed. It shows the advantages of WebGL's openness， plug-in-free， cross-platform， hardware acceleration. The three-dimensional design model created on the web page is convenient for the user to view the designed three-dimensional effect on the web page. The operation is simple and has achieved good results.

Key Words：HTML5； no plug-in；WebGL； Three.js； three-dimensional model

0 引言

當前，計算機和互聯(lián)網技術在各領域都得到了廣泛應用，特別是Web3D技術。隨著對網頁體驗要求的不斷提高，網頁正逐漸從傳統(tǒng)的二維平面模式向交互式三維模式發(fā)展。早期的三維圖形采用的Web3D技術主要有VRML、GL4Java、JAVA3D、Fluid3D、Superscape（VRT）、Vecta3D、Cult3d等，這些技術通常需要安裝大小不等且封裝性很強的插件來支撐，使得用戶體驗感降低，系統(tǒng)移植也不靈活[1]。工業(yè)設備的三維動畫演示都要借助專業(yè)的機械建模軟件，如SolidWorks、PRO/E、UG等。當建模及演示算法設計好后，演示時都需要依賴三維軟件，于是將需要演示的動畫錄制成視頻文件，再在客戶面前展示，這種方式造成客戶無法體驗系統(tǒng)的交互性。因此，人們開始尋求一種開源且免插件并能在不同平臺網頁中都具有良好渲染與交互效果的展示方法。WebGL的出現克服了傳統(tǒng)三維網頁技術存在的兼容性差、高成本、高門檻以及專業(yè)建模軟件的依賴性等缺點，只需借助瀏覽器就能體驗3D交互頁面。

增加了新功能的HTML5和具有獨特的三維繪圖標準的WebGL技術，只需借助于瀏覽器就可對三維機械模型進行輕松訪問和操作。本文研究了三維機械的動畫演示，提出了基于WebGL第三方庫Three.js的實驗系統(tǒng)，用戶在客戶端便可體會到三維模型逼真的3D效果，具有較高的應用價值[2]。

1 關鍵技術

1.1 產品展示研究現狀

網絡產品展示形式有：

（1）購物網站商品展示。購物網站首先將一些普遍的應用進行發(fā)布，再將所需展示的產品進行發(fā)布，這樣用戶就可以看到簡單且直觀的效果圖。但是，這種顯示存在不足：①網速限制了在網頁上商品圖片的數量，對于像素較大且清晰度較好的圖片顯示有一定困難，用戶不能很好地了解商品的細節(jié)，影響了商品的展示；②所展示的商品角度由展商預先設定，用戶無法看到所需角度的產品圖片；③ 商家為了突出所展示商品的畫面效果，會在特定條件下拍攝，降低了商品的真實感。

（2）視頻展示。視頻展示是指直接從不同角度將商品以視頻的形式展現出來。與圖片展示相比，視頻表現出的信息量更大，但缺點是所展示商品的信息、主題和背景都由展覽商預先設定，很難滿足用戶的個性化需求。

上述展示方法一般只適用于一些中小型商品，對于機械產品而言，光靠文字、圖片介紹產品是不夠的。機械產品展示除了注重外觀展示外，更加注重的是內在結構、運行狀態(tài)以及安裝操作甚至維修等[3]。

1.2 以HTML5標準為載體呈現三維圖像

在HTML5之前，并不是所有瀏覽器都支持HTML、CSS和JavaScript，這就造成同一個頁面在不同瀏覽器中效果的不同。 HTML5對以前的技術進行總結并添加了一些新的功能，制訂出了新的規(guī)范，致力于打造一種操作方便、內容豐富、免插件且跨平臺性更好的產品，實現各系統(tǒng)平臺的無縫鏈接與交互，目前來看效果相當不錯，部分主流瀏覽器支持HTML5，如 Firefox、 Opera、Chrome、IE9+等 [4]。

1.3 基于WebGL的畫面渲染

WebGL本身是一套JavascriptAPI，也是一種3D繪圖標準，它將OpenGL ES（OpenGL for Embedded Systems）2.0與JavaScript相結合，借助于HTML5的Canvas元素進行渲染，可以在網頁上創(chuàng)建三維復雜場景與模型。與早期Web3D實現相比，WebGL解決了兩大關鍵問題：①WebGL通過Javascript對圖像進行宣染，對瀏覽器插件的依賴?。虎赪ebGL可通過OpenGL ES2.0與底層CPU進行通信，可在大多數平臺上運行，兼容性好。此外，WebGL還有如下優(yōu)勢：首先，WebGL解決了網頁開發(fā)對渲染插件的依賴問題；其次，WebGL可以在大多數瀏覽器及平臺上運行，是開放的，提高了開發(fā)效率； 再次，WebGL支持CPU硬件加速，實現三維圖形渲染[5]。在生活中，基于WebGL的3D產品無處不在，從三維地圖到開源項目，如谷歌地圖、騰訊地圖、Open WebGlobal等，部分游戲也開始使用此類技術。

依據WebGL規(guī)范，通過對底層WebGL圖形接口進行簡單封裝，形成了一個出色的框架——Three.js。它通過掩蓋細節(jié)來加快開發(fā)效率，降低了開發(fā)者負擔，在瀏覽器3D效果方面表現也很優(yōu)異。Three.js提供了三維創(chuàng)建所需的基本元素，如點、線、面、矩陣等，通過將相機（ Cameras）、物體（objects）、光線（lights） 等添加到場景（Scene），借助渲染器（ renderer）進行場景渲染，即可實現基本的網頁三維模型展示。Three.js提供了大量的實例及其源代碼供開發(fā)者研究，可通過逆向工程快速而有效地創(chuàng)建三維模型。

2 基于Three.js的機械展示系統(tǒng)創(chuàng)建

三維場景的基本結構模塊如圖1所示。

2.1 渲染器設置

定義好場景中的三維模型，并添加好相機之后，通過調用渲染函數使存在于三維空間里的模型以二維平面的形式顯現出來。可以將渲染器和Canvas元素進行綁定，并在HTML中定義id的 Canvas元素：

其Renderer相關代碼如下：

Var render=new THREE. Render（{

Canvas：document.getElementById（‘MAINCanvas）

}）；

2.2 場景（Scene）設置

場景就是一個很大的三維空間，就像一個很大的容器，沒有任何復雜操作，程序開始時即可進行實例化，然后添加模型物體到場景中。相關代碼如下：

var scene；

function initScene（）

{

scene = new THREE.Scene（）；

}

2.3 照相機（Camera）設置

在Three.js中照相機設置主要有正投影和透視投影兩種方式，其目的是將三維空間里的物體模型映射到二維平面中，正投影中物體模型的大小與視點的距離無關，相反，透視投影中物體模型的大小與視點的距離會呈現出遠小近大的現象，而且照相機設置的位置不同，會呈現出不同的視角。值得注意的是Three.js使用的坐標系都是右手坐標系，而且照相機也應該添加到場景中，其相關代碼如下所示：

var camera；

function initCamera（） {

camera=new THREE.PerspectiveCamera（70，window.innerWidth/ window.innerHeight， 1， 10000 ）；

camera.position.z= 2000；}

2.4 光源（Light）設置

為了使場景中的視覺效果更好，可通過添加適當的光源來展現相應的主題和效果。為了模型在放大、縮小、旋轉時更好地顯示，需要多種光源結合，其代碼如下：

function initlight （） {

var ambientLight = new THREE.AmbientLight（0xffffff ）；

scene.add（ ambientLight ）；

var directionalLight = new THREE.DirectionalLight（ 0xffffff ）；

directionalLight.position.set（ 0， 1， 0 ）；

scene.add（ directionalLight ）；

var pointLight = new THREE.PointLight（ 0xff0000， 1， 500 ）；

ointLight.position.set（0，0，-200）；

scene.add（ pointLight ）；}

3 三維模型導入

通過HTML腳本即可創(chuàng)建一些簡單的三維模型，如正方體、球等規(guī)則的幾何體，而對于比較復雜的機械裝備，以簡單幾何體組合的方式顯然是不切實際的，但Three.js可以導入由3dsMax、PRO/E、UG以及SolidWorks制作的三維模型，通過相關軟件將其轉化成瀏覽器可加載的文件格式添加到場景中。模型導入借助不同的加載器，即一系列輔助函數，不同格式的模型對應不同的加載器，常用的幾種不同的加載器如表1所示。

這些加載器都遵循同樣的原則：

（1） 在網頁中包含[NameOfFormat]Loader.js文件。

（2） 使用[NameOfFormat]Loader.load（）函數從URL中加載。

（3） 檢查一下傳遞給回調函數的返回結果，并對它進行渲染[6]。

考慮到本文三維模型是在SolidWorks中建模所得，所以采用OBJLoader.js加載器，而此加載器需要的三維模型格式為.obj。首先在SolidWorks中建模，保存模型格式為.stl，再將模型導入到3DsMax中獲得.obj格式的三維模型，加載模型的主要代碼形式如下：

var loader=new THREE.OBJLoader（）；

loader.load（'obj/base1.obj'，function （base） {

base.rotation.x=Math.PI*0.5；

base.position.set（-450，450，0）；

scene.add（base）；

}）；

導入模型最終效果如圖2所示。

4 模型平移、旋轉、縮放

模型的平移、旋轉、縮放實際上是借助一些常見的相機操作控件對相機進行操作。當然，除使用控件外，還可通過設置相機的position屬性，調用lookAt（）函數改變相機的指向位置來移動相機。在以上研究的基礎上借助Three.js框架的軌跡球controls的控制，將加載器OBJLoader.js導入三維模型，便可實現與三維模型的交互，在場景中完成模型的平移、旋轉、縮放，選擇一個合適的角度及方位詳細地瀏覽三維模型結構。使用TrackballControls之前先創(chuàng)建控件，并綁定到相機上：

var trackballControls= new THREE.TrackballControls（ camera ）；

trackballControls.rotateSpeed = 1.0； //旋轉速度

trackballControls.zoomSpeed = 1.2； //變焦速度

trackballControls.panSpeed = 0.8； //平移速度

trackballControls.Zoom = false； //是否變焦

trackballControls.Pan = true； //是否平移

trackballControls.staticMoving = false； //是否有慣性

trackballControls.dynamicDampingFactor = 0.3； //動態(tài)阻尼系數，就是靈敏度

更新相機的位置可在render循環(huán)中完成。對相機的操作方式如表2所示。

5 3D模型驅動

機械模型可能由于尺寸龐大并且具有相當多的零部件，使一些非本行業(yè)的人根本無法想到這些機械模型是如何運動的，所以將這些運行場景集成在網絡頁面中具有重要意義。合理的網頁模型控制，可以很大程度上增強用戶體驗，增加頁面趣味性，減少焦慮感和乏味感[8]。模型本身是靜止的，可以通過函數改變其坐標位置和控件，以改變構件運動速度、旋轉角度[9]。

6 結語

本文應用WebGL技術，調用Three.js、OBJLoader.js、TrackballControls.js等加載器，借助OBJLoader.js導入外部建好的模型；通過Three.js自帶的渲染器（Renderer）、場景（Scene）、照相機（Camera）、光源（Light）以及著色器功能設置，使3D模型在網頁中給人以真實絢麗的3D效果；用TrackballControls.js實現鼠標的操作功能，最終實現網頁的3D展示功能，使用戶在客戶端無需安裝任何插件的情況下，完成對三維模型的交互，實現模型的平移、縮放、旋轉功能。

在Web3D中，所有動畫都是實時渲染的，對CPU和GPU資源的消耗很嚴重。對于大型的3D場景，要有一定的優(yōu)化措施。此外，實現平臺3D展示功能時，借助WebGL這一較新穎和具有突出優(yōu)勢的3D顯示技術，雖然具有不需要安裝插件實現3D展示的優(yōu)點，但也有其局限性[10]，并非適用于所有瀏覽器。

參考文獻：

[1] 任宏康，祝若鑫，李風光，等.基于Three.js的真實三維地形可視化設計與實現[J].測繪與空間地理信息，2015，38（10）：51-54.

[2] 王磊，高玨，金野，等.基于Web3D無插件的三維模型展示的研究[J].計算機技術與發(fā)展，2015（4）：217-220.

[3] 任萱.基于網絡的機械產品虛擬展示設計及研究[D].太原：太原理工大學，2013.

[4] 劉愛華，韓勇，張小壘，等.基于WebGL技術的網絡三維可視化研究與實現[J].地理空間信息，2012（5）：79-81.

[5] 許虎，聶云峰，舒堅.基于中間件的瓦片地圖服務設計與實現[J].地球信息科學學報，2010（4）：562-567.

[6] 梁宇瀾，唐敦兵，鄭力，等.基于Web的機械加工仿真委托服務平臺[J].計算機集成制造系統(tǒng)，2002（12）：997-1001.

[7] JOS DIRKESEN. Three.js開發(fā)指南[D].李鵬程，譯. 北京：機械工業(yè)出版社，2015.

[8] 伊卓君.以用戶體驗為中心的網頁交互設計理論探索[J].現代裝飾，2011（8）：48-49.

[9] 霍冬，鄭偉華，盛步云.基于WebGL的機械產品三維展示技術研究[J].制造業(yè)自動化，2013，9（35）：73-77.

[10] 劉陽，張兵，樊鳳彬.基于虛擬現實技術的機械產品全景顯示系統(tǒng)開發(fā)[J].科技資訊，2012，35（8）：1-2.

（責任編輯：杜能鋼）