基于Three.js庫的雙模界面在交互式Web3D中的應用

文/安一飛

1　前言

先進的3D圖形越來越多地用于各種領域的網絡應用，如手術培訓和博物館展覽。 與此同時，Web技術的創新（例如HTML5和WebGL）允許將高級3D圖形直接集成到網頁中，而不需額外的插件。雖然，現代圖形硬件的可用性越來越高，但目前仍沒有標準的方法來有效地將傳統的2D網頁內容（例如文本和圖像）與交互式3D環境相結合。

通常，3D應用程序專注于圖形，沉浸式和交互性，而不是傳統的Web任務（如定位和查看信息）；3D圖形提供更逼真和更豐富的用戶體驗；但是，3D環境往往需要用戶借助一個視角與相關內容進行交互，并且通常需要用戶導航到某個位置才能檢索信息，從而降低了用戶完成常見Web任務的能力（如檢索文本信息）。在本文中，我們采用了一個WebGL 3D圖形JavaScript庫——Three.js，給出了一個雙模式方法的原型實現，用于在交互式3D環境中進行信息傳播的接口設計，通過創建web交互式應用程序，允許用戶在2D和3D用戶界面之間瞬間切換。與單獨的超文本或者3D模式相比，雙模式用戶界面具有總體任務性能最佳的優勢，且在實踐上，美學上更受用戶青睞。

2　系統描述

原型系統以博物館形式實施應用。該應用程序允許用戶探索博物館參觀者的活動，以及可能在這個博物館中找到的陳列品。原型系統通過Three.js JavaScript庫使用HTML5，CSS3，JavaScript和WebGL實現。創建了三個應用程序，即“2D網站”，它是一個“平面”網頁，其中包含參觀者對象的3D呈現。第二個應用程序是一個使用Three.js實現的“3D網站”。它包含一個3D對象，用戶可以探索特定物體并與之互動。當用戶在對象附近時，呈現2D文本信息。最后，實現了將“2D網站”和“3D網站”組合在一起的“雙模式網站”，使用戶能夠通過分別按下鍵盤上的“2”和“3”鍵在兩個網站之間切換。雙模式網站具有模式之間無縫轉換的附加功能。

3　測試方法

原型測試側重于測量使用三個應用程序來檢索信息的速度，以評估用戶界面的有效性。在2D模式中，參與者需要使用標準超文本和鼠標點擊交互來檢索答案。在3D界面中，參與者必須導航3D環境才能從信息板上檢索信息。在雙模式下，用戶可以在任何時候在用戶界面之間切換;然而，“雙模式”中的問題鼓勵用戶回到3D模式，以避免它們停留在2D模式。每個問題都是在用戶在閱讀問題后與應用程序進行交互的那一刻開始計時的，計時器在參與者完成了答案寫作的那一刻就停止了。一旦速度測試完成，參與者被要求填寫一份調查問卷，用于衡量他們對每個應用程序的滿意程度，以及他們對李克特量表上一系列關于用戶界面，美學，表現，易用性，獲取信息的快捷程度和切換的簡易性的認可程度。

為了測試原型，我們招募了11名參與者。在測試之前，對每位參與者都被給予了實驗的簡要說明，同意書和一份簡短的預先研究問卷，以確定參與者的資料。在測試后，參與者被給予研究后調查問卷。調查問卷詢問每位參與者對于與用戶界面，獲得信息的難易程度，美觀性以及網站性能表現的滿意程度。評分計算方法為：“非常不滿意”評分為1，“不滿意”評分為2，“中性”評分為3，“滿意”評分為4，對于“非常滿意”評分為5。

4　測試結果

原型測試的結果表明，2D網站獲得了用戶界面的最高評價，雙模網站只降低了一個點。 信息的易用性在雙模網站上被評為最高，而2D網站緊隨其后。3D網站被認為是最美觀的，2D網站被認為是最好的表現。 這些結果將為研究和開發過程的進展提供信息。很明顯，2D和雙模網站在每次測試中都很接近，以及對它們提供的反饋，并且很明顯，3D網站除了一個區域外都缺乏，獲得的滿意度較低，以及較低的測試速度。 這些測試結果說明，雙模式應用比單獨的2D或3D接口更直觀和更有效。

5　結論

在與3D虛擬環境結合使用時，本文提出了雙模式用戶界面，以增強用戶與網絡內容的交互。 這項先導性研究表明了3D虛擬環境的雙模接口的前景。未來的工作將通過將3D視圖與2D視圖更密切地結合，并在3D內容中擴展2D注釋來改進雙模式界面。 我們還將擴大研究范圍從而充分挖掘雙模接口的優勢。