基于WebGL的工程制圖網(wǎng)絡(luò)虛擬模型庫(kù)的開(kāi)發(fā)

李興田， 張麗萍

(蘭州交通大學(xué)土木工程學(xué)院，甘肅 蘭州 730070)

基于WebGL的工程制圖網(wǎng)絡(luò)虛擬模型庫(kù)的開(kāi)發(fā)

李興田， 張麗萍

(蘭州交通大學(xué)土木工程學(xué)院，甘肅 蘭州 730070)

以AutoCAD為建模工具，對(duì)工程制圖中的組合體進(jìn)行建模，通過(guò)分析其STL格式的導(dǎo)出文件，利用WebGL技術(shù)實(shí)現(xiàn)了模型數(shù)據(jù)文件的解析讀取、著色器程序的編制和鼠標(biāo)交互處理程序的添加，研究開(kāi)發(fā)了運(yùn)行于瀏覽器的工程制圖模型庫(kù)。該模型庫(kù)模型豐富、交互友好，實(shí)現(xiàn)了服務(wù)器端一次部署，客戶端隨處瀏覽，方便了教師課堂教學(xué)，培養(yǎng)了學(xué)生的空間想象力，提高了學(xué)習(xí)效率，為虛擬模型庫(kù)的研發(fā)提供了思路。

工程制圖；模型庫(kù)；WebGL

工程制圖是工科專業(yè)學(xué)生必須掌握的一門(mén)專業(yè)基礎(chǔ)課，對(duì)于培養(yǎng)學(xué)生的繪圖讀圖、空間想象和工程設(shè)計(jì)能力至關(guān)重要。

由于工程制圖的空間性和抽象性，其課程教、學(xué)方面都存在一定難度。課堂教學(xué)中，為了幫助學(xué)生讀圖，增強(qiáng)學(xué)生的空間想象力和形象思維能力，教師往往以板書(shū)勾繪軸測(cè)圖、展示掛圖和實(shí)體模型、甚至要求學(xué)生動(dòng)手制作組合體模型等方式完成模型展示。板書(shū)勾繪雖然直接了當(dāng)，但僅適合簡(jiǎn)單模型，復(fù)雜模型的繪制費(fèi)時(shí)、費(fèi)力，占用課堂時(shí)間過(guò)多，不利于課堂內(nèi)容的講授；掛圖雖能表達(dá)較為豐富的模型信息，但是內(nèi)容固定、量少不全、攜帶不方便；實(shí)體模型需要一定的存儲(chǔ)空間，攜帶展示不方便，傳遞信息不足；學(xué)生動(dòng)手制作費(fèi)時(shí)、費(fèi)力，一般不適合課堂教學(xué)。課后學(xué)習(xí)中，由于缺少課堂輔導(dǎo)教具，學(xué)生在組合體投影圖的閱讀中存在很多困難，嚴(yán)重影響了學(xué)習(xí)質(zhì)量和效果。近些年，隨著多媒體進(jìn)入課堂，這些問(wèn)題得到了一定程度的解決。但總體而言，大多數(shù)多媒體課件對(duì)模型的展示還差強(qiáng)人意，主要表現(xiàn)在靜態(tài)、信息單一、無(wú)交互、無(wú)沉浸感等[1-2]。

為解決上述問(wèn)題，廣大工程制圖教師在教學(xué)中對(duì)模型的展示方式和方法做了很多探索[3-4]，具有代表性的是 3D工程制圖虛擬模型庫(kù)[5-7]。由于技術(shù)發(fā)展的制約，這類模型庫(kù)通?；赩RML或X3D技術(shù)，其場(chǎng)景、節(jié)點(diǎn)腳本的構(gòu)建和編寫(xiě)繁瑣冗長(zhǎng)，而且腳本語(yǔ)言及媒體文件不能被瀏覽器直接解析顯示，需要額外的瀏覽器插件，不僅對(duì)開(kāi)發(fā)者的要求較高，而且程序擴(kuò)展性受到限制，平臺(tái)兼容性較差。

