紀(jì) 娟，黎 恩，楊 娟

（1.四川開放大學(xué) 工程技術(shù)學(xué)院，成都610073；2.國(guó)家開放大學(xué) 教育信息管理與信息系統(tǒng)研究中心，北京 100039）

0 引言

自遠(yuǎn)程教育這一新型教育形式誕生以來(lái)，融合信息技術(shù)豐富學(xué)習(xí)資源，激發(fā)學(xué)習(xí)者學(xué)習(xí)興趣便是教育研究者們一直追求的目標(biāo)。隨著虛擬現(xiàn)實(shí)技術(shù)的快速發(fā)展，其逼真的交互式體驗(yàn)感[1]和沉浸式的體驗(yàn)效果，使這一技術(shù)在傳統(tǒng)行業(yè)里得到廣泛應(yīng)用。在“互聯(lián)網(wǎng)+教育”的時(shí)代背景下，虛擬現(xiàn)實(shí)技術(shù)與教育行業(yè)的深度融合為豐富學(xué)習(xí)資源，激發(fā)學(xué)習(xí)者興趣提供了新的思路。Web3D 在呈現(xiàn)知識(shí)信息方面優(yōu)勢(shì)明顯，能夠?yàn)榻虒W(xué)領(lǐng)域提供逼真的VR 學(xué)習(xí)資源和學(xué)習(xí)情境體驗(yàn)，達(dá)到鞏固和提升學(xué)生課后學(xué)習(xí)知識(shí)和掌握技能的效果。[2]因此，隨著瀏覽器性能的大幅度提升以及WebGL 技術(shù)的實(shí)現(xiàn)，未來(lái)融合Web3D 技術(shù)構(gòu)建在線學(xué)習(xí)資源具有廣闊的發(fā)展前景。

隨著瀏覽器技術(shù)的發(fā)展，HTML5 和WebGL技術(shù)逐步在主流瀏覽器中普及，基于Web 的三維可視化應(yīng)用越來(lái)越多。[3]目前，代表性的應(yīng)用有騰訊云服務(wù)官網(wǎng)、貝殼網(wǎng)、智慧城市和智慧工廠等。騰訊云服務(wù)官網(wǎng)是Web3D 技術(shù)在企業(yè)官網(wǎng)中的應(yīng)用，實(shí)現(xiàn)了企業(yè)網(wǎng)站的三維呈現(xiàn)，使得企業(yè)形象更加立體化和直觀化；貝殼網(wǎng)是Web3D 技術(shù)在服務(wù)行業(yè)中的應(yīng)用，實(shí)現(xiàn)了房屋內(nèi)部物理空間的三維立體化展示，推進(jìn)了服務(wù)行業(yè)的數(shù)字化和智能化；智慧城市和智慧工廠是Web3D 技術(shù)在數(shù)字城市建設(shè)中的應(yīng)用，實(shí)現(xiàn)了真實(shí)物理城市在虛擬空間中數(shù)字化和三維立體化的展示，為科學(xué)建設(shè)數(shù)字中國(guó)提供了有效的實(shí)踐路徑。隨著Web 三維可視化在各行各業(yè)中的廣泛應(yīng)用，未來(lái)在線教育學(xué)習(xí)資源的三維可視化是必然趨勢(shì)。

1 Web3D 技術(shù)概述

