基于Web的數(shù)控技術(shù)教學平臺的設(shè)計與實現(xiàn)

劉朝穩(wěn) 游明琳

關(guān)鍵詞：數(shù)控技術(shù)；HTML5；Three.js；網(wǎng)頁課件；教學平臺

1 概述

隨著信息技術(shù)快速發(fā)展，各種現(xiàn)代信息網(wǎng)絡(luò)技術(shù)被廣泛應(yīng)用到教育行業(yè)中。信息技術(shù)的發(fā)展，推動教育理念和教育方式的優(yōu)化和升級，提高了教學質(zhì)量。 國內(nèi)外多位學者研究表明，使用Web技術(shù)融入教學課堂中，對激發(fā)學生的上課積極性、培養(yǎng)學生的創(chuàng)新思維、提高教育質(zhì)量有著顯著效果[1-2]?？萍嫉倪M步，特別是信息技術(shù)的進步，利用信息技術(shù)來提升教學效果，已經(jīng)成為教育改革的新動向。

數(shù)控技術(shù)是大學本科的機械類專業(yè)的一門必修課程，其具備高精度、柔性化、高效率的明顯特點，數(shù)控技術(shù)對于推動我國成為制造強國有著至關(guān)重要的作用[3]。數(shù)控技術(shù)的專業(yè)性強與前期學習的專業(yè)基礎(chǔ)課程的聯(lián)系不緊密、授課能容多、知識面廣且實踐性強，但課時較少，這給數(shù)控技術(shù)教學造成一定的困難。

針對上述情況，文章運用HTML5技術(shù)及Three.js 框架，設(shè)計了具備動態(tài)網(wǎng)頁課件、教學實驗、教學測試融于一體數(shù)控技術(shù)教學平臺。目的是優(yōu)化原有傳統(tǒng)課程教育，瞄準世界前沿，將一般知識理論與最新科研成果技術(shù)有機結(jié)合，并摒棄傳統(tǒng)教學模式中單一的授課模式，將相近學科的交叉理論與知識技能全面融合。

2 數(shù)控技術(shù)教學現(xiàn)狀分析

2.1 教學理論教學實踐相分離

在傳統(tǒng)的機械類課程教學中，通常先把理論課上完以后，最后兩個星期集中性上實踐課程，這容易就造成了教學理論與教學實踐相互分離的現(xiàn)象。學生在理論學習階段，由于之前沒有接觸過相關(guān)知識，對理論知識不能形成正確的理解和認知，再到上實踐課程的時，學生早已把前期理論知識遺忘，導致學生理論知識和實踐能力都不扎實[4]。

2.2 教學設(shè)備落后教學資源匱乏

由于受學校教學資源的限制，學校機械設(shè)備更新的速度遠遠不及市場的不斷創(chuàng)新速度，所以學生不能在第一時間接觸到新型數(shù)控機床的結(jié)構(gòu)、工作原理和操作技巧，導致教學的知識難以適應(yīng)社會的發(fā)展需要[4]。其次，近年來大學的大量擴招，造成學?，F(xiàn)有的數(shù)控機床數(shù)量難以滿足當下學生的規(guī)模，每位學生單獨動手操作的機會很少，實踐效果很不理想。

2.3 教學模式單調(diào)課件模態(tài)單一

教學模式常采用傳統(tǒng)的“說教式”，模式單調(diào)，缺少創(chuàng)新，針對性較差，容易造成學生的厭煩和反感。并且，教學講義素材通常為大篇幅的文字、和插圖構(gòu)成，只有少部分視屏，缺乏三維展示、三維動畫等直觀性元素，構(gòu)成講義形式單一，上課內(nèi)容平淡乏味，缺少和學生互動交流，沒能充分激起學生的學習興趣。

3 數(shù)控技術(shù)教學平臺的基本架構(gòu)及搭建思路

3.1 數(shù)控技術(shù)教學平臺基本架構(gòu)

數(shù)控技術(shù)教學平臺采用B/S（Browser/Server）作為開發(fā)架構(gòu)，B/S 架構(gòu)也被稱為瀏覽器/服務(wù)器體系架構(gòu)，其優(yōu)勢為任何時間、任何地點、任何系統(tǒng)，只要在網(wǎng)絡(luò)的環(huán)境下就可以用瀏覽器進行瀏覽訪問，用戶無須專門安裝任何網(wǎng)頁插件即可獲得優(yōu)越的瀏覽體驗[5-6]。

