基于Web3D 技術(shù)的三維可視化學(xué)習(xí)資源建設(shè)研究

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

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

0 引言

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

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

1 Web3D 技術(shù)概述

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

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

1.1 建模工具

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

1.1.1 游戲及影視3D 模型

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

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

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

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

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

1.1.4 動畫3D 模型

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

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

1.2 Three.js 框架

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4 結(jié)語

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