眾所周知，傳統(tǒng)的虛擬現(xiàn)實(shí)技術(shù)存在著一些弊端，如嵌入特殊硬件設(shè)備輔助實(shí)現(xiàn)虛擬現(xiàn)實(shí)、跨平臺(tái)應(yīng)用時(shí)需要安裝特定的插件、運(yùn)行加載三維模型時(shí)速度慢等問(wèn)題。以往的技術(shù)在瀏覽器中進(jìn)行3D 展示是一件非常困難的事情，由于3D 圖形的渲染計(jì)算量巨大，導(dǎo)致顯示非常緩慢，直到提供硬件3D 加速渲染的繪圖標(biāo)準(zhǔn)WebGL 的誕生。[4]WebGL 技術(shù)的誕生和發(fā)展完美地解決了傳統(tǒng)虛擬現(xiàn)實(shí)技術(shù)存在的問(wèn)題。Web3D 技術(shù)是基于Web 的虛擬現(xiàn)實(shí)技術(shù)，它將現(xiàn)實(shí)世界中的產(chǎn)品、建筑、城市和場(chǎng)景等在Web 網(wǎng)頁(yè)中實(shí)現(xiàn)三維可視化并能進(jìn)行人機(jī)實(shí)時(shí)交互。因此，基于Web3D 技術(shù)的三維可視化和交互，本質(zhì)上是WebGL 技術(shù)的深入應(yīng)用。WebGL 技術(shù)需要積累大量的圖形學(xué)理論和數(shù)學(xué)理論，學(xué)習(xí)門檻高，一些基于WebGL 的開源框架被人們使用，如Three.js、Babylon.js、Scene.js 和PhiloGL 等。這些框架在WebGL 接口的基礎(chǔ)上進(jìn)行了封裝，具有功能強(qiáng)大的API，可以高效、輕松地完成三維可視化和交互。在上述框架中，Three.js框架是最受人們歡迎的。

本文使用Three.js 構(gòu)建基于Web3D 技術(shù)的三維可視化學(xué)習(xí)資源。基于Web3D 技術(shù)的實(shí)現(xiàn)主要包含兩大部分：建模工具和Three.js 框架。

1.1 建模工具

沉浸式和逼真的三維學(xué)習(xí)資源能夠極大地吸引學(xué)習(xí)者的學(xué)習(xí)興趣，提高了教學(xué)效果。學(xué)習(xí)資源的三維可視化離不開對(duì)教學(xué)資源的3D 建模。目前，3D 建模工具琳瑯滿目，比較主流的工具有3DS Max、Maya、Zbrush、Cinema 4D 和Blender 等。按照使用的應(yīng)用主題類型進(jìn)行分類，主流的3D 建模工具可以分為四種類型：游戲及影視3D 模型，室內(nèi)設(shè)計(jì)及建筑3D 模型，數(shù)字雕刻及繪畫3D 模型，動(dòng)畫3D 模型。

1.1.1 游戲及影視3D 模型

3DS Max、Maya 和Cinema 4D 在制作游戲和影視類的三維模型中比較有優(yōu)勢(shì)，制作效率高、渲染真實(shí)感強(qiáng)。3DS Max 學(xué)習(xí)門檻低，學(xué)習(xí)效率高，一般是初學(xué)者的首選3D 建模工具。Maya 是設(shè)計(jì)者夢(mèng)寐以求的3D 建模工具，可以渲染出電影的真實(shí)效果，是頂級(jí)設(shè)計(jì)師的制作工具。Cinema 4D 具有運(yùn)算速度快和渲染效果強(qiáng)的特性，一般用于制作影視大片中的部分場(chǎng)景。

1.1.2 室內(nèi)設(shè)計(jì)及建筑3D 模型

3DS Max 除了可以制作游戲和影視類的三維模型，還可以制作室內(nèi)設(shè)計(jì)和建筑類的三維模型。

1.1.3 數(shù)字雕刻及繪畫3D 模型

Zbrush 是一款數(shù)字雕刻和繪畫3D 建模工具，具有強(qiáng)大的功能和直觀的工作流程。Zbrush 顛覆了傳統(tǒng)的三維設(shè)計(jì)模式，以激發(fā)藝術(shù)家的創(chuàng)作熱情為目的，解放思想，自由發(fā)揮，尊重設(shè)計(jì)師的創(chuàng)作靈感。

1.1.4 動(dòng)畫3D 模型

Blender 是一款免費(fèi)開源的三維動(dòng)畫建模工具，內(nèi)置了綠屏摳像、攝像機(jī)反向跟蹤、遮罩處理和后期結(jié)點(diǎn)合成等高級(jí)三維動(dòng)畫解決方案，提供了從建模、動(dòng)畫、材質(zhì)、渲染到音視頻剪輯處理等一系列三維動(dòng)畫制作解決方案。

在選擇建模工具時(shí)，遵循一個(gè)基本原則，即選擇適合應(yīng)用主題的類型。教育資源以游戲或動(dòng)畫為應(yīng)用主題，3DS Max、Maya、Cinema 4D 和Blender適合構(gòu)建文本主題模型，由于Blender 建模工具的開源性，筆者選擇用Blender 構(gòu)建三維模型。

