基于Web3D 技術的三維可視化學習資源建設研究

紀 娟，黎 恩，楊 娟

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

0 引言

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

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

1 Web3D 技術概述

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

本文使用Three.js 構建基于Web3D 技術的三維可視化學習資源?；赪eb3D 技術的實現主要包含兩大部分：建模工具和Three.js 框架。

1.1 建模工具

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

1.1.1 游戲及影視3D 模型

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

1.1.2 室內設計及建筑3D 模型

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

1.1.3 數字雕刻及繪畫3D 模型

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

1.1.4 動畫3D 模型

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

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

1.2 Three.js 框架

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

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

2 三維可視化學習資源設計

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

2.1 梳理理論知識，制作多元化學習資源

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

2.2 關聯理論知識，研究三維模型

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

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

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

2.3 基于三維空間集成多元化學習資源

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

3 三維可視化學習資源的實現

基于Three.js 框架構建三維可視化學習資源的關鍵是實現三維空間場景以及在此場景中集成視頻資源、圖片資源和三維模型。圖2 是基于Web3D 技術三維可視化學習資源實現的效果圖。

3.1 三維空間的可視化實現

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

3.2 CPU 三維模型的實現

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

3.3 集成多元化學習資源的實現

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

4 結語

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