系統開發

本章節對系統開發環境建置、3D 模型與動畫建置與擴增實境輔助系統修改分別 描述如下。

圖 4-10 為本系統開發軟體間之關係圖。本研究利用 Unity 作為系統開發環境，

並搭配 Vuforia 擴增實境套件來製作擴增實境輔助學習系統，模型與動畫利用 Autodesk 公司的 3ds Max 來製作，一切的控制與動作皆利用 JavaScript 來撰寫，並完 成兩個主要的學習活動。以下將分別對各軟體進行介紹與操作介面的呈現。

圖 4-10 軟體開發關係圖 壹、系統開發環境

本研究是在 Window7 作業系統環境下建置並開發擴增實境輔助學習系統，本系 統之擴增實境技術使用 Qualcomm 公司的 Vuforia 擴增實境套件工具，並結合 3D 遊 戲編輯引擎 Unity 軟體來設計開發本研究之擴增實境輔助系統。Unity 軟體的開發靈 活性高，能提供教材設計者自行建置系統場景（如圖 4-11），另外還有物件編輯介面 以及程式碼編輯介面，完整地提供了系統設計所需之功能，並結合 Vuforia 之擴增實 境套件來開發擴增實境輔助學習系統。此外，設計者除了能利用系統內建的擴增實 境標記來當作辨識外，更允許設計者上傳自行設計之圖案當作辨識標記，創造出更 多元且更適合學習者操作之擴增實境世界。

圖 4-11 Unity3D-場景開發介面

在「物件編輯介面」中可以對出現在場景中各個物件之屬性進行編輯，使用者 可以先選取所欲編輯之物件模型，接著在物件屬性區針對選取之物件進行細部之更 變，例如更改物件位置、顏色、大小等等，皆在此處編輯。另外素材與程式檔案區 包含一切系統之模型、材質和程式檔案，使用者亦能從中找出所欲新增之模型、動 畫，並將這些物件拖移到場景建置區加以設計系統，如圖 4-12 所示。

在「程式碼編輯介面」中，以 JavaScript 當作本系統之開發語言，並在程式撰寫 區塊編輯物件所需一切行為，例如控制物件動作、切換各模型物件之功能、展開圖 正確與錯誤的判斷等等，如圖 4-13 所示。

圖 4-13 Unity3D-程式碼編輯介面

貳、3D 模型與動畫建置

本系統之 3D 模型與動畫由 Autodesk 公司的 3ds Max 軟體所建置而成。3ds Max 是一套 3D 建模工具與動畫製作軟體，提供電影製作、遊戲製作與運動圖形等設計人 員製作 3D 模型或動畫工具。3ds Max 提供了完整的建模所需工具，包括模型製作、

動畫製作、材質著色等，讓設計者能自由編製所需物件。在「系統場景」中（如圖 4-14），提供給設計者自行建立所需模型與更改物件屬性及顏色等，並能在物件控制 區做調整。另外「動畫製作介面」（如圖 4-15），讓設計者製作所需動畫之功能與 設定時間。

在系統場景中，「物件與屬性區」讓設計者能自行製作所需物件模型，例如一 般帄面、立方體、柱體或椎體等等，皆能由此介面選取與製作，並對物件屬性進行 編輯，例如更改材質、色彩、高度或寬度等等。「物件與控制區」能調整所建立物 件之位置、旋轉或複製物件。

在動畫製作介面，提供了「動畫物件控制區」，讓設計者可以控制與編輯動畫 物件的摺合、移動等等。「動畫時間軸」讓設計者可以自行訂定動畫各物件動作之 時間長短或間隔。

圖 4-14 3ds Max 系統場景

圖 4-15 3ds 動畫製作介面

參、擴增實境輔助系統修改

圖 4-16 第一版修改前圖卡樣式

圖 4-17 第一版修改後圖卡樣式 (二)長方體與正方體學習活動（擴增實境顯示）

在長方體與正方體學習活動中，所呈現的模型為透視圖與骨架圖，並分成不同 的三個圖卡，如圖 4-18 與圖 4-19。經多位使用者建議與討論後，為增加系統操作的 方便性與多元性，首先增加立體圖模型，並將所有模型結合在兩張圖卡內，只需經 過按鈕點按並能呈現對應的 3D 模型，如圖 4-20 所示。另外，由於修改前之透視圖 並無透明的面，與骨架圖太相似，因此將透式圖模型修改成為具有透明的面，如圖 4-21 所示。其中模型的建置都是由 3ds Max 所建置，各立體圖皆建立頂點編號，並 將模型匯入到 Unity 3D 中，以建置虛擬物件。

圖 4-18 第一版修改前之透視圖模型

圖 4-19 第一版修改前之骨架圖模型

圖 4-20 第一版新增之立體圖模型

圖 4-21 第一版修改後之透視圖模型 (三)正立方體展開圖學習活動（圖卡操作）