隨著WebGL技術(shù)的誕生，上述問(wèn)題得到了很好的解決。WebGL是免費(fèi)授權(quán)的、跨平臺(tái)的應(yīng)用程序接口API，其將OpenGL ES 2.0作為在HTML網(wǎng)頁(yè)內(nèi)繪制3D圖形的底層函數(shù)，并作為低級(jí)別文檔對(duì)象模型的接口加以開(kāi)放。WebGL使用OpenGL渲染語(yǔ)言GLSL ES，并與其他3D內(nèi)容的上下層進(jìn)行捆綁，最后通過(guò)Javascript編程接口，可以創(chuàng)建內(nèi)容動(dòng)態(tài)、交互友好的 Web應(yīng)用，其技術(shù)架構(gòu)如圖 1所示。WebGL技術(shù)完美地解決了現(xiàn)有Web頁(yè)面顯示3D圖形的問(wèn)題[8-9]：①通過(guò)HTML腳本本身實(shí)現(xiàn)Web頁(yè)面顯示3D圖形，無(wú)需任何瀏覽器插件支持；②利用統(tǒng)一、標(biāo)準(zhǔn)和跨平臺(tái)的OpenGL接口和底層圖形硬件加速功能實(shí)現(xiàn)圖形渲染，具有良好的跨平臺(tái)能力。

圖1 WebGL技術(shù)架構(gòu)

本文討論如何通過(guò)WebGL技術(shù)，創(chuàng)建具有良好的兼容性、優(yōu)秀的跨平臺(tái)能力、交互機(jī)制完善、模型顯示全面、部署簡(jiǎn)單、使用方便的工程制圖模型庫(kù)，從而方便教師教學(xué)，幫助學(xué)生學(xué)習(xí)，提高學(xué)生的空間想象力和讀圖能力，提高學(xué)習(xí)效率。

1 工程制圖網(wǎng)絡(luò)虛擬模型庫(kù)的創(chuàng)建

1.1 總體設(shè)計(jì)

工程制圖模型庫(kù)的目的在于建立一個(gè)展示工程制圖教學(xué)模型的虛擬環(huán)境，便于教師展示模型，也便于學(xué)生對(duì)模型進(jìn)行交互操作和觀察，從而培養(yǎng)和提高其空間思維能力。所以，工程制圖模型庫(kù)應(yīng)該滿足以下條件：

(1) 包括相對(duì)完善的組合體模型，如基本體截切和相貫、常見(jiàn)的組合體以及土建工程結(jié)構(gòu)物(橋梁、隧道、涵洞和房屋建筑等)；

(2) 通過(guò)鼠標(biāo)的動(dòng)態(tài)交互操作，實(shí)現(xiàn)復(fù)雜模型的拆分和重組，方便對(duì)模型多角度、全方位的觀察；

(3) 通過(guò)鼠標(biāo)揀選，實(shí)時(shí)查詢并顯示結(jié)構(gòu)構(gòu)件的屬性信息；

(4) 服務(wù)器端一次部署，實(shí)現(xiàn) PC、平板和手機(jī)等各種終端的無(wú)安裝瀏覽。

