基于PlayCanvas的機械工業(yè)數(shù)字化在線學(xué)習(xí)平臺構(gòu)建

羋天

摘要：針對目前高校機械工程類課程教學(xué)形式單一、教學(xué)資源不足、教學(xué)課件轉(zhuǎn)載使用困難等問題，文章以機械工業(yè)數(shù)字化在線學(xué)習(xí)平臺為例，使用PlayCanvas引擎開發(fā)了以中國古代、近代、現(xiàn)代機械工業(yè)的成就為主要內(nèi)容的在線學(xué)習(xí)平臺。以案例形式介紹了三維模型貼圖制作以及導(dǎo)入、動畫資源導(dǎo)入、在線平臺功能開發(fā)與實現(xiàn)、UI模塊功能以及實現(xiàn)，構(gòu)建出能夠自由游覽漫游、可隨意旋轉(zhuǎn)縮放展覽物品、能夠進(jìn)行模型拆裝、能夠進(jìn)行知識學(xué)習(xí)的在線學(xué)習(xí)平臺。

關(guān)鍵詞：虛擬仿真；在線博物館；數(shù)字化課件；PlayCanvas；課程思政

中圖分類號：TP393? 文獻(xiàn)標(biāo)志碼：A

0 引言

教育部于2018年印發(fā)的《教育部關(guān)于開展國家虛擬仿真實驗教學(xué)項目建設(shè)工作的通知》中指出［1］，國家虛擬仿真實驗教學(xué)項目是推進(jìn)現(xiàn)代信息技術(shù)融入實驗教學(xué)項目、拓展實驗教學(xué)內(nèi)容廣度和深度、延伸實驗教學(xué)時間和空間、提升實驗教學(xué)質(zhì)量和水平的重要舉措。同時，教育部于2022年印發(fā)的《教育部等十部門關(guān)于印發(fā)<全面推進(jìn)“大思政課”建設(shè)的工作方案>的通知》中要求［2］，要將虛擬仿真技術(shù)與課程思政相互結(jié)合，積極研發(fā)成本適宜的虛擬仿真教學(xué)資源。

在高校機械工程類專業(yè)課程中，存在著以下困境：傳統(tǒng)的課件通常采用單一的圖片、視頻表現(xiàn)相關(guān)知識內(nèi)容，課件存在表現(xiàn)形式老舊、對于部分較為抽象的知識點表現(xiàn)力不足、課件交互性不足、難以吸引學(xué)生的注意力等問題，不能激發(fā)學(xué)生的學(xué)習(xí)興趣［3］。

同時，機械工程類專業(yè)主要屬于工科，其課程專業(yè)性較強，相關(guān)專業(yè)課程的課程思政教學(xué)研究存在一定困難［4］。本文借助虛擬仿真技術(shù)，介紹相關(guān)機械結(jié)構(gòu)，闡述相關(guān)知識點，最終達(dá)到引領(lǐng)學(xué)生價值觀的目的。

1 機械工業(yè)數(shù)字化在線學(xué)習(xí)平臺的方案設(shè)計

1.1 機械工業(yè)數(shù)字化在線學(xué)習(xí)平臺的開發(fā)引擎選擇

為了提高平臺系統(tǒng)傳播效率，降低平臺系統(tǒng)對硬件的要求，保證平臺系統(tǒng)的適配性，該虛擬仿真平臺將用以Web平臺為主要運行平臺的引擎PlayCanvas進(jìn)行開發(fā)［5］，由于設(shè)計之初PlayCanvas參考了主流游戲引擎的交互模式，相關(guān)技術(shù)人員從Unity3D過渡到PlayCanvas較為容易。

1.2 機械工業(yè)數(shù)字化在線學(xué)習(xí)平臺的流程規(guī)劃

