Web3D短視頻學(xué)習(xí)教育平臺(tái)設(shè)計(jì)研究

導(dǎo)語(yǔ)：Web3D短視頻學(xué)習(xí)教育平臺(tái)設(shè)計(jì)研究一文來(lái)源于網(wǎng)友上傳，不代表本站觀點(diǎn)，若需要原創(chuàng)文章可咨詢(xún)客服老師，歡迎參考。

1引言

隨著市場(chǎng)上網(wǎng)絡(luò)教育的迅速發(fā)展和在線學(xué)習(xí)教育平臺(tái)的日漸成熟，網(wǎng)絡(luò)教育已經(jīng)普遍被人們所接受[1]。各大在線學(xué)習(xí)教育平臺(tái)層出不窮，有效地解決了教育資源匱乏的問(wèn)題，實(shí)現(xiàn)了資源的共享，為人們提供了隨時(shí)、隨地接受教育的機(jī)會(huì)。但是傳統(tǒng)的在線學(xué)習(xí)教育平臺(tái)依舊存在一定的局限性，例如缺少知識(shí)應(yīng)用崗位的可視化、體驗(yàn)化過(guò)程等。在線教學(xué)網(wǎng)站的可視化UI過(guò)程，依然停留在數(shù)據(jù)結(jié)構(gòu)層面，使得學(xué)習(xí)者無(wú)法擁有良好的在線學(xué)習(xí)效果和學(xué)習(xí)體驗(yàn)。此外，傳統(tǒng)的在線學(xué)習(xí)平臺(tái)為了使教學(xué)具有普遍性，往往對(duì)于每一位學(xué)習(xí)者采用相同的教學(xué)標(biāo)準(zhǔn)，并未充分考慮到每一位學(xué)習(xí)者存在的個(gè)體化的差異性[2]。這樣常常導(dǎo)致學(xué)習(xí)者花費(fèi)很多時(shí)間卻未學(xué)到真正對(duì)自身有用的知識(shí)技能，無(wú)法實(shí)現(xiàn)短時(shí)間內(nèi)的有效學(xué)習(xí)，并且學(xué)習(xí)效率低，無(wú)法達(dá)到當(dāng)代人對(duì)效率的要求。在此背景下，本文提出了基于web3d技術(shù)的短視頻學(xué)習(xí)教育平臺(tái)的設(shè)計(jì)與實(shí)現(xiàn)。該平臺(tái)基于Web3D的全新虛擬化技術(shù)，構(gòu)建網(wǎng)絡(luò)大學(xué)，使得在線學(xué)習(xí)人員可以擁有身臨其境的感受，提高了學(xué)習(xí)的趣味性。根據(jù)擬出的企業(yè)建筑、部分崗位以及技能要求為入口，將有關(guān)知識(shí)體系（專(zhuān)業(yè)體系）融入其中，以3D虛擬化建筑的方式構(gòu)建每個(gè)人的學(xué)習(xí)殿堂。它拋棄了傳統(tǒng)的冗長(zhǎng)乏味的長(zhǎng)視頻，以短小精悍的方式來(lái)構(gòu)建3D虛擬化的職業(yè)崗位內(nèi)容，學(xué)習(xí)者可以通過(guò)該平臺(tái)進(jìn)行碎片化的有效學(xué)習(xí)。

2平臺(tái)搭建

