基于Web的數控技術教學平臺的設計與實現

劉朝穩 游明琳

關鍵詞：數控技術；HTML5；Three.js；網頁課件；教學平臺

1 概述

隨著信息技術快速發展，各種現代信息網絡技術被廣泛應用到教育行業中。信息技術的發展，推動教育理念和教育方式的優化和升級，提高了教學質量。 國內外多位學者研究表明，使用Web技術融入教學課堂中，對激發學生的上課積極性、培養學生的創新思維、提高教育質量有著顯著效果[1-2]。科技的進步，特別是信息技術的進步，利用信息技術來提升教學效果，已經成為教育改革的新動向。

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

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

2 數控技術教學現狀分析

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

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

2.2 教學設備落后教學資源匱乏

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

2.3 教學模式單調課件模態單一

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

3 數控技術教學平臺的基本架構及搭建思路

3.1 數控技術教學平臺基本架構

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

3.2 數控技術教學平臺的搭建步驟

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

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

第二步：平臺搭建是制作教學平臺的核心與關鍵，它決定教學平臺的成敗。教師可根據教學現實需求，結合相關的技術制作出對應的網頁課件。教學平臺主要用的技術有HTLM5、CSS、JavaScript、Three.js與Tween.js等技術來搭建體統的。

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

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

4 數控技術教學平臺構成與實現

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

4.1 理論教學模塊的實現

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

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

4.2 測試考核模塊的實現

測試考核模塊由習題思考和師生交流兩部分組成。該平臺采用“問卷星”嵌入網頁平臺的方式來制作測試考核模塊，不再搭建自己數據庫，從而降低了平臺的開發難度。“問卷星”是一個專業的在線問卷調查、考試、測評、投票平臺，為用戶提供人性化的在線設計問卷、自定義報表、調查結果分析等系列服務，在教學實踐中得到了廣泛運用[7-8]。制作過程如圖3所示。

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

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

3） 查看結果：學生作答完成后，教師可以通過登錄“問卷星”查看結果。可以查看的內容包括學生成績、做題用時、提交時間、學生基本信息等。

4） 數據分析：可以選擇柱狀圖、餅圖、條形圖等多種統計圖表進行數據呈現，根據不同需要對數據進行深度分析。

4.3 虛擬仿真模塊的實現

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

1） 機床拆裝展示案例

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

2） 仿真加工的案例

虛擬仿真不僅能夠對人們日常生活的場景進行復刻，同樣也能夠創造出非自然現象存在的主觀場景[10]。下列以高速深轉孔仿真加工為例，如圖6所示。由圖可知，在現實加工中的初始平面是不存在的，它是為了安全下刀而規定的一個平面，僅憑借教師口頭語言表述，學生難以頭腦中形成相應的圖示，如果用語言加虛擬仿真的方式，將復雜抽象的學習內容轉化為生動直觀的形象，從而降低學習上的認知負荷，使學生能更深入地理解和掌握所學內容。

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

5 數控技術教學平臺在教學中的應用意義

5.1 克服時間空間的限制

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

5.2 有效降低學生認知負荷

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

5.3 降低教育成本

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

5.4 降低教師工作負荷

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

6 結論

多媒體教學、網絡教學是教育未來發展的方向，也是機械專業教學必須提前引入的。基于Web的數控技術教學平臺是一種新型的教學工具，它能夠將書本的平面模型立體化、復雜的知識簡單化、枯燥知識生動化，能夠激發學生的學習自發性和主動性，更好地培養學生的專業能力和創新能力。文章將網絡信息技術與數控技術教學進行有機結合，搭建了動態網頁課件、教學實驗、教學測試為一體具備普適性、系統性、開放性的數控技術教學平臺。該平臺可以用于課前預習、課上講授和演示、課后測試與練習、考試前復習、學生之間或師生之間的交流等，適用于教學的全部過程。作為該平臺的進一步建設設想，加強平臺的人機交互設計，讓使用者能有更好的交互體驗，加強教學案例的開發，充實教學平臺的案例庫。