基于PlayCanvas的機械工業數字化在線學習平臺構建

羋天

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

關鍵詞：虛擬仿真；在線博物館；數字化課件；PlayCanvas；課程思政

中圖分類號：TP393? 文獻標志碼：A

0 引言

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

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

同時，機械工程類專業主要屬于工科，其課程專業性較強，相關專業課程的課程思政教學研究存在一定困難［4］。本文借助虛擬仿真技術，介紹相關機械結構，闡述相關知識點，最終達到引領學生價值觀的目的。

1 機械工業數字化在線學習平臺的方案設計

1.1 機械工業數字化在線學習平臺的開發引擎選擇

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

1.2 機械工業數字化在線學習平臺的流程規劃

機械工業數字化在線學習平臺的開發思路如下：平臺內容應從機械工程類相關課程中的重點難點入手，根據時代特色，結合相關知識點，構建虛擬展館，并針對相關機械結構進行建模。結合相關機械結構，通過虛擬仿真技術講解機械工程類課程中的相關知識點，潛移默化地實現課程思政教育［6］。整體設計方案如圖1所示。

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

2 機械工業數字化在線學習平臺的素材制作

2.1 三維美術資源制作

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

2.2 傳統素材處理

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

3 機械工業數字化在線學習平臺的功能實現

3.1 漫游視角功能實現

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

FirstPersonMovement.prototype.initialize = function（）{

this.force = new pc.Vec3（）;

//申明新的坐標用于控制用戶前進時受力方向

this.eulers = new pc.Vec3（）;

//申明新的坐標用于控制用戶前進時用戶朝向

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）;

//當用戶按下“wasd”鍵后，對entity自身朝 （x，0，z）方向上施加數值為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;

}

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

};

3.2 展館介紹功能開發

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

Trigger.prototype.onTriggerEnter = function（entity）{

//當用戶靠近展臺時

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 零件查看以及裝配功能開發

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

相關代碼如下：

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;

//按住鼠標左鍵拖動旋轉展品

}

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

this.first_pos_x += e.dx/100;

this.first_pos_y -= e.dy/100;

}

//按住鼠標中鍵拖動平移展品};

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

關鍵代碼如下：

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 導出與部署

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

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

5 結語

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

參考文獻

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

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

［3］郭聯金，周晶，陳澤群.數字孿生仿真與調試實訓平臺的設計［J］.智能制造，2022（5）：45-49.

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

［5］陳春華.基于“數字孿生”技術的物聯網虛擬仿真實訓基地研究——以福建經濟學校物聯網虛擬仿真實訓基地建設為例［J］.網絡安全技術與應用，2022（10）：112-114.

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

［7］晉溶辰，周雯，張艷，等.以案例為基礎的虛擬仿真實驗結合翻轉直播課的應用評價和體會［J］.護理實踐與研究，2022（19）：2979-2983.

［8］伍漢強，鄭仕強，伍家志.虛擬仿真結合3D打印技術在脊柱骨折手術中的應用［J］.海南醫學，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