Web3D短视频学习教育平台设计研究

1引言

随着市场上网络教育的迅速发展和在线学习教育平台的日渐成熟，网络教育已经普遍被人们所接受[1]。各大在线学习教育平台层出不穷，有效地解决了教育资源匮乏的问题，实现了资源的共享，为人们提供了随时、随地接受教育的机会。但是传统的在线学习教育平台依旧存在一定的局限性，例如缺少知识应用岗位的可视化、体验化过程等。在线教学网站的可视化UI过程，依然停留在数据结构层面，使得学习者无法拥有良好的在线学习效果和学习体验。此外，传统的在线学习平台为了使教学具有普遍性，往往对于每一位学习者采用相同的教学标准，并未充分考虑到每一位学习者存在的个体化的差异性[2]。这样常常导致学习者花费很多时间却未学到真正对自身有用的知识技能，无法实现短时间内的有效学习，并且学习效率低，无法达到当代人对效率的要求。在此背景下，本文提出了基于Web3D技术的短视频学习教育平台的设计与实现。该平台基于Web3D的全新虚拟化技术，构建网络大学，使得在线学习人员可以拥有身临其境的感受，提高了学习的趣味性。根据拟出的企业建筑、部分岗位以及技能要求为入口，将有关知识体系（专业体系）融入其中，以3D虚拟化建筑的方式构建每个人的学习殿堂。它抛弃了传统的冗长乏味的长视频，以短小精悍的方式来构建3D虚拟化的职业岗位内容，学习者可以通过该平台进行碎片化的有效学习。

2平台搭建

Web3D短视频学习教育平台搭建了3D地区、3D学院、3D工作室三个基础框架，将已设计好的模型进行加载导入，并进行不断调整使其具有一定的合理性。其中，在3D地区上分布了各个已有学院，真实还原了地区模块分布。3D化地区模块，实现了坐标图案化。3D学院还原仿真园区场景，设置全景天空、水、草、建筑、园区板块等多彩场景，提供了不同大小地图资源，学院可选择不同的主题，形成特色更全的3D世界。3D工作室模拟真实课堂学习场景，提供练习台、书架、导师、显示大屏等多功能工具，还原校园学习场景，贴合真实学习氛围，工作室提供相同功能以外的特色功能（如医学工作室设置仿真动物实验台功能、化学工作室设置化学实验台功能、计算机类工作室放置代码练习台）。学习者可在3D工作室中进行沉浸式学习。该平台整体构成要素如图1所示。后端的SpringBoot微服务提供页面所需的所有数据信息，如地图数据、地标数据、学院信息、工作室信息、虚拟人物信息、工作室内的短视频、阶段任务和子任务、评定信息、任务进阶点信息等，并定义标准JSON数据格式。

3平台实现

3.13D地区门户设计与实现

（1）生成2D地图实体：使用GeoJSON作为标准的数据交换格式制作地区地图。利用GeoJSON的type属性中的MultiPolygon生成地图，将地区地图几何分为有限个离散点集。每个离散点集为一组地区数据，其中每一个离散点是一个二维坐标，代表绘制地区地图上的某一具体坐标（即经度和纬度）。并利用墨卡托投影将每个离散点转换为WEB网页上的点[3]。通过d3-geo.js中的geoMercator方法首先确定每个区域层级中心点，从而确定边缘点位置，生成2D地图实体。（2）2D地图转换为3D地图：通过Three.js中的THREE.ExtrudeGeometry将地区平面图形拉伸为3D图形。THREE.ExtrudeGeometry将二维图形进行z轴拉伸，将它转换成三维图形。例如拉伸圆形，就会得到一个类似圆柱体的图形。拉伸后将面和延伸的边给予不同的材质，从而呈现多彩的3D地区地图图像。3D地区门户如图2所示。（3）地区交互信息呈现：使用axiso（请求工具）访问学院信息接口获取学院信息。访问学院信息接口实时更新学院的状态。每个学院信息包括学院编号、学院坐标，学院简介，学院名称等。利用墨卡托投影，高亮学院坐标位置，转换学院坐标到地区地图页面上。并自定义drawPoint方法，使得遍历每个学院坐标时生成标准的标记二维图形。利用画布（canvas）渲染学院名称[4]，实现画布宽度随文字长度的改变而改变。还使用了Three.js附属的OrbitControl.js扩展库作为轨道控制器控制地区地图旋转操作，进一步呈现了3D地区的立体性。