圖2為工程制圖模型庫(kù)的總體設(shè)計(jì)圖。其中上部為模型庫(kù)的內(nèi)容設(shè)計(jì)，包括基本體截切相貫、常見(jiàn)的組合體以及復(fù)雜的工程結(jié)構(gòu)物；下部為軟件系統(tǒng)架構(gòu)，包括頁(yè)面表現(xiàn)層、模型顯示和交互以及模型信息顯示。頁(yè)面表現(xiàn)層利用 Lectora，通過(guò)鼠標(biāo)拖拽的方式搭建頁(yè)面框架并發(fā)布為HTML5、CSS3和JavaScript源代碼文件，此方式具有頁(yè)面框架搭建快速、頁(yè)面結(jié)構(gòu)擴(kuò)展性良好、源代碼便于添加改動(dòng)等優(yōu)點(diǎn)，保證了系統(tǒng)運(yùn)行的穩(wěn)定性；模型顯示和交互中，通過(guò)JavaScript語(yǔ)言調(diào)用OpenGL ES和Three.js圖形函數(shù)庫(kù)，讀入并解析外部模型數(shù)據(jù)文件，完成模型顯示，同時(shí)通過(guò)對(duì)DIV元素綁定鼠標(biāo)事件處理程序，實(shí)現(xiàn)模型的交互操作；模型信息顯示中，通過(guò)引入和定制jQuery函數(shù)庫(kù)，用彈出對(duì)話框的方式實(shí)時(shí)顯示模型信息，利用dat-GUI函數(shù)庫(kù)，添加了模型材質(zhì)動(dòng)態(tài)調(diào)整、客戶區(qū)背景顏色實(shí)時(shí)更改、照相機(jī)復(fù)位和模型重組等控件，方便用戶操作。

圖2 工程制圖模型庫(kù)總體結(jié)構(gòu)圖

1.2 模型可視化方法

工程制圖模型中，簡(jiǎn)單的組合體可通過(guò)JavaScript調(diào)用OpenGL ES進(jìn)行底層繪制，但是對(duì)于復(fù)雜的組合體，程序編寫(xiě)效率低下，而且可能無(wú)法完成。為了方便建模和后期模型庫(kù)的擴(kuò)展，本文采用三維建模軟件進(jìn)行建模，最后將模型數(shù)據(jù)在網(wǎng)頁(yè)上渲染顯示，其流程如圖 3所示。這種可視化方法包括 2個(gè)層面：①宏觀上，首先對(duì)工程制圖模型進(jìn)行三維建模，然后將DWG或者其他格式的模型文件進(jìn)行轉(zhuǎn)換，統(tǒng)一到STL格式，作為網(wǎng)頁(yè)外部調(diào)用文件，最后通過(guò)調(diào)用基于JavaScript的 WebGL執(zhí)行文件，在客戶端瀏覽器中完成渲染并顯示模型。②程序編碼層，首先對(duì)STL格式的外部調(diào)用文件進(jìn)行規(guī)律命名，利用JavaScript讀入并解析模型數(shù)據(jù)，同時(shí)計(jì)算模型包圍盒尺寸和模型原始位置坐標(biāo)，完成模型ID命名和編號(hào)，統(tǒng)一添加模型材質(zhì)；接著獲取渲染區(qū)所在層的尺寸并添加鼠標(biāo)事件處理程序；最后結(jié)合HTML和CSS完成模型的顯示和交互操作。

圖3 模型導(dǎo)入方法流程圖

1.2.1 STL文件解析

模型可視化中，首先是外部數(shù)據(jù)的讀入和幾何信息的提取。本文采用 AutoCAD建模，然后將模型導(dǎo)出為以ASCII格式存儲(chǔ)的STL文件。這種格式的文件記錄了描述三維模型的全部三角形面片數(shù)據(jù)，包括每個(gè)三角形的頂點(diǎn)坐標(biāo)和法向量，可讀性很強(qiáng)，易于程序編碼讀取和解析。圖4所示為典型的鐵路T型橋臺(tái)三維模型及其導(dǎo)出的STL格式文件，第一行以關(guān)鍵字“solid”開(kāi)始，后跟軟件或文件名；其后數(shù)據(jù)區(qū)塊均以關(guān)鍵字“facet...endfacet”區(qū)分，表達(dá)了其中一個(gè)三角形面片的法向量和頂點(diǎn)坐標(biāo)；最后以關(guān)鍵字“endsolid”結(jié)束文件。STL文件中，所有三角形面片的頂點(diǎn)坐標(biāo)均為正值，法向量向外，頂點(diǎn)數(shù)據(jù)逆時(shí)針排列。由STL格式文件特征可知，將STL文件做為外部數(shù)據(jù)進(jìn)行解析時(shí)，只要針對(duì)每個(gè)面片進(jìn)行處理。為了快速有效地獲得面片的法向量和坐標(biāo)數(shù)據(jù)，文中通過(guò)正則表達(dá)式匹配關(guān)鍵詞，將法向量等浮點(diǎn)數(shù)以字符串的形式保存在數(shù)組中，進(jìn)而運(yùn)用JavaScript函數(shù)“parseFloat”完成解析，獲得重要的面片浮點(diǎn)數(shù)據(jù)，程序關(guān)鍵代碼如圖4右下所示。