Web3D短視頻學(xué)習(xí)教育平臺(tái)搭建了3D地區(qū)、3D學(xué)院、3D工作室三個(gè)基礎(chǔ)框架，將已設(shè)計(jì)好的模型進(jìn)行加載導(dǎo)入，并進(jìn)行不斷調(diào)整使其具有一定的合理性。其中，在3D地區(qū)上分布了各個(gè)已有學(xué)院，真實(shí)還原了地區(qū)模塊分布。3D化地區(qū)模塊，實(shí)現(xiàn)了坐標(biāo)圖案化。3D學(xué)院還原仿真園區(qū)場(chǎng)景，設(shè)置全景天空、水、草、建筑、園區(qū)板塊等多彩場(chǎng)景，提供了不同大小地圖資源，學(xué)院可選擇不同的主題，形成特色更全的3D世界。3D工作室模擬真實(shí)課堂學(xué)習(xí)場(chǎng)景，提供練習(xí)臺(tái)、書(shū)架、導(dǎo)師、顯示大屏等多功能工具，還原校園學(xué)習(xí)場(chǎng)景，貼合真實(shí)學(xué)習(xí)氛圍，工作室提供相同功能以外的特色功能（如醫(yī)學(xué)工作室設(shè)置仿真動(dòng)物實(shí)驗(yàn)臺(tái)功能、化學(xué)工作室設(shè)置化學(xué)實(shí)驗(yàn)臺(tái)功能、計(jì)算機(jī)類(lèi)工作室放置代碼練習(xí)臺(tái)）。學(xué)習(xí)者可在3D工作室中進(jìn)行沉浸式學(xué)習(xí)。該平臺(tái)整體構(gòu)成要素如圖1所示。后端的SpringBoot微服務(wù)提供頁(yè)面所需的所有數(shù)據(jù)信息，如地圖數(shù)據(jù)、地標(biāo)數(shù)據(jù)、學(xué)院信息、工作室信息、虛擬人物信息、工作室內(nèi)的短視頻、階段任務(wù)和子任務(wù)、評(píng)定信息、任務(wù)進(jìn)階點(diǎn)信息等，并定義標(biāo)準(zhǔn)JSON數(shù)據(jù)格式。

3平臺(tái)實(shí)現(xiàn)

3.13D地區(qū)門(mén)戶(hù)設(shè)計(jì)與實(shí)現(xiàn)

（1）生成2D地圖實(shí)體：使用GeoJSON作為標(biāo)準(zhǔn)的數(shù)據(jù)交換格式制作地區(qū)地圖。利用GeoJSON的type屬性中的MultiPolygon生成地圖，將地區(qū)地圖幾何分為有限個(gè)離散點(diǎn)集。每個(gè)離散點(diǎn)集為一組地區(qū)數(shù)據(jù)，其中每一個(gè)離散點(diǎn)是一個(gè)二維坐標(biāo)，代表繪制地區(qū)地圖上的某一具體坐標(biāo)（即經(jīng)度和緯度）。并利用墨卡托投影將每個(gè)離散點(diǎn)轉(zhuǎn)換為WEB網(wǎng)頁(yè)上的點(diǎn)[3]。通過(guò)d3-geo.js中的geoMercator方法首先確定每個(gè)區(qū)域?qū)蛹?jí)中心點(diǎn)，從而確定邊緣點(diǎn)位置，生成2D地圖實(shí)體。（2）2D地圖轉(zhuǎn)換為3D地圖：通過(guò)Three.js中的THREE.ExtrudeGeometry將地區(qū)平面圖形拉伸為3D圖形。THREE.ExtrudeGeometry將二維圖形進(jìn)行z軸拉伸，將它轉(zhuǎn)換成三維圖形。例如拉伸圓形，就會(huì)得到一個(gè)類(lèi)似圓柱體的圖形。拉伸后將面和延伸的邊給予不同的材質(zhì)，從而呈現(xiàn)多彩的3D地區(qū)地圖圖像。3D地區(qū)門(mén)戶(hù)如圖2所示。（3）地區(qū)交互信息呈現(xiàn)：使用axiso（請(qǐng)求工具）訪問(wèn)學(xué)院信息接口獲取學(xué)院信息。訪問(wèn)學(xué)院信息接口實(shí)時(shí)更新學(xué)院的狀態(tài)。每個(gè)學(xué)院信息包括學(xué)院編號(hào)、學(xué)院坐標(biāo)，學(xué)院簡(jiǎn)介，學(xué)院名稱(chēng)等。利用墨卡托投影，高亮學(xué)院坐標(biāo)位置，轉(zhuǎn)換學(xué)院坐標(biāo)到地區(qū)地圖頁(yè)面上。并自定義drawPoint方法，使得遍歷每個(gè)學(xué)院坐標(biāo)時(shí)生成標(biāo)準(zhǔn)的標(biāo)記二維圖形。利用畫(huà)布（canvas）渲染學(xué)院名稱(chēng)[4]，實(shí)現(xiàn)畫(huà)布寬度隨文字長(zhǎng)度的改變而改變。還使用了Three.js附屬的OrbitControl.js擴(kuò)展庫(kù)作為軌道控制器控制地區(qū)地圖旋轉(zhuǎn)操作，進(jìn)一步呈現(xiàn)了3D地區(qū)的立體性。

3.23D學(xué)院門(mén)戶(hù)設(shè)計(jì)與實(shí)現(xiàn)