機械工業(yè)數(shù)字化在線學(xué)習(xí)平臺的開發(fā)思路如下：平臺內(nèi)容應(yīng)從機械工程類相關(guān)課程中的重點難點入手，根據(jù)時代特色，結(jié)合相關(guān)知識點，構(gòu)建虛擬展館，并針對相關(guān)機械結(jié)構(gòu)進(jìn)行建模。結(jié)合相關(guān)機械結(jié)構(gòu)，通過虛擬仿真技術(shù)講解機械工程類課程中的相關(guān)知識點，潛移默化地實現(xiàn)課程思政教育［6］。整體設(shè)計方案如圖1所示。

機械工業(yè)數(shù)字化在線學(xué)習(xí)平臺的交互將分成兩部分，其中一部分為漫游環(huán)節(jié)，用戶能夠以第一人稱視角在虛擬的展館中游覽參觀，觀看相關(guān)展品［7］。點擊相關(guān)展品，即可進(jìn)入知識點學(xué)習(xí)模塊，此時交互模式切換為產(chǎn)品展示視角，操作方式調(diào)整為鼠標(biāo)按住左鍵拖動旋轉(zhuǎn)展品，按住鼠標(biāo)中鍵拖動平移展品，使用滾輪縮放展品。如需顯示相關(guān)知識點的輔助平面、輔助軸等參數(shù)，可通過點擊相應(yīng)UI加以顯示［8］。

2 機械工業(yè)數(shù)字化在線學(xué)習(xí)平臺的素材制作

2.1 三維美術(shù)資源制作

根據(jù)設(shè)計，整個平臺將分為展館入口、農(nóng)業(yè)文明展館、第一次工業(yè)革命展館、第二次工業(yè)革命展館、第三次工業(yè)革命展館、中國制造2025展館、展望未來7個場館。需要針對展館的特色以及相關(guān)機械結(jié)構(gòu)進(jìn)行建模，在三維美術(shù)資源構(gòu)建時應(yīng)控制模型面數(shù)以及貼圖尺寸，模型面數(shù)過大將導(dǎo)致模型加載緩慢、場景運行卡頓。將模型按照展館場景分塊制作，分塊導(dǎo)出為FBX格式并傳遞到PlayCanvas引擎中，讓系統(tǒng)始終只載入用戶所處展館和與之相鄰的前后展館，能夠減少系統(tǒng)加載時間，提高運行效率。具體如圖2所示。

2.2 傳統(tǒng)素材處理

由于部分機械發(fā)明時間久遠(yuǎn)、形態(tài)復(fù)雜，可通過視頻、文本、圖片等傳統(tǒng)表現(xiàn)形式加以補充。為了降低平臺使用成本，可將視頻上傳到免費的視頻托管平臺，再通過iFrame將視頻的url嵌入平臺中。

3 機械工業(yè)數(shù)字化在線學(xué)習(xí)平臺的功能實現(xiàn)

3.1 漫游視角功能實現(xiàn)

博物館漫游模塊將采用第一人稱視角，如圖3所示。用戶左右移動鼠標(biāo)控制用戶視角沿y軸轉(zhuǎn)動，前后推動鼠標(biāo)控制用戶視角沿x軸轉(zhuǎn)動，按下鍵盤上“wsad”鍵控制用戶前后左右移動。相關(guān)代碼如下：

FirstPersonMovement.prototype.initialize = function（）{

this.force = new pc.Vec3（）;

//申明新的坐標(biāo)用于控制用戶前進(jìn)時受力方向

this.eulers = new pc.Vec3（）;

//申明新的坐標(biāo)用于控制用戶前進(jìn)時用戶朝向

FirstPersonMovement.prototype.update = function（dt）{

if （app.keyboard.isPressed（pc.KEY_A））{

x += right.x;

}

if （app.keyboard.isPressed（pc.KEY_D））{

x -= right.x;

}

if （app.keyboard.isPressed（pc.KEY_W））{

z += forward.z;

}

if （app.keyboard.isPressed（pc.KEY_S））{

z -= forward.z;

}

//檢測“wsad”鍵是否被按下，用于控制entity自身所受的力的方向

force.set（x，0，z）.normalize（）.scale（this.power）;

this.entity.rigidbody.applyForce（force）;

//當(dāng)用戶按下“wasd”鍵后，對entity自身朝 （x，0，z）方向上施加數(shù)值為this.power的力。

}

};