3.23D学院门户设计与实现

（1）学院地图原型制作：使用3D渲染制作工具对学院地图进行建模。建模过程依据环境贴合原则，添加道路、绿化、水池等元素增加用户学习过程中的幸福感。为后续拓展，设计了不同教学建筑样式，以便可以区分不同功能的教学建筑。提供小、中、大不同样式的学院地图模型方案，供合作院校选择相应样式套餐。模型样式如图3所示。（2）Web3D学院构成：以OBJ文件作为建筑原型导出文件。规范化模型样式和原型的文件名称，除了建筑，其他模型名称不进行规范化改变。利用Three.js中的OBJLoader模型加载器批量导入模型原型。并使用Three.js生成门户场景，渲染导入模型[5]。添加3D天空全景图，使用Three.CubeTextureLoader来对场景Scene的背景进行贴图，使之成为一个天空盒，无论怎么缩放，始终都在全景内。渲染器采用双渲染器（WGLRenderer、CSS3DRenderer），分别渲染3D学院地图和路标上显示的DOM元素。轨道条控制器使用Three.js附属的OrbitControl.js扩展库作为轨道控制器控制学院门户旋转操作。图33D学院地图模型（3）学院交互信息呈现：使用axiso(请求工具)访问工作室信息接口获取工作室信息。地图中入口路标为已开放工作室的名单展示，通过tween.js实现路标点击放大的平滑动画操作。采用键值对的方式储存建筑和工作室信息的绑定，信息绘制呈现为canvas和div两种方式。div模块为入口路标的呈现方式，canvas为建筑上方的文字呈现。其中canvas将以建筑中心为起点，向上向前偏移一定位置，以达到醒目的显示作用。绑定完工作室和建筑后，添加相应点击事件，即点击建筑时，搜索以建筑编号为key值的工作室编号value值，进行工作室的路由跳转。路由跳转由vue-router实现。

3.33D工作室门户设计与实现