（1）學(xué)院地圖原型制作：使用3D渲染制作工具對(duì)學(xué)院地圖進(jìn)行建模。建模過(guò)程依據(jù)環(huán)境貼合原則，添加道路、綠化、水池等元素增加用戶(hù)學(xué)習(xí)過(guò)程中的幸福感。為后續(xù)拓展，設(shè)計(jì)了不同教學(xué)建筑樣式，以便可以區(qū)分不同功能的教學(xué)建筑。提供小、中、大不同樣式的學(xué)院地圖模型方案，供合作院校選擇相應(yīng)樣式套餐。模型樣式如圖3所示。（2）Web3D學(xué)院構(gòu)成：以O(shè)BJ文件作為建筑原型導(dǎo)出文件。規(guī)范化模型樣式和原型的文件名稱(chēng)，除了建筑，其他模型名稱(chēng)不進(jìn)行規(guī)范化改變。利用Three.js中的OBJLoader模型加載器批量導(dǎo)入模型原型。并使用Three.js生成門(mén)戶(hù)場(chǎng)景，渲染導(dǎo)入模型[5]。添加3D天空全景圖，使用Three.CubeTextureLoader來(lái)對(duì)場(chǎng)景Scene的背景進(jìn)行貼圖，使之成為一個(gè)天空盒，無(wú)論怎么縮放，始終都在全景內(nèi)。渲染器采用雙渲染器（WGLRenderer、CSS3DRenderer），分別渲染3D學(xué)院地圖和路標(biāo)上顯示的DOM元素。軌道條控制器使用Three.js附屬的OrbitControl.js擴(kuò)展庫(kù)作為軌道控制器控制學(xué)院門(mén)戶(hù)旋轉(zhuǎn)操作。圖33D學(xué)院地圖模型（3）學(xué)院交互信息呈現(xiàn)：使用axiso(請(qǐng)求工具)訪問(wèn)工作室信息接口獲取工作室信息。地圖中入口路標(biāo)為已開(kāi)放工作室的名單展示，通過(guò)tween.js實(shí)現(xiàn)路標(biāo)點(diǎn)擊放大的平滑動(dòng)畫(huà)操作。采用鍵值對(duì)的方式儲(chǔ)存建筑和工作室信息的綁定，信息繪制呈現(xiàn)為canvas和div兩種方式。div模塊為入口路標(biāo)的呈現(xiàn)方式，canvas為建筑上方的文字呈現(xiàn)。其中canvas將以建筑中心為起點(diǎn)，向上向前偏移一定位置，以達(dá)到醒目的顯示作用。綁定完工作室和建筑后，添加相應(yīng)點(diǎn)擊事件，即點(diǎn)擊建筑時(shí)，搜索以建筑編號(hào)為key值的工作室編號(hào)value值，進(jìn)行工作室的路由跳轉(zhuǎn)。路由跳轉(zhuǎn)由vue-router實(shí)現(xiàn)。

3.33D工作室門(mén)戶(hù)設(shè)計(jì)與實(shí)現(xiàn)

