韓玉騰，　薛小雯，　王奇安

(江南大學 機械工程學院， 江蘇　無錫　214122)

?

三維模型庫電子教具設(shè)計

韓玉騰，薛小雯，王奇安

(江南大學 機械工程學院， 江蘇無錫214122)

工程制圖是高等工科類課程中的一門重要基礎(chǔ)課，主要研究工程圖樣的閱讀和繪制。在培養(yǎng)學生創(chuàng)造性思維、空間想象力和促進工業(yè)化進程等方面發(fā)揮著重要的作用。在計算機技術(shù)普及的今天，電子制圖已經(jīng)非常成熟，效果以及效率遠高于傳統(tǒng)的方法。因此，我們希望結(jié)合現(xiàn)在先進的三維軟件及網(wǎng)絡(luò)技術(shù)制作一款方便實用的電子教具來提高工程制圖的教學效果。通過三維軟件UG建模，導(dǎo)出立體不同角度的圖片，經(jīng)過Photoshop處理得到背景透明的圖片，再通過Flash進行制作立體成型動畫。動畫通過Dreamweaver編寫的網(wǎng)頁和Visual Basic編寫的單機播放器的媒介進行演示。

三維模型; 電子教具; 演示動畫; 網(wǎng)頁; 工程制圖

傳統(tǒng)的機械制圖教學主要以直尺、圓規(guī)、圖板為工具，以黑板、木模、掛圖為媒介，直觀性強、學生能夠?qū)嶋H動手操作，但互動性差，上課效率低，也不方便攜帶[1]。目前，部分教師主要采用課件加掛圖、實體模型的方式進行教學，這種方法可以直觀地反映立體的結(jié)構(gòu)，課件可以在有效時間內(nèi)更多地展示教學的內(nèi)容。但是掛圖和普通的工程圖的圖片都是二維圖，需要讀者有較強的讀圖能力，而且二維圖形學起來比較枯燥，考驗學生的耐心，同時二維圖形不能形象地表達模型的動態(tài)成型過程，對于剛接觸機械制圖的同學來說難以理解[2]。實體模型可以較好地演示幾何形體，但往往體積巨大，攜帶不方便，也不能靈活變動，同時實體模型在數(shù)量和表達能力上也受限制，只能演示固定的立體[3]。若要使學生更多地理解工程制圖的學習內(nèi)容，需要制作很多模型體。

隨著計算機技術(shù)的發(fā)展，多媒體教具的興起，使用電子教具的優(yōu)越性不言而喻，越來越多的制圖基礎(chǔ)課教師開始嘗試使用三維軟件來展示模型。三維軟件制作的立體模型立體感強，可以從不同角度演示立體形狀，也可以大致演示立體形成過程，但是往往打開速度緩慢，需要安裝專門軟件，展示時對于計算機的要求也較高，從不同角度觀察立體時往往需要手動控制，此外電腦間切換還有兼容性的問題。目前隨著三維軟件的不斷發(fā)展和網(wǎng)絡(luò)技術(shù)的普及，為三維模型電子教具的制作帶來技術(shù)保障和便利性。雖然近幾年三維教具已經(jīng)興起，但是目前市場上的三維教具仍然難以購買并且大部分都是屬于學校私有，制作出的模型也依賴三維軟件進行展示，不方便制圖課的使用。為更廣泛推廣三維模型教具，同時考慮到互聯(lián)網(wǎng)思維的優(yōu)越性，本設(shè)計首先采用了基于網(wǎng)站的網(wǎng)頁版本，只要有能上網(wǎng)的瀏覽器即可打開教具使用，目前大部分高校教室都配有電腦和網(wǎng)絡(luò)，極大地方便了教師使用，不需要再攜帶體積巨大的實體模型或者處理三維軟件遇到的各種bug，同時本三維教具還附帶單機版本在網(wǎng)絡(luò)不暢的情況下離線使用，方便教學。

1　三維模型庫電子教具設(shè)計基本流程

