基于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的数控技术教学平台是一种新型的教学工具，它能够将书本的平面模型立体化、复杂的知识简单化、枯燥知识生动化，能够激发学生的学习自发性和主动性，更好地培养学生的专业能力和创新能力。文章将网络信息技术与数控技术教学进行有机结合，搭建了动态网页课件、教学实验、教学测试为一体具备普适性、系统性、开放性的数控技术教学平台。该平台可以用于课前预习、课上讲授和演示、课后测试与练习、考试前复习、学生之间或师生之间的交流等，适用于教学的全部过程。作为该平台的进一步建设设想，加强平台的人机交互设计，让使用者能有更好的交互体验，加强教学案例的开发，充实教学平台的案例库。