Web3D短視頻學習教育平臺設計研究

導語：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

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