FirstPersonMovement.prototype._onMouseMove = function（e）

if （e.buttons［0］）{

this.eulers.y -= this.lookSpeed * e.dy;

this.eulers.x -= this.lookSpeed * e.dx;

}

//如果鼠標(biāo)左鍵按下，則通過鼠標(biāo)在屏幕上移動過x軸和y軸的像素控制camera角度

};

3.2 展館介紹功能開發(fā)

由于展館中展品需要通過文本、視頻等形式加以介紹，系統(tǒng)將設(shè)置為只有當(dāng)用戶足夠接近展品，才進(jìn)行文本、視頻的顯示，此處在每一個展示臺之前設(shè)置碰撞塊，當(dāng)表示用戶的entity與碰撞塊發(fā)生碰撞時，載入視頻以及文本，如圖4所示。相關(guān)代碼如下：

Trigger.prototype.onTriggerEnter = function（entity）{

//當(dāng)用戶靠近展臺時

this.trigger_ui.setLocalPosition（position）;

//將展示臺上的UI移動到正確位置

this.trigger_introduce_text.element.text = this.introduce_text_txt;

//在UI上顯示該展品的介紹

this.trigger_movie.script.setMoviePlayerUrl.get_url_now（this.a_jie_shao_url）;

//獲取需要播放介紹視頻的url}

3.3 零件查看以及裝配功能開發(fā)

為了能夠從多角度自由觀看博物館展品，按住左鍵拖動鼠標(biāo)旋轉(zhuǎn)展品，按住鼠標(biāo)中鍵拖動平移展品，滑動滾輪縮放展品，如圖5所示。為了使操作更加流暢，將直接控制對象設(shè)置為一空物體，將展品設(shè)置恒定速度實時與空物體同步。

相關(guān)代碼如下：

ObjectShower.prototype.update = function（dt）{

position.lerp（position，this.target.getPosition（），this.speed * dt）;

rotation.slerp（rotation，this.target_child.getRotation（），this.speed * dt）;

//將展品模型以speed的速度與空物體同步

};

ObjectShower.prototype._onMouseMove = function（e）

if （e.buttons［0］）{

this.eulers.y += this.lookSpeed * e.dy;

this.eulers.x += this.lookSpeed * e.dx;

//按住鼠標(biāo)左鍵拖動旋轉(zhuǎn)展品

}

if （e.buttons［1］ && this.if_can_move）{

this.first_pos_x += e.dx/100;

this.first_pos_y -= e.dy/100;

}

//按住鼠標(biāo)中鍵拖動平移展品};

零件裝配功能可復(fù)用零件位移的部分代碼，增加在位移過程中與正確位置進(jìn)行比較的字段，如零件的位置和角度與正確位置較為接近，則自動吸附到該位置上，表示裝配成功，具體如圖6所示。

關(guān)鍵代碼如下：

var distance = this.part_pos.getPosition（）.distance（this.target_pos.getPosition（））;

if（distance < this.min_dis）

{

this.part_pos.setLocalPosition（this.target_pos.getPosition（））;

}

4 導(dǎo)出與部署

PlayCanvas支持將工程打包為html文件導(dǎo)出，用戶可自行部署在本地服務(wù)器，也可使用PlayCanvas官方自帶的托管服務(wù)器進(jìn)行展示。

在操作界面點擊右側(cè)的Publish/Download按鈕，在彈出的界面中選擇BULIDS&PUBLISH選項，在彈出的菜單中選擇左側(cè)“PUBLISH TO PlayCanvas”即可將平臺的網(wǎng)頁托管在PlayCanvas服務(wù)器中。在彈出的菜單中選擇右側(cè)“DOWNLOAD.ZIP”即可將平臺網(wǎng)頁打包下載，可用于部署平臺網(wǎng)頁。

5 結(jié)語

本文以機械工業(yè)數(shù)字化在線學(xué)習(xí)平臺為例，簡述了目前市面上較為冷門的PlayCanvas引擎的優(yōu)勢、Web端在線軟件的開發(fā)流程。介紹了相關(guān)功能的設(shè)計流程和代碼算法，以PlayCanvas為開發(fā)平臺，開發(fā)了運行效率高、適配性強、交互手段豐富的在線學(xué)習(xí)平臺。并最終讓平臺成功上線，在南京工業(yè)大學(xué)2021級機械設(shè)計專業(yè)應(yīng)用，取得了良好的教學(xué)效果。由于系統(tǒng)基于Web端，除了在課堂上將其當(dāng)做課件使用，用戶還可通過手機、PC、平板等設(shè)備自由游覽，學(xué)習(xí)相關(guān)機械知識。

參考文獻(xiàn)

［1］安毅，王宏偉，仇森，等.“新工科”背景下“電機與拖動”虛擬仿真課程教學(xué)建設(shè)探討［J］.工業(yè)和信息化教育，2022（10）：7-12.

［2］劉北佳，宗華，王楠楠，等.基于CST的導(dǎo)行電磁波虛擬仿真實驗教學(xué)設(shè)計與實踐［J］.工業(yè)和信息化教育，2022（10）：32-36.

［3］郭聯(lián)金，周晶，陳澤群.數(shù)字孿生仿真與調(diào)試實訓(xùn)平臺的設(shè)計［J］.智能制造，2022（5）：45-49.

［4］顧興龍，毛嘉元，林均賢，等.航空應(yīng)急救援體系設(shè)計虛擬仿真規(guī)劃［J］.中國科技信息，2022（20）：46-49.

［5］陳春華.基于“數(shù)字孿生”技術(shù)的物聯(lián)網(wǎng)虛擬仿真實訓(xùn)基地研究——以福建經(jīng)濟(jì)學(xué)校物聯(lián)網(wǎng)虛擬仿真實訓(xùn)基地建設(shè)為例［J］.網(wǎng)絡(luò)安全技術(shù)與應(yīng)用，2022（10）：112-114.

［6］陳勇，涂春香，林瑤，等.虛擬實驗在多元化機能實驗教學(xué)中的應(yīng)用探索［J］.檢驗醫(yī)學(xué)與臨床，2022（19）：2729-2730，2736.

［7］晉溶辰，周雯，張艷，等.以案例為基礎(chǔ)的虛擬仿真實驗結(jié)合翻轉(zhuǎn)直播課的應(yīng)用評價和體會［J］.護(hù)理實踐與研究，2022（19）：2979-2983.

［8］伍漢強，鄭仕強，伍家志.虛擬仿真結(jié)合3D打印技術(shù)在脊柱骨折手術(shù)中的應(yīng)用［J］.海南醫(yī)學(xué)，2022（19）：2500-2503.

（編輯 沈 強）

Construction of digital online learning platform for mechanical industry based on PlayCanvas

Mi? Tian

（Academic Affairs Office， NanjingTech University， Nanjing 210000， China）

Abstract：? Aiming at the problems such as the single teaching form， insufficient teaching resources， and difficulty in reproducing teaching courseware of mechanical engineering courses in colleges and universities at present， taking the Digital Online Learning Platform for Mechanical Industry as an example， an online learning platform based on the achievements of ancient， modern， and modern mechanical industries in China has been developed using the playcanvas engine. This paper introduces 3D model mapping and import， animation resource import， online platform function development and implementation， UI module function and implementation in the form of cases， and builds an online learning platform that can freely tour and roam， freely rotate and scale exhibition items， disassemble and assemble models， and learn knowledge.

Key words： virtual simulation; online museum; digital courseware; PlayCanvas; ideological and political curriculum