在第一版正立方體展開圖學習活動修改前，為求方便辨識，將一張圖卡固定為 基準點（如圖 4-22，紅色圖卡為基準點），學習者僅能利用剩餘五張圖卡拼湊出展開 圖，且基準點不能移動，因為 Unity 之擴增實境功能必頇掃描到一個物件當作基準，

以呈現擴增實境效果。因此在第二個版本之教具板上方，新增一個辨識圖卡當作辨 識的基準，經掃描後呈現 15 塊感應區，讓學習者在感應區藉由自由創作與變化來拼 湊六張展開圖卡，如圖 4-23 所示。其中 15 塊區塊透過距離限制來達到正確對應，若 圖卡所擺放之位置超過設定之距離，則無法對應到該區塊；反之，若圖卡距離小於 限制，則將此圖卡視為有效之展開圖圖卡，當作展開圖的一個面。

圖 4-23 第一版修改後之圖卡操作 二、 第二版擴增實境輔助系統修改

經過第一版本的系統修改後，將系統再給予其他使用者操作使用，並與國小教 師討論尋求建議後，修改成第二個版本的擴增實境輔助系統。表 4-2 為第二版擴增實 境輔助系統修改類別，並逐一說明兩個學習活動之功能修改內容。

表 4-2 第二版擴增實境輔助系統修改類別

學習活動 修改項目 修改說明

長方體與正方體 模型編號 將長方體與正方體各頂點

編號修改成不重複之編號

正立方體展開圖 圖卡顏色 每個圖卡顏色的呈現由相

同顏色修改成不同顏色 組合動畫 新增展開圖摺合動畫

(一)長方體與正方體學習活動（模型編號）

研究者預先設計長方體和正方體為的頂點為相同編號（同為 A-H）。在與國小 數學教師討論的過程發現，一個空間中不會有重複的編號，因此將長方體頂點編號 修改成 I-P，如圖 4-24 所示。

圖 4-24 第二版修改後之模型編號 (二)正立方體展開圖學習活動（圖卡呈現顏色）

為了讓學習者能分辨各個面與正立方體立體圖的對應關係，將六塊圖卡從原先 顯示為黃色之效果，修改成六面皆顯示為不同顏色，如圖 4-25 所示。技術上將 15 個區塊的感應區預設不同顏色，只要將圖卡擺放在其中一個感應區中，即變成該區 塊之對應顏色。

圖 4-25 第二版修改後之圖卡顏色

(三)正立方體展開圖學習活動（組合動畫）

為了讓學習者能觀察正立方體展開圖的摺合過程，從原本擺放正確只顯示立體 圖，修改成擺放正確後呈現對應的摺合動畫，讓學習者藉此瞭解各正方體展開圖的 摺合過程，如圖 4-26 所示。動畫的製作利用 3ds Max 進行建置，將 11 種展開圖的組 合動畫一一建置，最後將動畫檔匯入 Unity 3D 以便於掃描時呈現對應之動畫。

圖 4-26 第二版修改後之展開圖摺合動畫 三、 第三版擴增實境輔助系統修改

經過第二版本的系統修改後，給予多數使用者完整操作整個活動流程，再次修 改成第三個版本的擴增實境輔助學習系統。表 4-3 為第二版擴增實境輔助系統修改類 別，並逐一說明該學習活動功能修改內容。

表 4-3 第三版擴增實境輔助系統修改類別

學習活動 修改項目 修改說明

正立方體展開圖

圖卡顯示

每個圖卡顏色的呈現由多 個顏色改成相同顏色不同 字母

圖卡操作 展開圖摺合動畫結束後，能 將圖卡拿起，自由觀看

(一)正立方體展開圖學習活動（圖卡顯示）

在第二版將圖卡顯示的顏色更改為顯示不同顏色，但經多數使用者測詴後發 現，因為顏色種類太多，較為複雜且難以分辨。因此第三版將圖卡呈現之顏色修改

為相同顏色但有不同英文字母的呈現方式，如圖 4-27 所示。使用者與國小教師也一 致認為，此種呈現方式較能讓學習者觀察展開圖摺合成立體圖後的對應關係。技術 上也是利用 15 個區塊之感應，呈現不同之圖片樣式。

圖 4-27 第三版修改後之圖卡呈現樣式 (二)正立方體展開圖學習活動（圖卡操作）

為了使正立方體摺合動畫結束後能與此立體圖進行觀察比較，讓學習者瞭解各 個展開圖的面與摺合成正立方體後之對應關係。系統第三版將最上方的辨識圖卡在 動畫結束後呈現該展開圖之立體圖形，方便學習者進行操弄與觀察，如圖 4-28 所示。

技術上將動畫之呈現以一次為限，動畫結束後即消失，並於辨識圖卡上顯示一塊完 整的正立方體。