1.2 Three.js 框架

Three.js 是使用JavaScript 編寫的WebGL 第三方庫(kù)，是一款運(yùn)行在瀏覽器中的三維引擎，可以通過(guò)它創(chuàng)建各種三維場(chǎng)景。[5]Three.js 封裝了3D 圖像編程的常用操作，內(nèi)置了常用的對(duì)象和工具，功能強(qiáng)大，通過(guò)使用此框架中更加簡(jiǎn)單、直觀的接口可以方便快捷地完成3D 模型的三維可視化和交互。

Three.js 引擎對(duì)三維圖形渲染主要包括五個(gè)要素，即渲染器、場(chǎng)景、相機(jī)、光源、物體。[6]其中，場(chǎng)景、相機(jī)和渲染器是三維可視化的必要組件。Three.js 框架對(duì)3D 模型的三維可視化過(guò)程實(shí)質(zhì)上是模擬真實(shí)世界中的照相過(guò)程。因此，可以把基于Web 網(wǎng)頁(yè)的三維可視化過(guò)程歸納為三個(gè)步驟。第一步，在Web 網(wǎng)頁(yè)中搭建相機(jī)可以拍攝的三維場(chǎng)景，即建立網(wǎng)格模型和光照兩大對(duì)象；第二步，對(duì)虛擬相機(jī)進(jìn)行相關(guān)設(shè)置，包括相機(jī)的位置、視線方向和投影方式；第三步，通過(guò)渲染器完成拍照動(dòng)作，即將場(chǎng)景和相機(jī)對(duì)象作為渲染器對(duì)象投影到瀏覽器。

2 三維可視化學(xué)習(xí)資源設(shè)計(jì)

C 語(yǔ)言程序設(shè)計(jì)是計(jì)算機(jī)軟件專業(yè)的必修課程，該課程的在線教學(xué)資源還是以圖文、音頻、視頻等二維平面形式為主，資源展示方式單一、缺乏交互性和趣味性，學(xué)生學(xué)習(xí)課程的熱情和積極性不高，多數(shù)處于被動(dòng)學(xué)習(xí)的狀態(tài)。對(duì)于一些抽象的、枯燥的和難以理解的知識(shí)內(nèi)容，學(xué)生難以掌握。基于此，筆者選擇C 語(yǔ)言程序設(shè)計(jì)課程中的二進(jìn)制理論知識(shí)進(jìn)行三維可視化學(xué)習(xí)資源設(shè)計(jì)，探索構(gòu)建三維可視化學(xué)習(xí)資源建設(shè)路徑，提高學(xué)生學(xué)習(xí)課程的興趣。基于三維空間集成多元化學(xué)習(xí)資源設(shè)計(jì)思路如圖1 所示。

2.1 梳理理論知識(shí)，制作多元化學(xué)習(xí)資源

二進(jìn)制基礎(chǔ)理論在計(jì)算機(jī)專業(yè)中屬于多門課程交叉的知識(shí)內(nèi)容，傳統(tǒng)的二進(jìn)制基礎(chǔ)理論偏重于從數(shù)學(xué)學(xué)科內(nèi)容科學(xué)計(jì)數(shù)和運(yùn)算的角度去闡述，專業(yè)性強(qiáng)，知識(shí)結(jié)構(gòu)抽象，學(xué)生難以理解。此外，線上學(xué)習(xí)資源形式單一，面對(duì)這樣的學(xué)習(xí)內(nèi)容，學(xué)生主動(dòng)學(xué)習(xí)的積極性不高，缺乏學(xué)習(xí)興趣。為了解決這些問(wèn)題，需要重新梳理知識(shí)，在新的知識(shí)結(jié)構(gòu)的基礎(chǔ)上制作視頻資源、文字資源和圖片資源。通過(guò)構(gòu)建多維度的學(xué)習(xí)資源，形成多元化的課程資源庫(kù)，以期達(dá)到課程資源表現(xiàn)形式的多樣化、抽象知識(shí)具體化和生澀難懂的知識(shí)簡(jiǎn)單化。