3.3.1工作室原型制作使用3D渲染制作工具對(duì)工作室地圖進(jìn)行建模。建模過(guò)程依據(jù)環(huán)境貼合原則，分析教學(xué)學(xué)習(xí)氛圍，盡量貼合學(xué)校教師特征。添加書(shū)架、練習(xí)臺(tái)、顯示大屏等元素。為后續(xù)拓展，設(shè)計(jì)了顯示大屏這個(gè)特色功能臺(tái)。顯示大屏即為不同工作室提供的不同功能，在示例工作室中該功能為代碼校驗(yàn)編譯器，為學(xué)生學(xué)習(xí)代碼相關(guān)知識(shí)時(shí)提供便捷的學(xué)習(xí)環(huán)境。使用建模的方式創(chuàng)建工作室環(huán)境可以為后續(xù)不同主題的工作室提供不同的學(xué)習(xí)環(huán)境和氛圍。工作室導(dǎo)師模型采用開(kāi)源glb模型。該模型描述了整個(gè)導(dǎo)師的3D場(chǎng)景的內(nèi)容，包含了對(duì)場(chǎng)景結(jié)構(gòu)進(jìn)行描述的場(chǎng)景圖、3DNPC的場(chǎng)景結(jié)點(diǎn)網(wǎng)格定義、材質(zhì)外觀、動(dòng)畫(huà)變換操作(如跳躍、跳舞)。3.3.2Web3D工作室構(gòu)成使用Three.js的GLTFLoader.js、OBJLoader.js、MTLLoader.js文件加載器分別導(dǎo)入人物模型和3D工作室模型。并使用Three.js渲染房間場(chǎng)景。Three.js附屬的OrbitControl.js擴(kuò)展庫(kù)作為軌道控制器控制房間旋轉(zhuǎn)操作。tween.js動(dòng)畫(huà)庫(kù)實(shí)現(xiàn)3D房間模型點(diǎn)擊到交互組件的動(dòng)畫(huà)平滑移動(dòng)。3.3.3工作室教學(xué)組件實(shí)現(xiàn)（1）教學(xué)組件概要。組件分為任務(wù)NPC對(duì)話組件、任務(wù)布置接受提交組件、書(shū)架視頻播放組件、書(shū)桌練習(xí)題組件（練習(xí)臺(tái)）、顯示屏組件。NPC組件實(shí)現(xiàn)了NPC對(duì)話、任務(wù)提交接收、任務(wù)接收后的任務(wù)詳情描述以及任務(wù)清單的操作。書(shū)架視頻播放組件實(shí)現(xiàn)了教學(xué)視頻的存儲(chǔ)、任務(wù)視頻播放記錄的操作。書(shū)桌練習(xí)臺(tái)組件內(nèi)包含三個(gè)子組件，分別為：題庫(kù)，學(xué)生可一次性查閱該工作室的所有練習(xí)題信息并且每份練習(xí)題提交后都給予學(xué)生實(shí)時(shí)的題目正確率反饋；未完成任務(wù)習(xí)題，學(xué)生的任務(wù)習(xí)題如未完成將呈現(xiàn)于該子組件中；已完成習(xí)題，記錄學(xué)生的完成習(xí)題，利于學(xué)生查閱和后續(xù)教學(xué)評(píng)定。顯示屏組件包含四大顯示模塊：用戶(hù)的信息，示例用戶(hù)為學(xué)生用戶(hù)信息；echarts餅圖，學(xué)生的課程完成情況圖；任務(wù)清單列表，學(xué)生不僅可以在NPC導(dǎo)師那了解自己的任務(wù)清單，也可以在屏幕上實(shí)時(shí)關(guān)注自己的清單需求；任務(wù)階梯，顯示學(xué)生當(dāng)前的課程完成度。（2）教學(xué)組件實(shí)現(xiàn)。使用vue文件存放各組件信息。組件（Component）實(shí)現(xiàn)父組件中子組件的切換，該元素為vue中定義的元素。組件是Vue.js最強(qiáng)大的功能之一，可以擴(kuò)展HTML元素，封裝可以重用的代碼。在較高層面上，組件是自定義元素，Vue.js的編譯器為它添加特殊功能。在有些情況下，組件也可以表現(xiàn)為用js特性進(jìn)行了擴(kuò)展的原生HTML元素。并且以Element-UI作為頁(yè)面樣式庫(kù)，規(guī)范組件樣式的統(tǒng)一，包括按鈕、文字、頁(yè)面框架等。使用props完成父子組件傳值。在Vue中，父子組件的關(guān)系可以總結(jié)為propsdown、eventsup。父組件通過(guò)props向下傳遞數(shù)據(jù)給子組件，子組件通過(guò)events給父組件發(fā)送消息。最后使用CSS3DObject實(shí)體化教學(xué)組件頁(yè)面。CSS3dObject對(duì)象可以使用戶(hù)像操作Three.js對(duì)象那樣來(lái)操作dom元素，實(shí)現(xiàn)css+div的3d效果。實(shí)際上最終效果就是把Three.js的參數(shù)轉(zhuǎn)化為css的matrix。用CSS3DRenderer渲染器渲染教學(xué)組件，使得3D工作室模型和2D組件元素教學(xué)組件可以顯示在同一個(gè)頁(yè)面上。設(shè)置工作室渲染器（WebGLRenderer）的透明度（alpha:true）交互組件不被背景覆蓋。設(shè)置3D教學(xué)道具模型的點(diǎn)擊事件更換顯示組件：控制渲染器的圖層覆蓋順序（z-index）來(lái)變換控制器當(dāng)前所控制的渲染器?？刂平M件的visible屬性更改是否可見(jiàn)，以達(dá)到點(diǎn)擊跳出組件頁(yè)面的效果。（3）交互流程。其人機(jī)交互流程如圖4所示。以Java課程內(nèi)容教學(xué)為例，課程分為五個(gè)階段性任務(wù)：代碼基礎(chǔ)、JavaWeb、JavaEE、微服務(wù)入門(mén)、開(kāi)發(fā)與維護(hù)。每個(gè)階段性任務(wù)劃分為若干個(gè)子任務(wù)，每個(gè)子任務(wù)清單包含若干個(gè)任務(wù)視頻，每個(gè)任務(wù)視頻對(duì)應(yīng)相應(yīng)的任務(wù)練習(xí)題。組件間交互流程模擬真實(shí)學(xué)習(xí)流程，從開(kāi)始接收任務(wù)觸發(fā)NPC對(duì)話組件以及任務(wù)接收組件。其中任務(wù)接收組件有詳細(xì)的任務(wù)描述。任務(wù)描述包含5大要素：場(chǎng)景、期望、工具、可驗(yàn)證、技能。任務(wù)清單為任務(wù)描述的輔助列表，詳細(xì)表明了任務(wù)完成所需要的內(nèi)容項(xiàng)。任務(wù)清單包括：任務(wù)視頻、視頻知識(shí)點(diǎn)習(xí)題。學(xué)生根據(jù)任務(wù)清單所列的內(nèi)容完成相應(yīng)的視頻觀看和習(xí)題練習(xí)，即可提交答案，如若沒(méi)有完成，NPC導(dǎo)師將不會(huì)進(jìn)行學(xué)生的下一個(gè)任務(wù)進(jìn)程。