本設(shè)計主要基于本校教材，教師可以根據(jù)自己使用的教材制作配套的三維模型庫電子教具，開發(fā)的周期也較短?？紤]到其他高校的使用本設(shè)計已經(jīng)開源，接口豐富，自定義度高可以根據(jù)各高校的不同情況選擇不同的配套教材來自定義內(nèi)容，使教具更加符合教學大綱，使學生學習內(nèi)容更加豐富。本設(shè)計主要提供兩種使用方式，第一，將立體模型制作成三維模型庫，通過網(wǎng)頁整合起來，可掛到校內(nèi)網(wǎng)絡(luò)上，可以使教學不再受限制，提供網(wǎng)絡(luò)的教室和寢室里可以隨時調(diào)用三維模型的信息，方便教師課上教學和學生課下練習學習[4]。第二，提供離線版，單獨的播放器可以在離線狀態(tài)下播放動畫和視頻文件。

圖1教具設(shè)計流程

并且也開放所有接口和代碼，可以使用VB自定義增減功能來滿足不同情況下的使用，方便教師根據(jù)教學情況來更改內(nèi)容或者增加學生課下練習功能。

制作的流程如圖1所示，選取配套教程，將所需要制作動畫的立體分類，用UG分別進行實體建模；用UG自帶的導(dǎo)出圖片的功能，或截圖工具對實體截圖，并對形成立體的過程中的實體截圖成文件；用Photoshop對其進行去除背景處理，在Flash中制作成型動畫；最終將Flash動畫匯總在html文件中，完成三維模型庫的電子教具制作。

2　UG建模及模型圖片處理

2.1UG建模

根據(jù)目標的教材，確定要進行動畫制作的立體范圍和數(shù)目。立體可分切割體、相貫體、組合體和常用零件等類別[5]。制作切割體時需要繪制切割前和切割后的立體，并需要能單獨顯示切掉的部分。制作相貫體時需要單獨繪制各幾何體獨立部分的模型，或者在建模時通過布爾運算，使各部分單獨顯示。組合體和其他立體也是同樣，需要制作合適的圖片為動畫準備。制作模型時，注意將UG背景和模型設(shè)為統(tǒng)一的模式。

2.2圖片導(dǎo)出及處理

模型顯示調(diào)整到合適位置，常用的方位是正等軸測圖，調(diào)整到合適大小，后續(xù)圖片處理不再進行旋轉(zhuǎn)和移動操作。導(dǎo)出PNG格式圖片。以六棱柱切割為例，導(dǎo)出切割前六棱柱的圖片、切割后的圖片和被截取部分的圖片，如圖2，前后操作不能進行旋轉(zhuǎn)和縮放操作。在UG草圖模塊里，也將幾何體的工程圖導(dǎo)出，處理截圖。

圖2截取圖片示例

照片導(dǎo)入到Photoshop中，選中魔術(shù)橡皮擦工具，然后點擊圖片背景部分，背景即被去除，得到背景透明的圖片。選中裁剪工具，將圖片裁剪到剛剛包圍實體模型大小，方便在Flash中制作動畫。另存為PNG格式照片，按照圖片順序命名。

圖3　Photoshop工具

3　Flash動畫的制作

3.1動畫制作

動畫分為切割體、相貫體和組合體動畫。視圖的前后位置關(guān)系是通過圖層的上下遮擋關(guān)系表現(xiàn)的。圖層是含有文字或圖形等元素的膠片，一張張按順序疊放在一起。在各圖層的同一位置，上面的圖層中的元素遮擋下面圖層的元素，組合起來形成頁面的最終效果。根據(jù)此原理，將立體分解為多個圖層，不同圖層的上下位置和在時間軸上的位置就展示了立體模型的形成過程。

以六棱柱的切割體動畫為例，介紹制作動畫的原理和流程。首先分析形成切割立體需要的圖層素材：完整的六棱柱、最終的圖片、被截取的部分。將處理得到的三張PNG圖片導(dǎo)入到Flash的庫中作為3個元件。新建兩個圖層，分別布置切割后的部分，被切掉的部分，前者在上，在變形選項卡中進行縮放設(shè)置，縮放到適合畫面的大小，并保持兩圖層中的圖形對齊。新建兩個圖層放置截面，繪制相應(yīng)的截面1和截面2，如圖4所示。兩截面圖層位置在上層的被截取部分和下層最終幾何體之間[6]。

圖4　圖層的布置與幀的安放

