導語：Web3D短視(shi)頻學習教(jiao)育平(ping)臺設計研究一(yi)文(wen)來源于網友上傳(chuan)，不(bu)代表本站(zhan)觀點，若需要(yao)原創文(wen)章可咨詢客(ke)服老師，歡(huan)迎參考。

1引言

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

2平臺搭建

Web3D短視頻學(xue)(xue)習(xi)(xi)教(jiao)育平臺(tai)搭建了(le)(le)(le)3D地(di)(di)區(qu)(qu)、3D學(xue)(xue)院、3D工(gong)作(zuo)(zuo)(zuo)室(shi)三個基(ji)礎框架(jia)，將(jiang)已設(she)計好的模(mo)型進行加(jia)載導入(ru)，并進行不(bu)斷調(diao)整使其(qi)(qi)具有(you)一定的合理性。其(qi)(qi)中，在3D地(di)(di)區(qu)(qu)上(shang)分布了(le)(le)(le)各個已有(you)學(xue)(xue)院，真(zhen)實(shi)還(huan)(huan)原了(le)(le)(le)地(di)(di)區(qu)(qu)模(mo)塊分布。3D化(hua)地(di)(di)區(qu)(qu)模(mo)塊，實(shi)現(xian)了(le)(le)(le)坐標圖(tu)案化(hua)。3D學(xue)(xue)院還(huan)(huan)原仿真(zhen)園區(qu)(qu)場景，設(she)置全(quan)景天空、水、草(cao)、建筑(zhu)、園區(qu)(qu)板塊等(deng)多(duo)彩場景，提供了(le)(le)(le)不(bu)同(tong)大小地(di)(di)圖(tu)資源，學(xue)(xue)院可(ke)選擇不(bu)同(tong)的主題，形成特色更全(quan)的3D世界。3D工(gong)作(zuo)(zuo)(zuo)室(shi)模(mo)擬真(zhen)實(shi)課堂學(xue)(xue)習(xi)(xi)場景，提供練(lian)習(xi)(xi)臺(tai)、書架(jia)、導師、顯示(shi)大屏等(deng)多(duo)功能(neng)工(gong)具，還(huan)(huan)原校園學(xue)(xue)習(xi)(xi)場景，貼(tie)合真(zhen)實(shi)學(xue)(xue)習(xi)(xi)氛圍，工(gong)作(zuo)(zuo)(zuo)室(shi)提供相同(tong)功能(neng)以外的特色功能(neng)（如(ru)(ru)醫學(xue)(xue)工(gong)作(zuo)(zuo)(zuo)室(shi)設(she)置仿真(zhen)動物實(shi)驗臺(tai)功能(neng)、化(hua)學(xue)(xue)工(gong)作(zuo)(zuo)(zuo)室(shi)設(she)置化(hua)學(xue)(xue)實(shi)驗臺(tai)功能(neng)、計算機類工(gong)作(zuo)(zuo)(zuo)室(shi)放置代(dai)碼(ma)練(lian)習(xi)(xi)臺(tai)）。學(xue)(xue)習(xi)(xi)者可(ke)在3D工(gong)作(zuo)(zuo)(zuo)室(shi)中進行沉浸式學(xue)(xue)習(xi)(xi)。該(gai)平臺(tai)整體(ti)構成要素如(ru)(ru)圖(tu)1所(suo)示(shi)。后端的SpringBoot微服務(wu)提供頁面所(suo)需的所(suo)有(you)數據(ju)(ju)(ju)信(xin)(xin)息(xi)(xi)，如(ru)(ru)地(di)(di)圖(tu)數據(ju)(ju)(ju)、地(di)(di)標數據(ju)(ju)(ju)、學(xue)(xue)院信(xin)(xin)息(xi)(xi)、工(gong)作(zuo)(zuo)(zuo)室(shi)信(xin)(xin)息(xi)(xi)、虛擬人物信(xin)(xin)息(xi)(xi)、工(gong)作(zuo)(zuo)(zuo)室(shi)內的短視頻、階段任務(wu)和子(zi)任務(wu)、評定信(xin)(xin)息(xi)(xi)、任務(wu)進階點(dian)信(xin)(xin)息(xi)(xi)等(deng)，并定義標準JSON數據(ju)(ju)(ju)格式。

3平臺實現

3.13D地區門戶設計(ji)與實現

