基于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