圖4 T型橋臺(tái)三維模型、STL文件及數(shù)據(jù)解析

1.2.2 可視化流程

獲取了三角形面片的相關(guān)數(shù)據(jù)后，需要將這些數(shù)據(jù)傳遞給顯卡進(jìn)行計(jì)算，最終完成模型可視化，其流程如圖5所示。JavaScript解析到三角形面片的頂點(diǎn)數(shù)據(jù)后，通過(guò)緩沖區(qū)對(duì)象將數(shù)據(jù)傳遞給顯卡，調(diào)用頂點(diǎn)著色器完成圖元裝配以及光柵化，通過(guò)片元著色器將像素顏色寫(xiě)入顏色緩沖區(qū)，最終在瀏覽器中顯示出來(lái)。這個(gè)過(guò)程中，可編程著色器起著非常重要的作用。

(1) 可編程著色器方法：也被簡(jiǎn)稱為著色器，用GLSL ES語(yǔ)言完成著色器方法的編寫(xiě)。GLSL ES語(yǔ)言的語(yǔ)法與 C語(yǔ)言較為類似，包括對(duì)矢量和矩陣類型的支持和操作，能夠訪問(wèn)矢量和矩陣元素的特殊分量名，支持許多內(nèi)置的與計(jì)算機(jī)圖形學(xué)相關(guān)的函數(shù)，能夠?qū)崿F(xiàn)更為逼真的視覺(jué)效果。

(2) 頂點(diǎn)著色器：用來(lái)描述頂點(diǎn)特性(如位置、顏色)的程序。通過(guò)頂點(diǎn)著色器可實(shí)現(xiàn)頂點(diǎn)坐標(biāo)變換、平面法線變換和單位化、紋理坐標(biāo)變換、模型視圖矩陣和投影矩陣的計(jì)算、光照陰影計(jì)算等。

圖5 模型可視化流程圖

①頂點(diǎn)坐標(biāo)轉(zhuǎn)換。由于模型位置的變化、觀察者視點(diǎn)位置和方向的改變以及可視范圍的大小都會(huì)影響圖形的顯示結(jié)果，在圖形顯示之前，需要對(duì)模型的所有頂點(diǎn)進(jìn)行各種變換?？紤]到最復(fù)雜的情況，如果模型順序出現(xiàn)平移、旋轉(zhuǎn)和縮放，則模型矩陣的計(jì)算為

其中，Tx、Ty和Tz是模型沿坐標(biāo)軸的移動(dòng)分量；θ是繞 Z軸旋轉(zhuǎn)的角度；Sx、Sy和Sz是沿坐標(biāo)軸方向的縮放系數(shù)。

如果已知視點(diǎn)坐標(biāo)、目標(biāo)位置和上方向向量，可得到由一組正交基確定的觀察坐標(biāo)系，進(jìn)一步確定的視圖矩陣為

其中[X,Y,Z]是一組正交基，確定了觀察坐標(biāo)系，(ex,ey,ez)是視點(diǎn)坐標(biāo)。

給定視角fovy、近裁剪面的高寬比aspect、遠(yuǎn)近裁剪面的位置f和n，就能確定四棱錐的可視空間，其投影矩陣為