（1）生成2D地(di)(di)(di)(di)(di)(di)圖(tu)(tu)(tu)(tu)(tu)(tu)實(shi)體：使(shi)用(yong)(yong)GeoJSON作(zuo)為(wei)(wei)標(biao)(biao)(biao)準(zhun)的(de)數(shu)(shu)據(ju)(ju)交換(huan)格式制(zhi)作(zuo)地(di)(di)(di)(di)(di)(di)區(qu)(qu)(qu)(qu)(qu)(qu)地(di)(di)(di)(di)(di)(di)圖(tu)(tu)(tu)(tu)(tu)(tu)。利(li)用(yong)(yong)GeoJSON的(de)type屬性(xing)中的(de)MultiPolygon生成地(di)(di)(di)(di)(di)(di)圖(tu)(tu)(tu)(tu)(tu)(tu)，將(jiang)(jiang)(jiang)地(di)(di)(di)(di)(di)(di)區(qu)(qu)(qu)(qu)(qu)(qu)地(di)(di)(di)(di)(di)(di)圖(tu)(tu)(tu)(tu)(tu)(tu)幾(ji)何分為(wei)(wei)有(you)限個(ge)(ge)離(li)散點(dian)(dian)集(ji)(ji)。每(mei)(mei)個(ge)(ge)離(li)散點(dian)(dian)集(ji)(ji)為(wei)(wei)一(yi)組地(di)(di)(di)(di)(di)(di)區(qu)(qu)(qu)(qu)(qu)(qu)數(shu)(shu)據(ju)(ju)，其中每(mei)(mei)一(yi)個(ge)(ge)離(li)散點(dian)(dian)是一(yi)個(ge)(ge)二維坐標(biao)(biao)(biao)，代表繪制(zhi)地(di)(di)(di)(di)(di)(di)區(qu)(qu)(qu)(qu)(qu)(qu)地(di)(di)(di)(di)(di)(di)圖(tu)(tu)(tu)(tu)(tu)(tu)上的(de)某(mou)一(yi)具體坐標(biao)(biao)(biao)（即經度(du)和緯度(du)）。并(bing)利(li)用(yong)(yong)墨卡(ka)托投(tou)影(ying)將(jiang)(jiang)(jiang)每(mei)(mei)個(ge)(ge)離(li)散點(dian)(dian)轉(zhuan)換(huan)為(wei)(wei)WEB網(wang)頁上的(de)點(dian)(dian)[3]。通過d3-geo.js中的(de)geoMercator方(fang)法首先確定(ding)每(mei)(mei)個(ge)(ge)區(qu)(qu)(qu)(qu)(qu)(qu)域層級中心點(dian)(dian)，從而(er)確定(ding)邊(bian)緣點(dian)(dian)位置，生成2D地(di)(di)(di)(di)(di)(di)圖(tu)(tu)(tu)(tu)(tu)(tu)實(shi)體。（2）2D地(di)(di)(di)(di)(di)(di)圖(tu)(tu)(tu)(tu)(tu)(tu)轉(zhuan)換(huan)為(wei)(wei)3D地(di)(di)(di)(di)(di)(di)圖(tu)(tu)(tu)(tu)(tu)(tu)：通過Three.js中的(de)THREE.ExtrudeGeometry將(jiang)(jiang)(jiang)地(di)(di)(di)(di)(di)(di)區(qu)(qu)(qu)(qu)(qu)(qu)平面圖(tu)(tu)(tu)(tu)(tu)(tu)形(xing)拉伸為(wei)(wei)3D圖(tu)(tu)(tu)(tu)(tu)(tu)形(xing)。THREE.ExtrudeGeometry將(jiang)(jiang)(jiang)二維圖(tu)(tu)(tu)(tu)(tu)(tu)形(xing)進行z軸拉伸，將(jiang)(jiang)(jiang)它轉(zhuan)換(huan)成三(san)維圖(tu)(tu)(tu)(tu)(tu)(tu)形(xing)。例如拉伸圓(yuan)(yuan)形(xing)，就會得到一(yi)個(ge)(ge)類(lei)似圓(yuan)(yuan)柱體的(de)圖(tu)(tu)(tu)(tu)(tu)(tu)形(xing)。拉伸后將(jiang)(jiang)(jiang)面和延伸的(de)邊(bian)給予不同的(de)材(cai)質，從而(er)呈(cheng)(cheng)現(xian)多(duo)彩的(de)3D地(di)(di)(di)(di)(di)(di)區(qu)(qu)(qu)(qu)(qu)(qu)地(di)(di)(di)(di)(di)(di)圖(tu)(tu)(tu)(tu)(tu)(tu)圖(tu)(tu)(tu)(tu)(tu)(tu)像。3D地(di)(di)(di)(di)(di)(di)區(qu)(qu)(qu)(qu)(qu)(qu)門戶如圖(tu)(tu)(tu)(tu)(tu)(tu)2所(suo)示(shi)。（3）地(di)(di)(di)(di)(di)(di)區(qu)(qu)(qu)(qu)(qu)(qu)交互信息(xi)呈(cheng)(cheng)現(xian)：使(shi)用(yong)(yong)axiso（請求工(gong)具）訪(fang)問(wen)學(xue)院(yuan)信息(xi)接口獲取學(xue)院(yuan)信息(xi)。訪(fang)問(wen)學(xue)院(yuan)信息(xi)接口實(shi)時更新(xin)學(xue)院(yuan)的(de)狀態。每(mei)(mei)個(ge)(ge)學(xue)院(yuan)信息(xi)包括學(xue)院(yuan)編號、學(xue)院(yuan)坐標(biao)(biao)(biao)，學(xue)院(yuan)簡介，學(xue)院(yuan)名(ming)稱(cheng)等(deng)。利(li)用(yong)(yong)墨卡(ka)托投(tou)影(ying)，高亮學(xue)院(yuan)坐標(biao)(biao)(biao)位置，轉(zhuan)換(huan)學(xue)院(yuan)坐標(biao)(biao)(biao)到地(di)(di)(di)(di)(di)(di)區(qu)(qu)(qu)(qu)(qu)(qu)地(di)(di)(di)(di)(di)(di)圖(tu)(tu)(tu)(tu)(tu)(tu)頁面上。并(bing)自定(ding)義drawPoint方(fang)法，使(shi)得遍歷(li)每(mei)(mei)個(ge)(ge)學(xue)院(yuan)坐標(biao)(biao)(biao)時生成標(biao)(biao)(biao)準(zhun)的(de)標(biao)(biao)(biao)記二維圖(tu)(tu)(tu)(tu)(tu)(tu)形(xing)。利(li)用(yong)(yong)畫布（canvas）渲染學(xue)院(yuan)名(ming)稱(cheng)[4]，實(shi)現(xian)畫布寬(kuan)度(du)隨文字長度(du)的(de)改(gai)變而(er)改(gai)變。還使(shi)用(yong)(yong)了Three.js附屬的(de)OrbitControl.js擴(kuo)展庫(ku)作(zuo)為(wei)(wei)軌(gui)道控制(zhi)器控制(zhi)地(di)(di)(di)(di)(di)(di)區(qu)(qu)(qu)(qu)(qu)(qu)地(di)(di)(di)(di)(di)(di)圖(tu)(tu)(tu)(tu)(tu)(tu)旋(xuan)轉(zhuan)操作(zuo)，進一(yi)步呈(cheng)(cheng)現(xian)了3D地(di)(di)(di)(di)(di)(di)區(qu)(qu)(qu)(qu)(qu)(qu)的(de)立(li)體性(xing)。

3.23D學院(yuan)門戶(hu)設計與實現