2.2 關(guān)聯(lián)理論知識(shí)，研究三維模型

在梳理理論知識(shí)的過(guò)程中，筆者重點(diǎn)關(guān)注三維模型可視化的知識(shí)內(nèi)容，并研究可以建立三維模型的突破點(diǎn)。經(jīng)過(guò)分析，筆者以三維空間漫游教室模型、CPU 和晶體管3D 模型作為三維可視化學(xué)習(xí)資源的切入點(diǎn)。

構(gòu)建三維空間目的是為學(xué)生提供虛擬的在線學(xué)習(xí)教室，以聚焦學(xué)習(xí)者并營(yíng)造在線學(xué)習(xí)氛圍。在傳統(tǒng)的面授課堂教學(xué)中，物理教室是其中一個(gè)重要的組成部分，它為教師和學(xué)生提供面對(duì)面交流的物理空間，讓同處于一個(gè)物理空間的人們獲得歸屬感，同時(shí)縮短了人與人之間的距離。三維空間可以共享物理教室的大部分功能，除此之外，它還具有更多的優(yōu)勢(shì)。由于受到場(chǎng)地面積的限制，物理教室可容納的學(xué)生人數(shù)是有限的，而三維空間則沒(méi)有座位數(shù)量的限制，可以容納更多的學(xué)生；在學(xué)習(xí)氛圍和交流體驗(yàn)方面，物理教室的教育過(guò)程中必不可少地存在人際關(guān)系處理的問(wèn)題。而在三維空間中，學(xué)生之間的交流以及學(xué)生與教師之間的交流是平等的，學(xué)生可以投入大量的精力去學(xué)習(xí)，不需要過(guò)多的關(guān)注人際關(guān)系，一切以學(xué)習(xí)者為中心。

在教學(xué)內(nèi)容方面，融合計(jì)算機(jī)系統(tǒng)知識(shí)，從CPU 中的晶體管構(gòu)成解析二進(jìn)制理論實(shí)現(xiàn)生活中抽象信息的工作原理，探討計(jì)算機(jī)系統(tǒng)選擇二進(jìn)制實(shí)現(xiàn)文字、圖片、音頻和視頻等信息的原因?；诖耍P者選擇CPU 和晶體管3D 模型作為三維可視化學(xué)習(xí)資源的模型對(duì)象。通過(guò)直觀CPU 中晶體管的顯示狀態(tài)去理解二進(jìn)制的工作原理，使得抽象的知識(shí)具體化，生澀難懂的知識(shí)簡(jiǎn)單化。

2.3 基于三維空間集成多元化學(xué)習(xí)資源

視頻資源、圖片資源和文字資源以“一個(gè)中心四平面”的方式集成到三維空間中。以CPU 和晶體管3D 模型為一個(gè)中心，位于三維空間的中心點(diǎn)。以多元化學(xué)習(xí)資源為四平面，分別貼合于三維空間中的東、南、西、北四個(gè)平面上。

3 三維可視化學(xué)習(xí)資源的實(shí)現(xiàn)

基于Three.js 框架構(gòu)建三維可視化學(xué)習(xí)資源的關(guān)鍵是實(shí)現(xiàn)三維空間場(chǎng)景以及在此場(chǎng)景中集成視頻資源、圖片資源和三維模型。圖2 是基于Web3D 技術(shù)三維可視化學(xué)習(xí)資源實(shí)現(xiàn)的效果圖。

3.1 三維空間的可視化實(shí)現(xiàn)

三維空間的3D 模型由四面墻體和一塊地板組成，墻體的顏色選擇了白色，而地板的顏色選擇了灰色。地板和墻體是由基礎(chǔ)的長(zhǎng)方體幾何體構(gòu)成，不需要使用三維建模工具來(lái)創(chuàng)建這些幾何體，可以通過(guò)Three.js 框架中的三維幾何體對(duì)象實(shí)現(xiàn)。具體步驟為：第一步，使用三維幾何體BoxGeometry（）函數(shù)構(gòu)建地板和墻體實(shí)體；第二步，使用MeshLabmberMaterial（）函數(shù)設(shè)置墻體和地板的外觀。

3.2 CPU 三維模型的實(shí)現(xiàn)