考慮到模型位置的變化、視點(diǎn)位置和方向的改變、以及可視空間對(duì)圖形顯示的影響，則頂點(diǎn)坐標(biāo)的轉(zhuǎn)換公式為

②逐頂點(diǎn)計(jì)算顏色。如果考慮漫射光和環(huán)境光：

按照上述計(jì)算方法，利用WebGL內(nèi)置函數(shù)，編寫(xiě)了頂點(diǎn)著色器，其代碼如下。其中u_MvpMatrix為模型視圖投影矩陣，利用式(1)～(4)進(jìn)行計(jì)算，用該矩陣乘以頂點(diǎn)坐標(biāo)，將轉(zhuǎn)換后的頂點(diǎn)坐標(biāo)傳遞給著色器內(nèi)建變量gl_Position；接著歸一化光線方向和三角形面片的法線方向，然后進(jìn)行點(diǎn)積運(yùn)算，得到兩個(gè)方向之間夾角的余弦值；

最后利用式(5)～(7)完成模型光照計(jì)算。

(3) 片元著色器：進(jìn)行逐片元處理過(guò)程的程序，包括光照處理、紋理計(jì)算、霧化和顏色匯總等，可將頂點(diǎn)著色器傳遞的顏色等數(shù)據(jù)插值計(jì)算，寫(xiě)入緩沖區(qū)進(jìn)行顯示。如果模型中沒(méi)有考慮貼圖，則片元著色器的代碼相對(duì)簡(jiǎn)單，最主要的是下面一行代碼

其作用是將頂點(diǎn)著色器計(jì)算所得的頂點(diǎn)顏色傳遞給片元著色器的內(nèi)置變量，片元著色器進(jìn)行內(nèi)插計(jì)算并光柵化輸出可視化圖形。

1.2.3 模型交互操作

模型交互操作中，單擊鼠標(biāo)拾取成為關(guān)鍵環(huán)節(jié)。為了成功拾取模型，需要以下步驟：

步驟1. 注冊(cè)鼠標(biāo)事件。為了避免鼠標(biāo)事件對(duì)信息窗口的影響(如滾動(dòng)條)，鼠標(biāo)交互操作應(yīng)僅限于渲染窗口，所以對(duì)渲染窗口而非瀏覽器客戶區(qū)注冊(cè)鼠標(biāo)事件至關(guān)重要；模型交互操作中，模型的高亮反饋能夠增加交互的友好性，為此需要添加鼠標(biāo)移動(dòng)事件；當(dāng)模型揀選時(shí)，程序需實(shí)時(shí)捕獲鼠標(biāo)按鍵事件而進(jìn)行反饋。程序中注冊(cè)了以下鼠標(biāo)事件：

步驟2. 鼠標(biāo)坐標(biāo)歸一化。當(dāng)瀏覽器窗口的滾動(dòng)條位置發(fā)生變化時(shí)，DIV元素相對(duì)于客戶區(qū)的位置坐標(biāo)也會(huì)發(fā)生相應(yīng)變化，此時(shí)，射線選取中其起點(diǎn)坐標(biāo)也隨之變化，從而出現(xiàn)錯(cuò)位選取。為此，瀏覽器窗口滾動(dòng)條滾動(dòng)事件中需要及時(shí)獲取DIV元素的當(dāng)前位置，通過(guò)下式完成鼠標(biāo)坐標(biāo)歸一化，完成模型揀選。

其中，Xclient、Yclient分別為鼠標(biāo)在客戶區(qū)中的位置；Xleft、Xright分別為DIV元素左、右邊的當(dāng)前位置；Ytop、Ybottom分別為DIV元素上、下邊的當(dāng)前位置。