（1）學(xue)(xue)(xue)院(yuan)(yuan)地圖(tu)(tu)(tu)原(yuan)(yuan)型(xing)(xing)(xing)制(zhi)作(zuo)(zuo)(zuo)(zuo)(zuo)：使(shi)用(yong)(yong)3D渲染制(zhi)作(zuo)(zuo)(zuo)(zuo)(zuo)工(gong)具(ju)對(dui)(dui)(dui)學(xue)(xue)(xue)院(yuan)(yuan)地圖(tu)(tu)(tu)進(jin)行(xing)(xing)建(jian)(jian)(jian)模(mo)。建(jian)(jian)(jian)模(mo)過程依(yi)據環境貼合原(yuan)(yuan)則，添加(jia)道(dao)(dao)(dao)路(lu)(lu)、綠化(hua)、水池(chi)等(deng)元(yuan)素增加(jia)用(yong)(yong)戶(hu)學(xue)(xue)(xue)習過程中(zhong)(zhong)的(de)(de)幸福感。為(wei)(wei)(wei)(wei)后續(xu)拓(tuo)展，設計了不同(tong)教學(xue)(xue)(xue)建(jian)(jian)(jian)筑(zhu)樣式(shi)(shi)(shi)，以(yi)(yi)(yi)便可(ke)以(yi)(yi)(yi)區(qu)分不同(tong)功能的(de)(de)教學(xue)(xue)(xue)建(jian)(jian)(jian)筑(zhu)。提供(gong)小、中(zhong)(zhong)、大不同(tong)樣式(shi)(shi)(shi)的(de)(de)學(xue)(xue)(xue)院(yuan)(yuan)地圖(tu)(tu)(tu)模(mo)型(xing)(xing)(xing)方案，供(gong)合作(zuo)(zuo)(zuo)(zuo)(zuo)院(yuan)(yuan)校選擇相(xiang)應(ying)樣式(shi)(shi)(shi)套餐。模(mo)型(xing)(xing)(xing)樣式(shi)(shi)(shi)如(ru)圖(tu)(tu)(tu)3所(suo)示。（2）Web3D學(xue)(xue)(xue)院(yuan)(yuan)構成(cheng)：以(yi)(yi)(yi)OBJ文件作(zuo)(zuo)(zuo)(zuo)(zuo)為(wei)(wei)(wei)(wei)建(jian)(jian)(jian)筑(zhu)原(yuan)(yuan)型(xing)(xing)(xing)導出(chu)文件。規范化(hua)模(mo)型(xing)(xing)(xing)樣式(shi)(shi)(shi)和原(yuan)(yuan)型(xing)(xing)(xing)的(de)(de)文件名稱，除了建(jian)(jian)(jian)筑(zhu)，其他模(mo)型(xing)(xing)(xing)名稱不進(jin)行(xing)(xing)規范化(hua)改變。利(li)用(yong)(yong)Three.js中(zhong)(zhong)的(de)(de)OBJLoader模(mo)型(xing)(xing)(xing)加(jia)載器(qi)批量(liang)導入(ru)模(mo)型(xing)(xing)(xing)原(yuan)(yuan)型(xing)(xing)(xing)。并使(shi)用(yong)(yong)Three.js生成(cheng)門戶(hu)場(chang)(chang)景(jing)(jing)，渲染導入(ru)模(mo)型(xing)(xing)(xing)[5]。添加(jia)3D天空(kong)全景(jing)(jing)圖(tu)(tu)(tu)，使(shi)用(yong)(yong)Three.CubeTextureLoader來對(dui)(dui)(dui)場(chang)(chang)景(jing)(jing)Scene的(de)(de)背景(jing)(jing)進(jin)行(xing)(xing)貼圖(tu)(tu)(tu)，使(shi)之(zhi)成(cheng)為(wei)(wei)(wei)(wei)一(yi)個天空(kong)盒(he)，無(wu)論怎么縮(suo)放，始終(zhong)都在全景(jing)(jing)內(nei)。渲染器(qi)采用(yong)(yong)雙渲染器(qi)（WGLRenderer、CSS3DRenderer），分別渲染3D學(xue)(xue)(xue)院(yuan)(yuan)地圖(tu)(tu)(tu)和路(lu)(lu)標(biao)上(shang)顯示的(de)(de)DOM元(yuan)素。軌(gui)道(dao)(dao)(dao)條控制(zhi)器(qi)使(shi)用(yong)(yong)Three.js附屬的(de)(de)OrbitControl.js擴展庫(ku)作(zuo)(zuo)(zuo)(zuo)(zuo)為(wei)(wei)(wei)(wei)軌(gui)道(dao)(dao)(dao)控制(zhi)器(qi)控制(zhi)學(xue)(xue)(xue)院(yuan)(yuan)門戶(hu)旋轉(zhuan)(zhuan)操作(zuo)(zuo)(zuo)(zuo)(zuo)。圖(tu)(tu)(tu)33D學(xue)(xue)(xue)院(yuan)(yuan)地圖(tu)(tu)(tu)模(mo)型(xing)(xing)(xing)（3）學(xue)(xue)(xue)院(yuan)(yuan)交(jiao)互(hu)信(xin)(xin)(xin)息(xi)呈現(xian)：使(shi)用(yong)(yong)axiso(請(qing)求工(gong)具(ju))訪問(wen)工(gong)作(zuo)(zuo)(zuo)(zuo)(zuo)室(shi)(shi)信(xin)(xin)(xin)息(xi)接口(kou)(kou)獲取工(gong)作(zuo)(zuo)(zuo)(zuo)(zuo)室(shi)(shi)信(xin)(xin)(xin)息(xi)。地圖(tu)(tu)(tu)中(zhong)(zhong)入(ru)口(kou)(kou)路(lu)(lu)標(biao)為(wei)(wei)(wei)(wei)已開放工(gong)作(zuo)(zuo)(zuo)(zuo)(zuo)室(shi)(shi)的(de)(de)名單展示，通過tween.js實現(xian)路(lu)(lu)標(biao)點(dian)擊(ji)(ji)放大的(de)(de)平(ping)滑動畫操作(zuo)(zuo)(zuo)(zuo)(zuo)。采用(yong)(yong)鍵值對(dui)(dui)(dui)的(de)(de)方式(shi)(shi)(shi)儲存建(jian)(jian)(jian)筑(zhu)和工(gong)作(zuo)(zuo)(zuo)(zuo)(zuo)室(shi)(shi)信(xin)(xin)(xin)息(xi)的(de)(de)綁(bang)定，信(xin)(xin)(xin)息(xi)繪制(zhi)呈現(xian)為(wei)(wei)(wei)(wei)canvas和div兩種方式(shi)(shi)(shi)。div模(mo)塊為(wei)(wei)(wei)(wei)入(ru)口(kou)(kou)路(lu)(lu)標(biao)的(de)(de)呈現(xian)方式(shi)(shi)(shi)，canvas為(wei)(wei)(wei)(wei)建(jian)(jian)(jian)筑(zhu)上(shang)方的(de)(de)文字呈現(xian)。其中(zhong)(zhong)canvas將以(yi)(yi)(yi)建(jian)(jian)(jian)筑(zhu)中(zhong)(zhong)心為(wei)(wei)(wei)(wei)起點(dian)，向上(shang)向前偏(pian)移一(yi)定位置，以(yi)(yi)(yi)達到醒目的(de)(de)顯示作(zuo)(zuo)(zuo)(zuo)(zuo)用(yong)(yong)。綁(bang)定完工(gong)作(zuo)(zuo)(zuo)(zuo)(zuo)室(shi)(shi)和建(jian)(jian)(jian)筑(zhu)后，添加(jia)相(xiang)應(ying)點(dian)擊(ji)(ji)事件，即點(dian)擊(ji)(ji)建(jian)(jian)(jian)筑(zhu)時，搜索(suo)以(yi)(yi)(yi)建(jian)(jian)(jian)筑(zhu)編號為(wei)(wei)(wei)(wei)key值的(de)(de)工(gong)作(zuo)(zuo)(zuo)(zuo)(zuo)室(shi)(shi)編號value值，進(jin)行(xing)(xing)工(gong)作(zuo)(zuo)(zuo)(zuo)(zuo)室(shi)(shi)的(de)(de)路(lu)(lu)由跳(tiao)轉(zhuan)(zhuan)。路(lu)(lu)由跳(tiao)轉(zhuan)(zhuan)由vue-router實現(xian)。

