劉朝穩(wěn) 游明琳

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

1 概述

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

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

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

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

2.1 教學(xué)理論教學(xué)實(shí)踐相分離

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

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

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

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

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

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

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

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

3.2 數(shù)控技術(shù)教學(xué)平臺(tái)的搭建步驟

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

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

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

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

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

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

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

4.1 理論教學(xué)模塊的實(shí)現(xiàn)

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

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

4.2 測(cè)試考核模塊的實(shí)現(xiàn)

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

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

2） 嵌入教學(xué)平臺(tái)：將問卷用Iframe嵌入到教育平臺(tái)上，學(xué)生就可以通過訪問教學(xué)平臺(tái)進(jìn)行作答。

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

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

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

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

1） 機(jī)床拆裝展示案例

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

2） 仿真加工的案例

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

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

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

5.1 克服時(shí)間空間的限制

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

5.2 有效降低學(xué)生認(rèn)知負(fù)荷

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

5.3 降低教育成本

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

5.4 降低教師工作負(fù)荷

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

6 結(jié)論

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