基于WebGL的汽車3D展示系統的創建

李連民++翟陽陽

摘 要隨著瀏覽器變得強大，現在大部分的瀏覽器不僅可以創建二維圖形和應用，可以充分利用GPU，創建漂亮的、高性能的三位應用。本文就基于WebGl技術下進行的汽車3D展示系統開發的一些關鍵問題進行了闡述和說明。

【關鍵詞】WebGL three.js 3D展示

在互聯網的各個領域中，發展和變化最快的就是Web應用的發展。隨著人們對網頁體驗的要求不斷提高，網頁正在逐漸地從傳統的二維平面網頁向交互式三維網頁發展。

普通的Web瀏覽器正日益成為能應用豐富3D交互式程序的一個平臺。2014年10月，萬維網聯盟完成了HTML5的標準制定。它通過JavaScript腳本實現Web交互式三維圖形制作程序的設計與實現，無需任何瀏覽器插件支持，它利用底層圖形硬件的加速功能功能的圖形渲染，是通過統一的、標準的、跨平臺的OpenGL ES2.0實現的。

1 基于WebGL的汽車3D展示系統的創建

1.1 本地庫

Three.js是一款WEBGL庫，它在處理瀏覽器3D效果方面表現優異。通過它可以創建鏡頭，物體，光線，材質等，還可以選擇渲染器：使用HTML5的Canvas來繪制場景，也可選擇使用WEBGL或是SVG來渲染。另外它還是開源的。盡管Three.js有種種好處，但是需要耗費大量時間研究實例，做逆向工程，搜尋具體的函數，偶爾還需要通過GitHub需求幫助。數據會通過HTML中的JavaScript接口進行載入。

1.2 汽車模型的實現

汽車模型的實現就是把三維物體顯示出來的過程。通過3DMAX進行模擬。調制完成后導出OBJ文件加載到Three.js中。全部轉成JS文件來處理。最后得到與真人最相似的汽車模型。

1.3 汽車紋理的實現

UV分解完成，將UV導出成一張線框圖，它定義了圖片上每個點的位置的信息，這些點與3D模型是互相聯系的，已決定表面紋理貼圖的位置。就好像虛擬的”創可貼”，UV就是將圖像上每一個點精確對應到模型物體的表面，通過不斷的調試達到最仿真的紋理。

1.4 汽車的渲染和相機

在場景中調用每個照相機的渲染方法。當在進行渲染時，會調用每個組件的渲染放大。當對MeshRender組件來進行渲染時，想綁定材質及著色器，然后在綁定網格對象，為了加速渲染，需要綁定對象，這意味著對兩個同樣材質和網格的對象進行渲染。相機是底層渲染的重要組件，每個相機都維護者一個layerMask屬性。將每個汽車對象與layerMask屬性相匹配，從而確定組件可渲染的。

2 基于WebGL的3D汽車展示系統的功能實現

2.1 汽車的選擇

首先創建汽車類型CARS，

頁面初次加載時用load（）方法loader.load（ CARS[ "veyron" ].url， function（ geometry ） { createScene（ geometry， "veyron" ） } ）；

點擊汽車庫的按鈕后會出現一個汽車類型列表，點擊任一個汽車類型通過調用switchCar（）方法來改變顯示的汽車

2.2 顏色的選擇

在創建汽車類型后給每個汽車類型加入相應的一些顏色例如CARS["gallardo"].materials={body：[["Orange"，mlib[ "Orange" ] ]

]}；點擊顏色庫按鈕同樣會彈出顏色庫，不過不同的汽車類型都有其特有的顏色，若汽車改變，通過剛剛說的在創建汽車類型的時候就加入的顏色綁定顏色庫里的顏色也會不同，在點擊任一顏色的時候通過調用attachButtonMaterials（）方法來變換汽車的顏色。

3 結束語

在現在的時代，人們對2D的視覺效果已經開始有了”膩”的滋味，從而對3D的效果充滿的期待。而WebGL和three.js技術的出現，使人們能夠輕而易取的在網頁上看到3D的效果，并且有一種身臨其景的感覺，而WebGL技術免去了開發網頁專用渲染插件的麻煩，可被用于創建具有復雜3D結構的網站頁面，實現3D效果。

參考文獻

[1]Tony parisi.HTML5與WebGL編程[M].北京：人民郵電出版社，2015.

[2]Jos Dirksen.Three.js開發指南[M].北京：機械工業出版社，2015.

作者簡介

李連民（1979-），男，現為河南科技大學軟件學院講師。研究方向為軟件架構、網絡安全。

翟陽陽（1996-），男，現為河南科技大學軟件學院本科生。研究方向為軟件開發。

作者單位

河南科技大學軟件學院 河南省洛陽市 471003