3.33D工作(zuo)室門(men)戶(hu)設計與實現

3.3.1工(gong)(gong)(gong)(gong)作(zuo)(zuo)(zuo)(zuo)(zuo)(zuo)室(shi)(shi)(shi)原型(xing)制(zhi)(zhi)作(zuo)(zuo)(zuo)(zuo)(zuo)(zuo)使用(yong)(yong)(yong)3D渲(xuan)染(ran)(ran)制(zhi)(zhi)作(zuo)(zuo)(zuo)(zuo)(zuo)(zuo)工(gong)(gong)(gong)(gong)具(ju)對(dui)工(gong)(gong)(gong)(gong)作(zuo)(zuo)(zuo)(zuo)(zuo)(zuo)室(shi)(shi)(shi)地圖(tu)進行(xing)建模(mo)。建模(mo)過程(cheng)依據(ju)環(huan)境(jing)貼合(he)原則，分(fen)(fen)析教(jiao)(jiao)(jiao)(jiao)學(xue)(xue)(xue)(xue)(xue)(xue)學(xue)(xue)(xue)(xue)(xue)(xue)習(xi)(xi)(xi)(xi)(xi)(xi)氛圍(wei)，盡量貼合(he)學(xue)(xue)(xue)(xue)(xue)(xue)校教(jiao)(jiao)(jiao)(jiao)師特(te)征。添(tian)加(jia)書架(jia)、練(lian)(lian)(lian)習(xi)(xi)(xi)(xi)(xi)(xi)臺(tai)、顯示(shi)(shi)大屏(ping)(ping)等(deng)元素(su)(su)(su)。為(wei)(wei)后(hou)續(xu)拓展(zhan)(zhan)，設計了(le)顯示(shi)(shi)大屏(ping)(ping)這個(ge)(ge)(ge)特(te)色功能(neng)(neng)臺(tai)。顯示(shi)(shi)大屏(ping)(ping)即為(wei)(wei)不同(tong)(tong)(tong)工(gong)(gong)(gong)(gong)作(zuo)(zuo)(zuo)(zuo)(zuo)(zuo)室(shi)(shi)(shi)提(ti)供的(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)不同(tong)(tong)(tong)功能(neng)(neng)，在(zai)示(shi)(shi)例工(gong)(gong)(gong)(gong)作(zuo)(zuo)(zuo)(zuo)(zuo)(zuo)室(shi)(shi)(shi)中(zhong)(zhong)該(gai)功能(neng)(neng)為(wei)(wei)代(dai)碼(ma)校驗編譯(yi)(yi)器，為(wei)(wei)學(xue)(xue)(xue)(xue)(xue)(xue)生(sheng)(sheng)學(xue)(xue)(xue)(xue)(xue)(xue)習(xi)(xi)(xi)(xi)(xi)(xi)代(dai)碼(ma)相關(guan)(guan)知識時(shi)提(ti)供便捷的(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)學(xue)(xue)(xue)(xue)(xue)(xue)習(xi)(xi)(xi)(xi)(xi)(xi)環(huan)境(jing)。使用(yong)(yong)(yong)建模(mo)的(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)方式創建工(gong)(gong)(gong)(gong)作(zuo)(zuo)(zuo)(zuo)(zuo)(zuo)室(shi)(shi)(shi)環(huan)境(jing)可以(yi)(yi)為(wei)(wei)后(hou)續(xu)不同(tong)(tong)(tong)主(zhu)題(ti)(ti)的(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)工(gong)(gong)(gong)(gong)作(zuo)(zuo)(zuo)(zuo)(zuo)(zuo)室(shi)(shi)(shi)提(ti)供不同(tong)(tong)(tong)的(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)學(xue)(xue)(xue)(xue)(xue)(xue)習(xi)(xi)(xi)(xi)(xi)(xi)環(huan)境(jing)和(he)氛圍(wei)。工(gong)(gong)(gong)(gong)作(zuo)(zuo)(zuo)(zuo)(zuo)(zuo)室(shi)(shi)(shi)導(dao)師模(mo)型(xing)采(cai)用(yong)(yong)(yong)開(kai)源glb模(mo)型(xing)。該(gai)模(mo)型(xing)描述了(le)整個(ge)(ge)(ge)導(dao)師的(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)3D場(chang)(chang)(chang)景的(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)內(nei)(nei)容(rong)，包含(han)了(le)對(dui)場(chang)(chang)(chang)景結構進行(xing)描述的(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)場(chang)(chang)(chang)景圖(tu)、3DNPC的(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)場(chang)(chang)(chang)景結點(dian)網格定義(yi)、材(cai)質外(wai)觀(guan)、動(dong)(dong)畫(hua)變換(huan)操(cao)(cao)作(zuo)(zuo)(zuo)(zuo)(zuo)(zuo)(如(ru)跳躍(yue)、跳舞)。3.3.2Web3D工(gong)(gong)(gong)(gong)作(zuo)(zuo)(zuo)(zuo)(zuo)(zuo)室(shi)(shi)(shi)構成(cheng)(cheng)(cheng)使用(yong)(yong)(yong)Three.js的(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)GLTFLoader.js、OBJLoader.js、MTLLoader.js文(wen)件(jian)(jian)(jian)(jian)加(jia)載器分(fen)(fen)別(bie)導(dao)入(ru)人(ren)(ren)物(wu)模(mo)型(xing)和(he)3D工(gong)(gong)(gong)(gong)作(zuo)(zuo)(zuo)(zuo)(zuo)(zuo)室(shi)(shi)(shi)模(mo)型(xing)。并(bing)(bing)使用(yong)(yong)(yong)Three.js渲(xuan)染(ran)(ran)房間(jian)(jian)(jian)場(chang)(chang)(chang)景。Three.js附屬的(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)OrbitControl.js擴展(zhan)(zhan)庫(ku)作(zuo)(zuo)(zuo)(zuo)(zuo)(zuo)為(wei)(wei)軌(gui)道控(kong)制(zhi)(zhi)器控(kong)制(zhi)(zhi)房間(jian)(jian)(jian)旋轉操(cao)(cao)作(zuo)(zuo)(zuo)(zuo)(zuo)(zuo)。tween.js動(dong)(dong)畫(hua)庫(ku)實(shi)(shi)(shi)現(xian)3D房間(jian)(jian)(jian)模(mo)型(xing)點(dian)擊到(dao)交(jiao)(jiao)(jiao)(jiao)(jiao)互(hu)組(zu)(zu)(zu)(zu)件(jian)(jian)(jian)(jian)的(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)動(dong)(dong)畫(hua)平滑移動(dong)(dong)。3.3.3工(gong)(gong)(gong)(gong)作(zuo)(zuo)(zuo)(zuo)(zuo)(zuo)室(shi)(shi)(shi)教(jiao)(jiao)(jiao)(jiao)學(xue)(xue)(xue)(xue)(xue)(xue)組(zu)(zu)(zu)(zu)件(jian)(jian)(jian)(jian)實(shi)(shi)(shi)現(xian)（1）教(jiao)(jiao)(jiao)(jiao)學(xue)(xue)(xue)(xue)(xue)(xue)組(zu)(zu)(zu)(zu)件(jian)(jian)(jian)(jian)概要。組(zu)(zu)(zu)(zu)件(jian)(jian)(jian)(jian)分(fen)(fen)為(wei)(wei)任(ren)(ren)(ren)(ren)務(wu)(wu)(wu)(wu)(wu)(wu)NPC對(dui)話(hua)組(zu)(zu)(zu)(zu)件(jian)(jian)(jian)(jian)、任(ren)(ren)(ren)(ren)務(wu)(wu)(wu)(wu)(wu)(wu)布置(zhi)接(jie)受提(ti)交(jiao)(jiao)(jiao)(jiao)(jiao)組(zu)(zu)(zu)(zu)件(jian)(jian)(jian)(jian)、書架(jia)視(shi)(shi)頻(pin)播放(fang)組(zu)(zu)(zu)(zu)件(jian)(jian)(jian)(jian)、書桌練(lian)(lian)(lian)習(xi)(xi)(xi)(xi)(xi)(xi)題(ti)(ti)組(zu)(zu)(zu)(zu)件(jian)(jian)(jian)(jian)（練(lian)(lian)(lian)習(xi)(xi)(xi)(xi)(xi)(xi)臺(tai)）、顯示(shi)(shi)屏(ping)(ping)組(zu)(zu)(zu)(zu)件(jian)(jian)(jian)(jian)。NPC組(zu)(zu)(zu)(zu)件(jian)(jian)(jian)(jian)實(shi)(shi)(shi)現(xian)了(le)NPC對(dui)話(hua)、任(ren)(ren)(ren)(ren)務(wu)(wu)(wu)(wu)(wu)(wu)提(ti)交(jiao)(jiao)(jiao)(jiao)(jiao)接(jie)收(shou)(shou)(shou)、任(ren)(ren)(ren)(ren)務(wu)(wu)(wu)(wu)(wu)(wu)接(jie)收(shou)(shou)(shou)后(hou)的(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)任(ren)(ren)(ren)(ren)務(wu)(wu)(wu)(wu)(wu)(wu)詳(xiang)(xiang)情(qing)描述以(yi)(yi)及(ji)任(ren)(ren)(ren)(ren)務(wu)(wu)(wu)(wu)(wu)(wu)清(qing)(qing)(qing)單(dan)(dan)(dan)的(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)操(cao)(cao)作(zuo)(zuo)(zuo)(zuo)(zuo)(zuo)。書架(jia)視(shi)(shi)頻(pin)播放(fang)組(zu)(zu)(zu)(zu)件(jian)(jian)(jian)(jian)實(shi)(shi)(shi)現(xian)了(le)教(jiao)(jiao)(jiao)(jiao)學(xue)(xue)(xue)(xue)(xue)(xue)視(shi)(shi)頻(pin)的(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)存儲、任(ren)(ren)(ren)(ren)務(wu)(wu)(wu)(wu)(wu)(wu)視(shi)(shi)頻(pin)播放(fang)記錄(lu)的(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)操(cao)(cao)作(zuo)(zuo)(zuo)(zuo)(zuo)(zuo)。書桌練(lian)(lian)(lian)習(xi)(xi)(xi)(xi)(xi)(xi)臺(tai)組(zu)(zu)(zu)(zu)件(jian)(jian)(jian)(jian)內(nei)(nei)包含(han)三個(ge)(ge)(ge)子(zi)組(zu)(zu)(zu)(zu)件(jian)(jian)(jian)(jian)，分(fen)(fen)別(bie)為(wei)(wei)：題(ti)(ti)庫(ku)，學(xue)(xue)(xue)(xue)(xue)(xue)生(sheng)(sheng)可一(yi)次性查閱該(gai)工(gong)(gong)(gong)(gong)作(zuo)(zuo)(zuo)(zuo)(zuo)(zuo)室(shi)(shi)(shi)的(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)所(suo)(suo)(suo)有(you)練(lian)(lian)(lian)習(xi)(xi)(xi)(xi)(xi)(xi)題(ti)(ti)信(xin)(xin)息(xi)(xi)并(bing)(bing)且每(mei)份練(lian)(lian)(lian)習(xi)(xi)(xi)(xi)(xi)(xi)題(ti)(ti)提(ti)交(jiao)(jiao)(jiao)(jiao)(jiao)后(hou)都給予學(xue)(xue)(xue)(xue)(xue)(xue)生(sheng)(sheng)實(shi)(shi)(shi)時(shi)的(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)題(ti)(ti)目正確率反(fan)饋；未完成(cheng)(cheng)(cheng)任(ren)(ren)(ren)(ren)務(wu)(wu)(wu)(wu)(wu)(wu)習(xi)(xi)(xi)(xi)(xi)(xi)題(ti)(ti)，學(xue)(xue)(xue)(xue)(xue)(xue)生(sheng)(sheng)的(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)任(ren)(ren)(ren)(ren)務(wu)(wu)(wu)(wu)(wu)(wu)習(xi)(xi)(xi)(xi)(xi)(xi)題(ti)(ti)如(ru)未完成(cheng)(cheng)(cheng)將呈現(xian)于(yu)該(gai)子(zi)組(zu)(zu)(zu)(zu)件(jian)(jian)(jian)(jian)中(zhong)(zhong)；已完成(cheng)(cheng)(cheng)習(xi)(xi)(xi)(xi)(xi)(xi)題(ti)(ti)，記錄(lu)學(xue)(xue)(xue)(xue)(xue)(xue)生(sheng)(sheng)的(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)完成(cheng)(cheng)(cheng)習(xi)(xi)(xi)(xi)(xi)(xi)題(ti)(ti)，利于(yu)學(xue)(xue)(xue)(xue)(xue)(xue)生(sheng)(sheng)查閱和(he)后(hou)續(xu)教(jiao)(jiao)(jiao)(jiao)學(xue)(xue)(xue)(xue)(xue)(xue)評定。顯示(shi)(shi)屏(ping)(ping)組(zu)(zu)(zu)(zu)件(jian)(jian)(jian)(jian)包含(han)四大顯示(shi)(shi)模(mo)塊(kuai)：用(yong)(yong)(yong)戶的(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)信(xin)(xin)息(xi)(xi)，示(shi)(shi)例用(yong)(yong)(yong)戶為(wei)(wei)學(xue)(xue)(xue)(xue)(xue)(xue)生(sheng)(sheng)用(yong)(yong)(yong)戶信(xin)(xin)息(xi)(xi)；echarts餅(bing)圖(tu)，學(xue)(xue)(xue)(xue)(xue)(xue)生(sheng)(sheng)的(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)課(ke)(ke)程(cheng)完成(cheng)(cheng)(cheng)情(qing)況圖(tu)；任(ren)(ren)(ren)(ren)務(wu)(wu)(wu)(wu)(wu)(wu)清(qing)(qing)(qing)單(dan)(dan)(dan)列(lie)表(biao)，學(xue)(xue)(xue)(xue)(xue)(xue)生(sheng)(sheng)不僅可以(yi)(yi)在(zai)NPC導(dao)師那了(le)解自(zi)己的(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)任(ren)(ren)(ren)(ren)務(wu)(wu)(wu)(wu)(wu)(wu)清(qing)(qing)(qing)單(dan)(dan)(dan)，也可以(yi)(yi)在(zai)屏(ping)(ping)幕(mu)上實(shi)(shi)(shi)時(shi)關(guan)(guan)注自(zi)己的(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)清(qing)(qing)(qing)單(dan)(dan)(dan)需求；任(ren)(ren)(ren)(ren)務(wu)(wu)(wu)(wu)(wu)(wu)階梯，顯示(shi)(shi)學(xue)(xue)(xue)(xue)(xue)(xue)生(sheng)(sheng)當(dang)前的(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)課(ke)(ke)程(cheng)完成(cheng)(cheng)(cheng)度。（2）教(jiao)(jiao)(jiao)(jiao)學(xue)(xue)(xue)(xue)(xue)(xue)組(zu)(zu)(zu)(zu)件(jian)(jian)(jian)(jian)實(shi)(shi)(shi)現(xian)。使用(yong)(yong)(yong)vue文(wen)件(jian)(jian)(jian)(jian)存放(fang)各組(zu)(zu)(zu)(zu)件(jian)(jian)(jian)(jian)信(xin)(xin)息(xi)(xi)。組(zu)(zu)(zu)(zu)件(jian)(jian)(jian)(jian)（Component）實(shi)(shi)(shi)現(xian)父(fu)組(zu)(zu)(zu)(zu)件(jian)(jian)(jian)(jian)中(zhong)(zhong)子(zi)組(zu)(zu)(zu)(zu)件(jian)(jian)(jian)(jian)的(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)切換(huan)，該(gai)元素(su)(su)(su)為(wei)(wei)vue中(zhong)(zhong)定義(yi)的(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)元素(su)(su)(su)。組(zu)(zu)(zu)(zu)件(jian)(jian)(jian)(jian)是Vue.js最(zui)(zui)強(qiang)大的(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)功能(neng)(neng)之一(yi)，可以(yi)(yi)擴展(zhan)(zhan)HTML元素(su)(su)(su)，封裝可以(yi)(yi)重(zhong)用(yong)(yong)(yong)的(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)代(dai)碼(ma)。在(zai)較高層面上，組(zu)(zu)(zu)(zu)件(jian)(jian)(jian)(jian)是自(zi)定義(yi)元素(su)(su)(su)，Vue.js的(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)編譯(yi)(yi)器為(wei)(wei)它添(tian)加(jia)特(te)殊功能(neng)(neng)。在(zai)有(you)些(xie)情(qing)況下，組(zu)(zu)(zu)(zu)件(jian)(jian)(jian)(jian)也可以(yi)(yi)表(biao)現(xian)為(wei)(wei)用(yong)(yong)(yong)js特(te)性進行(xing)了(le)擴展(zhan)(zhan)的(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)原生(sheng)(sheng)HTML元素(su)(su)(su)。并(bing)(bing)且以(yi)(yi)Element-UI作(zuo)(zuo)(zuo)(zuo)(zuo)(zuo)為(wei)(wei)頁面樣(yang)式庫(ku)，規范組(zu)(zu)(zu)(zu)件(jian)(jian)(jian)(jian)樣(yang)式的(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)統一(yi)，包括按鈕、文(wen)字、頁面框架(jia)等(deng)。使用(yong)(yong)(yong)props完成(cheng)(cheng)(cheng)父(fu)子(zi)組(zu)(zu)(zu)(zu)件(jian)(jian)(jian)(jian)傳值。在(zai)Vue中(zhong)(zhong)，父(fu)子(zi)組(zu)(zu)(zu)(zu)件(jian)(jian)(jian)(jian)的(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)關(guan)(guan)系可以(yi)(yi)總結為(wei)(wei)propsdown、eventsup。父(fu)組(zu)(zu)(zu)(zu)件(jian)(jian)(jian)(jian)通過props向下傳遞數據(ju)給子(zi)組(zu)(zu)(zu)(zu)件(jian)(jian)(jian)(jian)，子(zi)組(zu)(zu)(zu)(zu)件(jian)(jian)(jian)(jian)通過events給父(fu)組(zu)(zu)(zu)(zu)件(jian)(jian)(jian)(jian)發(fa)送消息(xi)(xi)。最(zui)(zui)后(hou)使用(yong)(yong)(yong)CSS3DObject實(shi)(shi)(shi)體化教(jiao)(jiao)(jiao)(jiao)學(xue)(xue)(xue)(xue)(xue)(xue)組(zu)(zu)(zu)(zu)件(jian)(jian)(jian)(jian)頁面。CSS3dObject對(dui)象可以(yi)(yi)使用(yong)(yong)(yong)戶像操(cao)(cao)作(zuo)(zuo)(zuo)(zuo)(zuo)(zuo)Three.js對(dui)象那樣(yang)來操(cao)(cao)作(zuo)(zuo)(zuo)(zuo)(zuo)(zuo)dom元素(su)(su)(su)，實(shi)(shi)(shi)現(xian)css+div的(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)3d效(xiao)(xiao)果(guo)。實(shi)(shi)(shi)際上最(zui)(zui)終效(xiao)(xiao)果(guo)就是把Three.js的(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)參數轉化為(wei)(wei)css的(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)matrix。用(yong)(yong)(yong)CSS3DRenderer渲(xuan)染(ran)(ran)器渲(xuan)染(ran)(ran)教(jiao)(jiao)(jiao)(jiao)學(xue)(xue)(xue)(xue)(xue)(xue)組(zu)(zu)(zu)(zu)件(jian)(jian)(jian)(jian)，使得3D工(gong)(gong)(gong)(gong)作(zuo)(zuo)(zuo)(zuo)(zuo)(zuo)室(shi)(shi)(shi)模(mo)型(xing)和(he)2D組(zu)(zu)(zu)(zu)件(jian)(jian)(jian)(jian)元素(su)(su)(su)教(jiao)(jiao)(jiao)(jiao)學(xue)(xue)(xue)(xue)(xue)(xue)組(zu)(zu)(zu)(zu)件(jian)(jian)(jian)(jian)可以(yi)(yi)顯示(shi)(shi)在(zai)同(tong)(tong)(tong)一(yi)個(ge)(ge)(ge)頁面上。設置(zhi)工(gong)(gong)(gong)(gong)作(zuo)(zuo)(zuo)(zuo)(zuo)(zuo)室(shi)(shi)(shi)渲(xuan)染(ran)(ran)器（WebGLRenderer）的(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)透(tou)明度（alpha:true）交(jiao)(jiao)(jiao)(jiao)(jiao)互(hu)組(zu)(zu)(zu)(zu)件(jian)(jian)(jian)(jian)不被背景覆(fu)蓋。設置(zhi)3D教(jiao)(jiao)(jiao)(jiao)學(xue)(xue)(xue)(xue)(xue)(xue)道具(ju)模(mo)型(xing)的(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)點(dian)擊事件(jian)(jian)(jian)(jian)更換(huan)顯示(shi)(shi)組(zu)(zu)(zu)(zu)件(jian)(jian)(jian)(jian)：控(kong)制(zhi)(zhi)渲(xuan)染(ran)(ran)器的(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)圖(tu)層覆(fu)蓋順(shun)序（z-index）來變換(huan)控(kong)制(zhi)(zhi)器當(dang)前所(suo)(suo)(suo)控(kong)制(zhi)(zhi)的(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)渲(xuan)染(ran)(ran)器。控(kong)制(zhi)(zhi)組(zu)(zu)(zu)(zu)件(jian)(jian)(jian)(jian)的(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)visible屬性更改是否(fou)可見(jian)，以(yi)(yi)達到(dao)點(dian)擊跳出組(zu)(zu)(zu)(zu)件(jian)(jian)(jian)(jian)頁面的(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)效(xiao)(xiao)果(guo)。（3）交(jiao)(jiao)(jiao)(jiao)(jiao)互(hu)流程(cheng)。其人(ren)(ren)機交(jiao)(jiao)(jiao)(jiao)(jiao)互(hu)流程(cheng)如(ru)圖(tu)4所(suo)(suo)(suo)示(shi)(shi)。以(yi)(yi)Java課(ke)(ke)程(cheng)內(nei)(nei)容(rong)教(jiao)(jiao)(jiao)(jiao)學(xue)(xue)(xue)(xue)(xue)(xue)為(wei)(wei)例，課(ke)(ke)程(cheng)分(fen)(fen)為(wei)(wei)五個(ge)(ge)(ge)階段性任(ren)(ren)(ren)(ren)務(wu)(wu)(wu)(wu)(wu)(wu)：代(dai)碼(ma)基礎(chu)、JavaWeb、JavaEE、微服務(wu)(wu)(wu)(wu)(wu)(wu)入(ru)門、開(kai)發(fa)與維護。每(mei)個(ge)(ge)(ge)階段性任(ren)(ren)(ren)(ren)務(wu)(wu)(wu)(wu)(wu)(wu)劃分(fen)(fen)為(wei)(wei)若干(gan)個(ge)(ge)(ge)子(zi)任(ren)(ren)(ren)(ren)務(wu)(wu)(wu)(wu)(wu)(wu)，每(mei)個(ge)(ge)(ge)子(zi)任(ren)(ren)(ren)(ren)務(wu)(wu)(wu)(wu)(wu)(wu)清(qing)(qing)(qing)單(dan)(dan)(dan)包含(han)若干(gan)個(ge)(ge)(ge)任(ren)(ren)(ren)(ren)務(wu)(wu)(wu)(wu)(wu)(wu)視(shi)(shi)頻(pin)，每(mei)個(ge)(ge)(ge)任(ren)(ren)(ren)(ren)務(wu)(wu)(wu)(wu)(wu)(wu)視(shi)(shi)頻(pin)對(dui)應(ying)(ying)相應(ying)(ying)的(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)任(ren)(ren)(ren)(ren)務(wu)(wu)(wu)(wu)(wu)(wu)練(lian)(lian)(lian)習(xi)(xi)(xi)(xi)(xi)(xi)題(ti)(ti)。組(zu)(zu)(zu)(zu)件(jian)(jian)(jian)(jian)間(jian)(jian)(jian)交(jiao)(jiao)(jiao)(jiao)(jiao)互(hu)流程(cheng)模(mo)擬(ni)真實(shi)(shi)(shi)學(xue)(xue)(xue)(xue)(xue)(xue)習(xi)(xi)(xi)(xi)(xi)(xi)流程(cheng)，從開(kai)始(shi)接(jie)收(shou)(shou)(shou)任(ren)(ren)(ren)(ren)務(wu)(wu)(wu)(wu)(wu)(wu)觸發(fa)NPC對(dui)話(hua)組(zu)(zu)(zu)(zu)件(jian)(jian)(jian)(jian)以(yi)(yi)及(ji)任(ren)(ren)(ren)(ren)務(wu)(wu)(wu)(wu)(wu)(wu)接(jie)收(shou)(shou)(shou)組(zu)(zu)(zu)(zu)件(jian)(jian)(jian)(jian)。其中(zhong)(zhong)任(ren)(ren)(ren)(ren)務(wu)(wu)(wu)(wu)(wu)(wu)接(jie)收(shou)(shou)(shou)組(zu)(zu)(zu)(zu)件(jian)(jian)(jian)(jian)有(you)詳(xiang)(xiang)細的(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)任(ren)(ren)(ren)(ren)務(wu)(wu)(wu)(wu)(wu)(wu)描述。任(ren)(ren)(ren)(ren)務(wu)(wu)(wu)(wu)(wu)(wu)描述包含(han)5大要素(su)(su)(su)：場(chang)(chang)(chang)景、期望、工(gong)(gong)(gong)(gong)具(ju)、可驗證、技(ji)能(neng)(neng)。任(ren)(ren)(ren)(ren)務(wu)(wu)(wu)(wu)(wu)(wu)清(qing)(qing)(qing)單(dan)(dan)(dan)為(wei)(wei)任(ren)(ren)(ren)(ren)務(wu)(wu)(wu)(wu)(wu)(wu)描述的(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)輔(fu)助(zhu)列(lie)表(biao)，詳(xiang)(xiang)細表(biao)明了(le)任(ren)(ren)(ren)(ren)務(wu)(wu)(wu)(wu)(wu)(wu)完成(cheng)(cheng)(cheng)所(suo)(suo)(suo)需要的(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)內(nei)(nei)容(rong)項。任(ren)(ren)(ren)(ren)務(wu)(wu)(wu)(wu)(wu)(wu)清(qing)(qing)(qing)單(dan)(dan)(dan)包括：任(ren)(ren)(ren)(ren)務(wu)(wu)(wu)(wu)(wu)(wu)視(shi)(shi)頻(pin)、視(shi)(shi)頻(pin)知識點(dian)習(xi)(xi)(xi)(xi)(xi)(xi)題(ti)(ti)。學(xue)(xue)(xue)(xue)(xue)(xue)生(sheng)(sheng)根據(ju)任(ren)(ren)(ren)(ren)務(wu)(wu)(wu)(wu)(wu)(wu)清(qing)(qing)(qing)單(dan)(dan)(dan)所(suo)(suo)(suo)列(lie)的(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)內(nei)(nei)容(rong)完成(cheng)(cheng)(cheng)相應(ying)(ying)的(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)視(shi)(shi)頻(pin)觀(guan)看和(he)習(xi)(xi)(xi)(xi)(xi)(xi)題(ti)(ti)練(lian)(lian)(lian)習(xi)(xi)(xi)(xi)(xi)(xi)，即可提(ti)交(jiao)(jiao)(jiao)(jiao)(jiao)答(da)案(an)，如(ru)若沒(mei)有(you)完成(cheng)(cheng)(cheng)，NPC導(dao)師將不會進行(xing)學(xue)(xue)(xue)(xue)(xue)(xue)生(sheng)(sheng)的(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)(de)下一(yi)個(ge)(ge)(ge)任(ren)(ren)(ren)(ren)務(wu)(wu)(wu)(wu)(wu)(wu)進程(cheng)。