CPU 三維模型的結(jié)構(gòu)復(fù)雜，為了實(shí)現(xiàn)CPU 模型的三維可視化，首先需要使用Blender 建模工具完成CPU 的復(fù)雜模型，形成CPU 的三維模型文件，包含.obj 和.mtl 文件。其中，.obj 文件是核心文件，用于三維可視化和交互，而.mtl 文件是CPU 三維模型的外觀基礎(chǔ)信息文件；然后，需要引入OBJLoader 插件和MTLLoader 插件，并通過(guò)外部加載模型文件的方式將CPU 三維模型文件引入到三維空間的場(chǎng)景中。在場(chǎng)景中，可以使用scale.set（）方法調(diào)整模型的大小使以適應(yīng)場(chǎng)景，并使用position.set（）方法設(shè)置模型在場(chǎng)景中的中心位置。

3.3 集成多元化學(xué)習(xí)資源的實(shí)現(xiàn)

視頻資源、PPT 資源和圖片資源是二維平面資源，將它們集成到三維空間中，構(gòu)成多元化的學(xué)習(xí)資源。為集成多元化學(xué)習(xí)資源，需要對(duì)不同類型的學(xué)習(xí)資源進(jìn)行本質(zhì)分析。視頻資源本質(zhì)上是由一幀一幀的圖片流組成，PPT 資源通過(guò)工具可以轉(zhuǎn)換成圖片資源。因此，集成三種類型的學(xué)習(xí)資源實(shí)質(zhì)上是實(shí)現(xiàn)圖片資源的三維可視化。在Three.js框架中，通過(guò)創(chuàng)建紋理貼圖對(duì)象實(shí)現(xiàn)圖片資源的三維可視化。與學(xué)習(xí)資源相關(guān)的紋理貼圖對(duì)象包含VideoTexture 和Texture。其中，VideoTexture 是加載視頻資源對(duì)象，而Texture 是加載圖片資源對(duì)象。具體實(shí)現(xiàn)步驟是：第一步，創(chuàng)建視頻對(duì)象video，設(shè)置視頻地址和播放參數(shù)；第二步，創(chuàng)建texture 紋理對(duì)象，在material 材質(zhì)對(duì)象中設(shè)置map 值為texture 紋理對(duì)象；第三步，創(chuàng)建長(zhǎng)方形geometry 幾何體對(duì)象；第四步，構(gòu)建網(wǎng)格模型，形成mesh 網(wǎng)格模型對(duì)象，并設(shè)置mesh 網(wǎng)格模型對(duì)象的位置；第五步，將mesh 網(wǎng)格模型對(duì)象添加到場(chǎng)景中。

4 結(jié)語(yǔ)

本文以C 語(yǔ)言程序設(shè)計(jì)課程為例，通過(guò)梳理二進(jìn)制理論知識(shí)，提出了學(xué)習(xí)資源的三維可視化設(shè)計(jì)思路，并按照該設(shè)計(jì)思路采用Web3D 技術(shù)實(shí)現(xiàn)學(xué)習(xí)資源三維可視化，旨在豐富學(xué)習(xí)資源的展示形式，使抽象的知識(shí)具體化，生澀難懂的知識(shí)簡(jiǎn)單化，從而提高學(xué)生學(xué)習(xí)興趣。隨著互聯(lián)網(wǎng)技術(shù)的快速發(fā)展以及Web3D 技術(shù)的廣泛應(yīng)用，傳統(tǒng)的二維平面網(wǎng)頁(yè)將逐漸升級(jí)為三維立體化網(wǎng)頁(yè)，融合新技術(shù)探索構(gòu)建三維可視化學(xué)習(xí)資源，為在線學(xué)習(xí)資源的改革和創(chuàng)新提供重要的參考。筆者設(shè)計(jì)的三維空間較為簡(jiǎn)單，未能呈現(xiàn)出豐富的虛擬學(xué)習(xí)場(chǎng)景，因此，在下一步的研究中，將使用建模工具構(gòu)建逼真的教室場(chǎng)景，讓學(xué)生能夠身臨其境地體驗(yàn)真實(shí)的上課場(chǎng)景，從而增強(qiáng)他們的歸屬感和參與感。