3.2 數(shù)控技術(shù)教學平臺的搭建步驟

教學平臺制作步驟的主要分為課程分析、平臺搭建、平臺發(fā)布及平臺維護四個步驟，具體敘述如下：

第一步：課程分析是搭建教學平臺前的準備工作，也是教師教學過程中不可忽視的重要環(huán)節(jié)。教師不僅要根據(jù)課程標準和教材來把握培養(yǎng)目標與制定教學計劃，還要對學生現(xiàn)階段的年齡特點、身心發(fā)展規(guī)律進行深入了解，以便于找到適配學生喜歡的教學方式。

第二步：平臺搭建是制作教學平臺的核心與關(guān)鍵，它決定教學平臺的成敗。教師可根據(jù)教學現(xiàn)實需求，結(jié)合相關(guān)的技術(shù)制作出對應(yīng)的網(wǎng)頁課件。教學平臺主要用的技術(shù)有HTLM5、CSS、JavaScript、Three.js與Tween.js等技術(shù)來搭建體統(tǒng)的。

第三步：平臺發(fā)布是將制作者制作好的網(wǎng)頁融合到一起，放到云服務(wù)器上，經(jīng)過測試合格后向使用者發(fā)布的一系列過程。首先通過超鏈接的形式把所有的文件資料鏈接在一起。其次在文本中添加控制按鈕、其文本提示、課程內(nèi)容說明等用于補充教學平臺。最后制作者把所有文件打包放服務(wù)器上，并通過瀏覽器檢測整個程序運行是否正常，如果整個程序運行正常，那么就可以向使用者發(fā)布學習平臺。

第四步：維護平臺是保護平臺正常運行的關(guān)鍵。調(diào)查用戶的使用體驗，收集用戶的提出的意見，在此基礎(chǔ)上進一步改進和完善平臺。后期可以根據(jù)課程改革要求、使用者發(fā)展需要或教學內(nèi)容的變更對平臺進行二次開發(fā)。

4 數(shù)控技術(shù)教學平臺構(gòu)成與實現(xiàn)

依據(jù)數(shù)控技術(shù)課程課程標準的要求，數(shù)控技術(shù)教學主要由理論教學、實踐加工以及測試考核等組成。因此在該平臺構(gòu)成設(shè)計中也將由理論教學、測試考核、虛擬仿真三個模塊構(gòu)成，如圖1所示。

4.1 理論教學模塊的實現(xiàn)

理論教學模塊是由動態(tài)網(wǎng)頁課件與視頻資料兩部分組成。制作過程如下：首先，采用Photoshop設(shè)計出1：1的網(wǎng)頁效果圖，并且將效果圖切成多張小圖片。

其次HTML5和CSS3技術(shù)進行網(wǎng)頁整體布局，其中，布局設(shè)計嚴格遵循“先大后小，先外后里”的原則，構(gòu)建出整個網(wǎng)頁的宏觀架構(gòu)。然后，按照設(shè)計的效果圖寫各部分的小版塊，將Photoshop切片出來的圖片或錄制的視頻通過代碼插入對應(yīng)小版塊中，以此來實現(xiàn)預期的效果圖。最后，采用CSS、JS進行交互設(shè)計，最終得到與設(shè)計的效果圖相一致的動態(tài)網(wǎng)頁課件，如圖2 所示。這里的視頻主要分為教學講解視頻與機械加工錄制視頻兩種。將任課教師課堂上講解的過程與機械加工的過程進行錄制，制成教學視頻，采用標簽來引用視頻。

4.2 測試考核模塊的實現(xiàn)

測試考核模塊由習題思考和師生交流兩部分組成。該平臺采用“問卷星”嵌入網(wǎng)頁平臺的方式來制作測試考核模塊，不再搭建自己數(shù)據(jù)庫，從而降低了平臺的開發(fā)難度?！皢柧硇恰笔且粋€專業(yè)的在線問卷調(diào)查、考試、測評、投票平臺，為用戶提供人性化的在線設(shè)計問卷、自定義報表、調(diào)查結(jié)果分析等系列服務(wù)，在教學實踐中得到了廣泛運用[7-8]。制作過程如圖3所示。

1） 在線設(shè)計題庫或制作問卷：在“問卷星”上選擇和自己相符合的模板，通過修改的方式編輯問題。

2） 嵌入教學平臺：將問卷用Iframe嵌入到教育平臺上，學生就可以通過訪問教學平臺進行作答。