4結語

該平臺擯棄了(le)傳(chuan)統的(de)(de)在(zai)(zai)(zai)線(xian)學(xue)(xue)習(xi)(xi)教育平臺的(de)(de)教學(xue)(xue)模式，利(li)用(yong)Web3D虛擬技術增加(jia)對知(zhi)識應(ying)用(yong)崗位(wei)的(de)(de)可視化(hua)、體驗化(hua)過程，以(yi)此加(jia)強(qiang)學(xue)(xue)習(xi)(xi)者在(zai)(zai)(zai)線(xian)學(xue)(xue)習(xi)(xi)效(xiao)果和(he)(he)改善其(qi)在(zai)(zai)(zai)線(xian)學(xue)(xue)習(xi)(xi)過程。它使(shi)得學(xue)(xue)習(xi)(xi)者的(de)(de)學(xue)(xue)習(xi)(xi)目標虛擬可視化(hua)、知(zhi)識結(jie)構易讀易記易用(yong)化(hua)，使(shi)得學(xue)(xue)習(xi)(xi)過程更(geng)(geng)(geng)加(jia)趣味化(hua)。合(he)理(li)的(de)(de)數(shu)(shu)據評測標準(zhun)，動態、形(xing)象的(de)(de)數(shu)(shu)據變化(hua)趨勢(shi)，不(bu)僅給用(yong)戶更(geng)(geng)(geng)直觀、更(geng)(geng)(geng)可靠(kao)的(de)(de)感覺，更(geng)(geng)(geng)使(shi)數(shu)(shu)據結(jie)果在(zai)(zai)(zai)用(yong)戶分析自身學(xue)(xue)習(xi)(xi)過程時起到(dao)更(geng)(geng)(geng)可靠(kao)的(de)(de)支撐作(zuo)用(yong)，從而提高用(yong)戶的(de)(de)效(xiao)率和(he)(he)準(zhun)確性，并(bing)為(wei)用(yong)戶的(de)(de)學(xue)(xue)習(xi)(xi)提供很好的(de)(de)參考價(jia)值。

參考文獻

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

[2]周渝.網絡學習平臺在(zai)外語聽說類課(ke)程中(zhong)的應用(yong):優勢與不足.北方文學,2017(36):145

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

[4]陳杰,何小海,卿粼波,張琪,羅彬彬.基于Canvas的巖性符號(hao)管理系統(tong)的設計(ji)與實(shi)現(xian).智能計(ji)算機與應用(yong),2021,11(10):118-122,130

[5]李(li)達敕.Three.js架構下(xia)的(de)WebGL技(ji)術在網頁圖形中的(de)應用(yong).內蒙古農業大學(xue)學(xue)報(bao)(自(zi)然科學(xue)版),2021,42(02):99-103

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