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

1引言

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

2平臺搭建

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

3平臺實現(xiàn)

3.13D地區(qū)門戶設(shè)計與實現(xiàn)

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

3.23D學(xué)院門戶設(shè)計與實現(xiàn)

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

3.33D工作室門戶設(shè)計與實現(xiàn)

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

4結(jié)語

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

參考文獻

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

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

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

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

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

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