將三個截面移動到首個關(guān)鍵幀和結(jié)束關(guān)鍵幀的合適位置，再選中截面的兩個關(guān)鍵幀之間任意一幀，右鍵創(chuàng)建傳統(tǒng)補間，會出現(xiàn)一條由初始關(guān)鍵幀指向終點關(guān)鍵幀的方向線。修改幀速率為12幀每秒。在截取部分圖層中，同樣創(chuàng)建傳統(tǒng)補間動畫，使被切掉的部分垂直移動到舞臺畫面外，如圖5。

圖5動畫移動效果

3.2按鈕插入及代碼

新建按鈕圖層，將自定義的按鈕元件拖放到按鈕圖層中，播放、暫停和停止按鈕的實例名稱分別命名為play_btn, pause_btn, stop_btn.選中第一幀，打開動作窗口，播放控制代碼如下：

stop();play_btn.addEventListener(MouseEvent.CLICK,yuanzhuqie1 );

functionyuanzhuqie1 (event:MouseEvent):void{ play( );}

其他代碼類似,將yuanzhuqie1改為動畫名稱，play()改為pause( )和stop( ).

3.3全角度展示部分及導(dǎo)出動畫

在UG中調(diào)整視圖，導(dǎo)出截圖，沿著一個方向旋轉(zhuǎn)，每轉(zhuǎn)過一定角度導(dǎo)出一張截圖。在Flash中新建一個展示部分圖層，緊跟動畫結(jié)束的后一幀，隔幾幀插入一關(guān)鍵幀，依次導(dǎo)入不同視角的圖片，連續(xù)播放時即形成旋轉(zhuǎn)動畫。相比三維軟件直接導(dǎo)出的演示視頻，此方法略復(fù)雜，但得到的文件小，畫面質(zhì)量高。最后測試影片，播放時檢查按鈕作用。發(fā)布設(shè)置中選擇Flash(.swf)類型，進行發(fā)布，完成動畫制作。

4　動畫匯總到網(wǎng)絡(luò)版和單機版課件中

當模型庫建立起來，就要有適當?shù)妮d體來整理動畫。雜亂無章的一堆模型不僅不利于進行系統(tǒng)學習，而且消磨學生的學習興趣，但是如果僅靠資源管理器進行管理和學習，效率并不高，不方便文件的分類管理。在互聯(lián)網(wǎng)思維的啟示下，我們選擇網(wǎng)頁作為整合的框架，這將具有很大的優(yōu)勢。首先網(wǎng)頁具有很好的兼容性，超文本標記語言html可以在不同終端甚至不同的操作系統(tǒng)中通用，而且較為簡單的網(wǎng)頁能在絕大部分的瀏覽器中運行，對于瀏覽器的要求非常低，不會出現(xiàn)類似于大型三維軟件的兼容性或者配置問題。其次，網(wǎng)頁的超鏈接功能，可以快速地定位到指定的模型，方便瀏覽和教師講課，例如在目錄列表中，要跳轉(zhuǎn)到包含模型的某一個網(wǎng)頁，可以直接通過改變超鏈接的位置實現(xiàn)，同樣可以實現(xiàn)返回上一模型位置。最后當動畫嵌入到網(wǎng)頁中后，是通過網(wǎng)頁播放器打開，不需要另外安裝單獨的播放器，避免了另外安裝播放器的煩瑣。

用Dreamweaver創(chuàng)建網(wǎng)頁，通過超鏈接的方式鏈接各個網(wǎng)頁[7]。在目錄列表網(wǎng)頁創(chuàng)建目錄，目錄鏈接到包含各動畫的網(wǎng)頁，成樹形結(jié)構(gòu)，如圖6。將教材中配套幾何體進行分類整理，每一類立體單獨列在一個目錄網(wǎng)頁中，目錄網(wǎng)頁分別鏈接到具體的每一個模型，形成一個三維模型庫。目錄列表的網(wǎng)頁為框架，同類的動畫集中在一起，方便進行系統(tǒng)學習。要在網(wǎng)頁中直接加上必要的超鏈接，例如返回目錄和翻頁功能的鏈接，相似模型之間的類比學習時，教師也可以按照需要自行添加。此外，如有余力，還可以添加一些高級代碼來美化網(wǎng)頁，增加學生的學習興趣。

圖6　網(wǎng)頁框架

單機版采用Visul Basic編程，同樣源于互聯(lián)網(wǎng)分享精神本設(shè)計共享源文件，方便修改配套的教材和模型，作為一個單機版程序，還能夠增加功能，變成一個對于教師來說更加個性化的教學軟件，提高教師上課效率[8]。添加播放器控制按鈕，如圖7所示，編程將其編譯成可執(zhí)行文件，可方便離線狀態(tài)下在電腦上播放需要的文件。