4結(jié)語(yǔ)

該平臺(tái)擯棄了傳統(tǒng)的在線學(xué)習(xí)教育平臺(tái)的教學(xué)模式，利用Web3D虛擬技術(shù)增加對(duì)知識(shí)應(yīng)用崗位的可視化、體驗(yàn)化過(guò)程，以此加強(qiáng)學(xué)習(xí)者在線學(xué)習(xí)效果和改善其在線學(xué)習(xí)過(guò)程。它使得學(xué)習(xí)者的學(xué)習(xí)目標(biāo)虛擬可視化、知識(shí)結(jié)構(gòu)易讀易記易用化，使得學(xué)習(xí)過(guò)程更加趣味化。合理的數(shù)據(jù)評(píng)測(cè)標(biāo)準(zhǔn)，動(dòng)態(tài)、形象的數(shù)據(jù)變化趨勢(shì)，不僅給用戶(hù)更直觀、更可靠的感覺(jué)，更使數(shù)據(jù)結(jié)果在用戶(hù)分析自身學(xué)習(xí)過(guò)程時(shí)起到更可靠的支撐作用，從而提高用戶(hù)的效率和準(zhǔn)確性，并為用戶(hù)的學(xué)習(xí)提供很好的參考價(jià)值。

參考文獻(xiàn)

[1]萬(wàn)海洋,蘭恩浩.線上教育實(shí)施現(xiàn)狀、問(wèn)題與建議.邵陽(yáng)學(xué)院學(xué)報(bào)(自然科學(xué)版),2020,17(06):78-84

[2]周渝.網(wǎng)絡(luò)學(xué)習(xí)平臺(tái)在外語(yǔ)聽(tīng)說(shuō)類(lèi)課程中的應(yīng)用:優(yōu)勢(shì)與不足.北方文學(xué),2017(36):145

[3]周炤,李少梅,楊佳.Web墨卡托投影及其性質(zhì)分析.測(cè)繪科學(xué)技術(shù)學(xué)報(bào),2021,38(01):71-74,82

[4]陳杰,何小海,卿粼波,張琪,羅彬彬.基于Canvas的巖性符號(hào)管理系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn).智能計(jì)算機(jī)與應(yīng)用,2021,11(10):118-122,130

[5]李達(dá)敕.Three.js架構(gòu)下的WebGL技術(shù)在網(wǎng)頁(yè)圖形中的應(yīng)用.內(nèi)蒙古農(nóng)業(yè)大學(xué)學(xué)報(bào)(自然科學(xué)版),2021,42(02):99-103

作者：葉琳 施雪婷 王瑜 方瑞川 郭姝睿 蔣巍巍 單位：浙江中醫(yī)藥大學(xué)