3） 查看結(jié)果：學生作答完成后，教師可以通過登錄“問卷星”查看結(jié)果?？梢圆榭吹膬?nèi)容包括學生成績、做題用時、提交時間、學生基本信息等。

4） 數(shù)據(jù)分析：可以選擇柱狀圖、餅圖、條形圖等多種統(tǒng)計圖表進行數(shù)據(jù)呈現(xiàn)，根據(jù)不同需要對數(shù)據(jù)進行深度分析。

4.3 虛擬仿真模塊的實現(xiàn)

虛擬仿真模塊主要由三維展示和仿真加工兩部分組成。虛擬仿真技術(shù)在數(shù)控技術(shù)教學中的運用能夠延伸和拓展教學資源與教學內(nèi)容，彌補傳統(tǒng)教學課件模態(tài)單一的不足。制作過程分為三個步驟，如圖4 所示：第一步主要采用UG創(chuàng)建三維模型，再用blender 軟件給建好的模型設(shè)置材料屬性或貼圖，最后導出.glb/.glbf格式的模型文件。第二步Three.js引擎搭建虛擬環(huán)境，它主要包括是創(chuàng)建虛擬場景、虛擬相機、渲染器及燈光等。第三步要對模型進行交互功能的設(shè)計，交互設(shè)計主要是在JS、Three.js、Tween.js中共同實現(xiàn)。虛擬仿真模塊能夠?qū)崿F(xiàn)多種人機交互，用戶進入網(wǎng)站后，用戶不僅可以、移動、旋轉(zhuǎn)、放大縮小來觀測模型，另外，使用者還可以通過點擊相應(yīng)按鍵來實現(xiàn)相應(yīng)的人機交互[9]。

1） 機床拆裝展示案例

該平臺運用Three.js框架搭建了虛擬機床展示平臺，它不僅能全方位展示各類機床，而且還能夠?qū)C床進行拆裝交互。下列以機床加工中心為例，加工中心拆裝頁面如圖5所示。拆裝是采用Three.js提供的拖拽API的DragControls來得以實現(xiàn)的，它是一個用于在Three.js 中實現(xiàn)拖拽控制的輔助類，它簡化了在Three.js中實現(xiàn)拖拽物體的過程。機械的拆裝主要通過鼠標的拖拽來得以實現(xiàn)，當使用者鼠標放在機械裝備上的零件上通過按住鼠標不放并實施拖拽時，屏幕上的零件隨著鼠標位置的改變而改變，當松開鼠標時，鼠標的最終位置就是零件放置的位置。使用者在與機床拆卸交互過程中，既能進一步了解機床的構(gòu)成，同時通過拆卸機床外殼后，方便學生觀察機床的內(nèi)部結(jié)構(gòu)，這是真實場景中很難做到的。使用者可以通過調(diào)整角度和縮放場景來進一步詳細觀察機械結(jié)構(gòu)，當使用者按住左鍵不放上下或左右拖動場景中的窗口，能夠旋轉(zhuǎn)整個場景，當使用者滾動鼠標中鍵，可以放大或縮小場景。

2） 仿真加工的案例

虛擬仿真不僅能夠?qū)θ藗內(nèi)粘Ｉ畹膱鼍斑M行復刻，同樣也能夠創(chuàng)造出非自然現(xiàn)象存在的主觀場景[10]。下列以高速深轉(zhuǎn)孔仿真加工為例，如圖6所示。由圖可知，在現(xiàn)實加工中的初始平面是不存在的，它是為了安全下刀而規(guī)定的一個平面，僅憑借教師口頭語言表述，學生難以頭腦中形成相應(yīng)的圖示，如果用語言加虛擬仿真的方式，將復雜抽象的學習內(nèi)容轉(zhuǎn)化為生動直觀的形象，從而降低學習上的認知負荷，使學生能更深入地理解和掌握所學內(nèi)容。

為了讓虛擬仿真更加貼近于真實效果，給學生帶來更好的使用體驗，該板塊融合了多方面的創(chuàng)新。首先，在仿真加工中運用Three.js中Audio功能給仿真加工添加機加工的聲音，從而給學生帶來聽覺上的沖擊，既能夠把學生的注意力吸引到加工演示中來，又能夠增加學生的沉浸式體驗。其次，采用Three.js中的粒子平臺來對仿真加工過程產(chǎn)生的飛屑進行模擬，從而營造出逼真的視覺效果。最后，并且把加工板材設(shè)置成透明，讓學生能夠清楚地觀看孔的加工的內(nèi)部全過程，加深對加工過程的理解和記憶。這種交互操作不僅可以調(diào)動學生的眼睛和雙手，增強他們的實踐操作能力，而且還可以鞏固學生對機械加工知識的理解和掌握。