圖7　單機播放器界面

5　總結(jié)

本三維模型庫電子教具與工程制圖教材配合度高，主要用于《工程制圖》教學，同時單機版和網(wǎng)頁版均留有接口可供不同高校根據(jù)教材刪減和增加內(nèi)容，只需要兼容Dreamweaver即可，方便根據(jù)教材內(nèi)容靈活調(diào)整，提高教具使用效率。本教具的動畫均使用Flash制作，形象生動，成型動畫立體感強，使工程制圖初學者容易想象三維立體的形狀，有利于培養(yǎng)其空間想象能力，提升對制圖課程學習的興趣，避免了學生因為識圖的枯燥而對工程制圖產(chǎn)生恐懼。同時本設(shè)計結(jié)合網(wǎng)絡(luò)技術(shù)，基于互聯(lián)網(wǎng)應(yīng)用，實現(xiàn)現(xiàn)代化教學，有利于提高教學質(zhì)量。三維模型庫整合到網(wǎng)頁里，可以掛在校園網(wǎng)站內(nèi)，可以在教室內(nèi)的計算機直接訪問，云端存儲，方便靈活。即使在沒有網(wǎng)絡(luò)的狀態(tài)下，可以將網(wǎng)頁保存到本地，或者通過我們提供的獨立播放器進行課程學習。

[1]劉麗娟,孫培先,趙海暉,等. 工程制圖電子掛圖的研制[J]. 山東科技大學學報,2002,21(4):23-24.

[2]陳光，杜微，劉小東，等. 面向畫法幾何教學的新型教具開發(fā)和應(yīng)用研究[J]. 圖學學報, 2015,36(6):828-833.

[3]賀健琪. “機械制圖”仿真教具的開發(fā)與應(yīng)用[J]. 西安航空技術(shù)高等?？茖W校學報, 2008,26(5):71-72.

[4]何萍. 如何在機械制圖教學中運用現(xiàn)代化教學手段[J].中國職業(yè)技術(shù)教育(教學與教研), 2007(31):57-58.

[5]徐祖茂，陳立群，陳曉蕾，等. 機械制圖習題集[M].北京：高等教育出版社,2006:5-7.

[6]ACAA專家委員會. ADOBE FLASH CC 標準培訓(xùn)教程[M].北京：人民郵電出版社,2014：2-9.

[7]ACAA專家委員會. ADOBE DREAMWEAVER CC 標準培訓(xùn)教程[M].北京：人民郵電出版社,2014:1-7.

[8]哈弗爾森. Visual Basic 2013從入門到精通[M].北京：清華大學出版社, 2012:2.

責任編輯陳桂梅

Electronic teaching aid design of 3D model library

HAN Yuteng,XUE Xiaowen,WANG Qian

(CollegeofMechanicalEngineering,JiangnanUniversity,Wuxi214122,China)

Engineering drawing is an important basic course in higher engineering course, mainly involing reading engineering drawings and drawing. It plays an important role in cultivating students' creative thinking, imagination and promoting industrialization. Today, in the popularization of computer technology, electronic mapping has been very mature. Its effectiveness as well as efficiency is much higher than the traditional method. Therefore, we want to combine advanced 3D software and network technology to make a handy electronic aid to improve the teaching effect of engineering drawing. Through the three-dimensional modeling software UG, export stereo pictures of different angles, Photoshop to obtain transparent background images, making solid molding via Flash animation. Animation is presented by websites made by Dreamweaver and single player made by Visual Basic.

three-dimensional model; electronic teaching aid; flash demo; website; engineering drawing

2016-06-15

項目來源：江南大學大學生創(chuàng)新訓(xùn)練計劃資助(2015232Y)

韓玉騰(1995—)，男，山東日照人，本科生，研究方向：機械工程及其自動化；

薛小雯(1967—)，女，江蘇無錫人，副教授，研究方向：工程圖學機械設(shè)計；

10.13750/j.cnki.issn.1671-7880.2016.05.014

G 436; TP 37

A

1671-7880(2016)05-0051-04

王奇安(1995—)，男，江蘇常熟人，本科生，研究方向：機械工程及其自動化。