步驟3. 鼠標(biāo)事件處理程序。捕獲到各種鼠標(biāo)事件后，主要針對(duì)鼠標(biāo)移動(dòng)中的按鍵進(jìn)行處理。射線拾取中，和射線相交的實(shí)體較多，程序中選擇處理第一個(gè)相交的實(shí)體。對(duì)每一次鼠標(biāo)按鍵事件，首先判斷有無(wú)選中實(shí)體，如果選中了不同的實(shí)體，則將原來(lái)的實(shí)體顏色還原顯示，將新選中的實(shí)體高亮顯示并獲取模型 ID，為后續(xù)交互準(zhǔn)備必要的數(shù)據(jù)。下面為鼠標(biāo)事件處理的部分代碼：

var intersects = raycaster.intersectObjects( objects )

if ( intersects.length 〉 0 ) { // 有選中

if ( INTERSECTED != intersects[ 0 ].object ) { // 選中了不同的實(shí)體

if ( INTERSECTED ) { // 前一次選中的實(shí)體

... ... // 顏色還原

}

// 獲取離鼠標(biāo)最近的立體

INTERSECTED = intersects[ 0 ].object

... ... // 高亮顯示、獲取ID }

}

1.3 模型庫(kù)實(shí)例及平臺(tái)測(cè)試

本文以AutoCAD為建模工具，對(duì)工程制圖中常見(jiàn)的組合體和較為復(fù)雜的工程結(jié)構(gòu)物進(jìn)行了建模，將模型導(dǎo)出為STL格式數(shù)據(jù)文件。通過(guò)分析STL數(shù)據(jù)文件格式，利用 JavaScript 語(yǔ)言編寫(xiě)了STL文件解析、模型可視化和鼠標(biāo)事件處理程序，添加了導(dǎo)航和GUI模塊，實(shí)現(xiàn)了運(yùn)行于瀏覽器的工程制圖模型庫(kù)。如圖6所示，上部為導(dǎo)航菜單，可以實(shí)現(xiàn)不同模型的選擇顯示；右側(cè)窗口為模型顯示區(qū)，用戶可實(shí)現(xiàn)模型平移、拆分、組合和部件信息查詢以及模型和窗口背景顏色的切換等操作；左側(cè)窗口為信息顯示區(qū)，當(dāng)鼠標(biāo)在右側(cè)模型窗口中選中部件并按下鼠標(biāo)中鍵時(shí)，實(shí)現(xiàn)部件信息的切換顯示。

為實(shí)現(xiàn)系統(tǒng)平臺(tái)測(cè)試，本文基于臺(tái)式電腦，搭建了Windows7+ Apache HTTP Server 2.2服務(wù)器環(huán)境，配置了無(wú)線路由器，實(shí)現(xiàn)了局域網(wǎng)中有線網(wǎng)絡(luò)PC端和無(wú)線網(wǎng)絡(luò)手機(jī)移動(dòng)端的系統(tǒng)測(cè)試。出于性能和平臺(tái)兼容性的考慮，本文重點(diǎn)進(jìn)行了手機(jī)移動(dòng)端測(cè)試，其硬件環(huán)境為三星Note4，測(cè)試結(jié)果如圖 7所示。測(cè)試結(jié)果顯示：該系統(tǒng)能穩(wěn)定運(yùn)行于移動(dòng)瀏覽器，可以實(shí)現(xiàn)頁(yè)面的觸摸交互操作，不但能顯示結(jié)構(gòu)物模型，而且在模型的平移、縮放和旋轉(zhuǎn)等操作中取得了非常流暢的運(yùn)行效果。

圖6 工程制圖模型庫(kù)

圖7 移動(dòng)端模型庫(kù)

2 小 結(jié)

本文研究開(kāi)發(fā)了基于WebGL技術(shù)的工程制圖模型庫(kù)，該模型庫(kù)包含豐富的制圖模型，方便教師課堂教學(xué)和學(xué)生終端瀏覽；通過(guò)鼠標(biāo)事件和材質(zhì)切換，使模型揀選高亮顯示，增加了模型拖拽拆分和組合功能，添加了模型信息查詢和顯示功能，具有交互友好、形象直觀的特點(diǎn)；經(jīng)過(guò)服務(wù)器端一次部署，可供PC、平板和手機(jī)移動(dòng)端隨處瀏覽，極大地拓展了傳統(tǒng)課件使用上的時(shí)空限制；模型庫(kù)有效地培養(yǎng)了學(xué)生的空間想象力，增強(qiáng)了趣味性，提高了學(xué)習(xí)效率，也為工程制圖模型庫(kù)的開(kāi)發(fā)提供了思路。

[1] 孫小燕, 汪列隆. 三維虛擬模型庫(kù)對(duì)機(jī)械制圖教學(xué)的有效性研究[J]. 池州學(xué)院學(xué)報(bào), 2015, 29(3): 152-153.

[2] 熊 巍, 劉 林, 陳錦昌. 現(xiàn)代工程制圖課堂教學(xué)改革的探索與實(shí)踐[J]. 圖學(xué)學(xué)報(bào), 2014, 35(2): 296-300.

[3] 張淑艷, 雷光明, 成 彬, 等. 三維 CAD輔助工程制圖教學(xué)的方法[J]. 圖學(xué)學(xué)報(bào), 2014, 35(3): 464-468.

[4] 王炳達(dá), 許 琪, 姚文亮. 工程制圖虛擬模型庫(kù)研究與設(shè)計(jì)[J]. 機(jī)電信息, 2014, (15): 140-141．

[5] 何 麗, 孫文磊, 朱 穎. Web三維模型共享平臺(tái)在工程制圖教學(xué)中的應(yīng)用[J]. 機(jī)械工程與自動(dòng)化, 2015, (4): 49-51.

[6] 繆 君, 儲(chǔ) 珺, 張桂梅. 基于X3D的工程制圖網(wǎng)絡(luò)虛擬模型庫(kù)開(kāi)發(fā)[J]. 工程圖學(xué)學(xué)報(bào), 2011, 32(2): 122-126.

[7] 周海迎, 史冬敏, 湯蒂蓮. 《工程制圖》虛擬模型庫(kù)的開(kāi)發(fā)和應(yīng)用[J]. 東華理工大學(xué)學(xué)報(bào): 社會(huì)科學(xué)版, 2016, 35(1): 79-81.

[8] Parisi T. WebGL: up and running [M]. 北京: 人民郵電出版社, 2013: 1-14.

[9] Matsuda K, Lea R. WebGL編程指南[M]. 謝光磊, 譯.北京: 電子工業(yè)出版社, 2014: 1-7.

Development of Web Virtual Model Library of Engineering Drawing Based on WebGL

Li Xingtian, Zhang Liping
(School of Civil Engineering, Lanzhou Jiaotong University, Lanzhou Gansu 730070, China)

The composite solids in Engineering Drawing are modelled by using AutoCAD. Based on the exported files in the STL format for the models and WebGL, the data files for the models are read and parsed, a shading program and an interactive processing program for mouse event are developed, and a web virtual model library of solids for engineering drawing, which can be run in browsers is established. The library has a large number of models and a friendly graphical user interface. When installed on a server, the library can be accessed on client terminals, which facilitates classroom teaching and is helpful to spatial imagination ability of students, improve their study efficiency and provide reference for the development of other virtual model library.

engineering drawing; model library; WebGL

TP 391

10.11996/JG.j.2095-302X.2016060836

A

2095-302X(2016)06-0836-06

2016-05-24；定稿日期：2016-06-30

蘭州交通大學(xué)重點(diǎn)教改項(xiàng)目(JG2014Z03)

李興田(1981-)，男，甘肅會(huì)寧人，講師，碩士。主要研究方向?yàn)榻Y(jié)構(gòu)分析及土木工程計(jì)算機(jī)仿真。E-mail：lm_lxt@126.com