3.3.1工作室原型制作使用3D渲染制作工具对工作室地图进行建模。建模过程依据环境贴合原则，分析教学学习氛围，尽量贴合学校教师特征。添加书架、练习台、显示大屏等元素。为后续拓展，设计了显示大屏这个特色功能台。显示大屏即为不同工作室提供的不同功能，在示例工作室中该功能为代码校验编译器，为学生学习代码相关知识时提供便捷的学习环境。使用建模的方式创建工作室环境可以为后续不同主题的工作室提供不同的学习环境和氛围。工作室导师模型采用开源glb模型。该模型描述了整个导师的3D场景的内容，包含了对场景结构进行描述的场景图、3DNPC的场景结点网格定义、材质外观、动画变换操作(如跳跃、跳舞)。3.3.2Web3D工作室构成使用Three.js的GLTFLoader.js、OBJLoader.js、MTLLoader.js文件加载器分别导入人物模型和3D工作室模型。并使用Three.js渲染房间场景。Three.js附属的OrbitControl.js扩展库作为轨道控制器控制房间旋转操作。tween.js动画库实现3D房间模型点击到交互组件的动画平滑移动。3.3.3工作室教学组件实现（1）教学组件概要。组件分为任务NPC对话组件、任务布置接受提交组件、书架视频播放组件、书桌练习题组件（练习台）、显示屏组件。NPC组件实现了NPC对话、任务提交接收、任务接收后的任务详情描述以及任务清单的操作。书架视频播放组件实现了教学视频的存储、任务视频播放记录的操作。书桌练习台组件内包含三个子组件，分别为：题库，学生可一次性查阅该工作室的所有练习题信息并且每份练习题提交后都给予学生实时的题目正确率反馈；未完成任务习题，学生的任务习题如未完成将呈现于该子组件中；已完成习题，记录学生的完成习题，利于学生查阅和后续教学评定。显示屏组件包含四大显示模块：用户的信息，示例用户为学生用户信息；echarts饼图，学生的课程完成情况图；任务清单列表，学生不仅可以在NPC导师那了解自己的任务清单，也可以在屏幕上实时关注自己的清单需求；任务阶梯，显示学生当前的课程完成度。（2）教学组件实现。使用vue文件存放各组件信息。组件（Component）实现父组件中子组件的切换，该元素为vue中定义的元素。组件是Vue.js最强大的功能之一，可以扩展HTML元素，封装可以重用的代码。在较高层面上，组件是自定义元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用js特性进行了扩展的原生HTML元素。并且以Element-UI作为页面样式库，规范组件样式的统一，包括按钮、文字、页面框架等。使用props完成父子组件传值。在Vue中，父子组件的关系可以总结为propsdown、eventsup。父组件通过props向下传递数据给子组件，子组件通过events给父组件发送消息。最后使用CSS3DObject实体化教学组件页面。CSS3dObject对象可以使用户像操作Three.js对象那样来操作dom元素，实现css+div的3d效果。实际上最终效果就是把Three.js的参数转化为css的matrix。用CSS3DRenderer渲染器渲染教学组件，使得3D工作室模型和2D组件元素教学组件可以显示在同一个页面上。设置工作室渲染器（WebGLRenderer）的透明度（alpha:true）交互组件不被背景覆盖。设置3D教学道具模型的点击事件更换显示组件：控制渲染器的图层覆盖顺序（z-index）来变换控制器当前所控制的渲染器。控制组件的visible属性更改是否可见，以达到点击跳出组件页面的效果。（3）交互流程。其人机交互流程如图4所示。以Java课程内容教学为例，课程分为五个阶段性任务：代码基础、JavaWeb、JavaEE、微服务入门、开发与维护。每个阶段性任务划分为若干个子任务，每个子任务清单包含若干个任务视频，每个任务视频对应相应的任务练习题。组件间交互流程模拟真实学习流程，从开始接收任务触发NPC对话组件以及任务接收组件。其中任务接收组件有详细的任务描述。任务描述包含5大要素：场景、期望、工具、可验证、技能。任务清单为任务描述的辅助列表，详细表明了任务完成所需要的内容项。任务清单包括：任务视频、视频知识点习题。学生根据任务清单所列的内容完成相应的视频观看和习题练习，即可提交答案，如若没有完成，NPC导师将不会进行学生的下一个任务进程。

4结语

该平台摈弃了传统的在线学习教育平台的教学模式，利用Web3D虚拟技术增加对知识应用岗位的可视化、体验化过程，以此加强学习者在线学习效果和改善其在线学习过程。它使得学习者的学习目标虚拟可视化、知识结构易读易记易用化，使得学习过程更加趣味化。合理的数据评测标准，动态、形象的数据变化趋势，不仅给用户更直观、更可靠的感觉，更使数据结果在用户分析自身学习过程时起到更可靠的支撑作用，从而提高用户的效率和准确性，并为用户的学习提供很好的参考价值。

参考文献

[1]万海洋,兰恩浩.线上教育实施现状、问题与建议.邵阳学院学报(自然科学版),2020,17(06):78-84

[2]周渝.网络学习平台在外语听说类课程中的应用:优势与不足.北方文学,2017(36):145

[3]周炤,李少梅,杨佳.Web墨卡托投影及其性质分析.测绘科学技术学报,2021,38(01):71-74,82

[4]陈杰,何小海,卿粼波,张琪,罗彬彬.基于Canvas的岩性符号管理系统的设计与实现.智能计算机与应用,2021,11(10):118-122,130

[5]李达敕.Three.js架构下的WebGL技术在网页图形中的应用.内蒙古农业大学学报(自然科学版),2021,42(02):99-103

作者：叶琳 施雪婷 王瑜 方瑞川 郭姝睿 蒋巍巍 单位：浙江中医药大学