5 數(shù)控技術(shù)教學平臺在教學中的應(yīng)用意義

5.1 克服時間空間的限制

數(shù)控技術(shù)教育平臺具有開放性，只要在互聯(lián)網(wǎng)的環(huán)境下，學生還可以在不同的時間、空間根據(jù)自己的學習進度來選擇不同的學習內(nèi)容，滿足了個性化自主學習的需求。在教學平臺上，學生能夠進入不同的虛擬環(huán)境中進行機械的模擬操作，突破了空間的束縛。

5.2 有效降低學生認知負荷

目前在數(shù)控技術(shù)機械設(shè)備的學習環(huán)節(jié)，主要采用的語言講解、圖片展示、視頻播放相結(jié)合的方式授課。但由于語言講解難以描述具體的機械設(shè)備，視頻播放又稍縱即逝難以讓學生在頭腦中形成清晰的認識，圖片的2D感官體驗不如3D的感官體驗，3D在模擬在界面設(shè)計、人機交互、虛擬實驗中的沉浸式體驗等方面都比二維更加優(yōu)越，所以教學動畫發(fā)展也向3D模擬方向發(fā)展。語言描述、圖片展示、視頻播放、Web三維展示四種性質(zhì)對比，如表1 所示。Web技術(shù)能夠?qū)碗s抽象的學習內(nèi)容轉(zhuǎn)化為生動直觀的形象，從而降低學習上的認知負荷，使學生能更深入地理解和掌握所學內(nèi)容。學生通過創(chuàng)設(shè)相關(guān)的虛擬場景，學生可以在更真實的環(huán)境中進行實踐操作，這不僅增加了學生的實踐機會讓獲得與實踐相同的體驗感，同時提高了學生的理解能力和操作能力。

5.3 降低教育成本

利用Three.js虛擬仿真技術(shù)來模擬教學實驗，能夠彌補了教學設(shè)備上的不足，節(jié)約教學上的投入。使用虛擬現(xiàn)實技術(shù)進行模擬實驗，解決實驗器材不足問題，減少儀器設(shè)備和實驗材料的損耗，既能從而降低教育成本，又能保證實驗安全性。學生可以使用虛擬現(xiàn)實技術(shù)對學習內(nèi)容進行反復練習和操作，以此提高學習效果。

5.4 降低教師工作負荷

數(shù)控技術(shù)教學平臺融合了“問卷星”上所具備的所有優(yōu)勢。首先，“問卷星”的在線考試測模塊擁有多種試題模板，可以利用上面的模板快速創(chuàng)建各類在線考試題。其次，“問卷星”平臺適用于多種測試考試場合，包括課后練習考核、章節(jié)測試、期中測試以及期末考評等。最后該平臺設(shè)有防作弊機制，限制測時間機制，以及供了自動閱卷與智能計分等功能。其中“問卷星”的自動閱卷功能，不僅能讓學生及時地獲得成績反饋，而且節(jié)約教師的作業(yè)批改時間，以此降低教師工作負荷。

6 結(jié)論

多媒體教學、網(wǎng)絡(luò)教學是教育未來發(fā)展的方向，也是機械專業(yè)教學必須提前引入的?；赪eb的數(shù)控技術(shù)教學平臺是一種新型的教學工具，它能夠?qū)镜钠矫婺Ｐ土Ⅲw化、復雜的知識簡單化、枯燥知識生動化，能夠激發(fā)學生的學習自發(fā)性和主動性，更好地培養(yǎng)學生的專業(yè)能力和創(chuàng)新能力。文章將網(wǎng)絡(luò)信息技術(shù)與數(shù)控技術(shù)教學進行有機結(jié)合，搭建了動態(tài)網(wǎng)頁課件、教學實驗、教學測試為一體具備普適性、系統(tǒng)性、開放性的數(shù)控技術(shù)教學平臺。該平臺可以用于課前預習、課上講授和演示、課后測試與練習、考試前復習、學生之間或師生之間的交流等，適用于教學的全部過程。作為該平臺的進一步建設(shè)設(shè)想，加強平臺的人機交互設(shè)計，讓使用者能有更好的交互體驗，加強教學案例的開發(fā)，充實教學平臺的案例庫。