基于Three.js庫的雙模界面在交互式Web3D中的應(yīng)用

文/安一飛

1　前言

先進(jìn)的3D圖形越來越多地用于各種領(lǐng)域的網(wǎng)絡(luò)應(yīng)用，如手術(shù)培訓(xùn)和博物館展覽。 與此同時，Web技術(shù)的創(chuàng)新（例如HTML5和WebGL）允許將高級3D圖形直接集成到網(wǎng)頁中，而不需額外的插件。雖然，現(xiàn)代圖形硬件的可用性越來越高，但目前仍沒有標(biāo)準(zhǔn)的方法來有效地將傳統(tǒng)的2D網(wǎng)頁內(nèi)容（例如文本和圖像）與交互式3D環(huán)境相結(jié)合。

通常，3D應(yīng)用程序?qū)Ｗ⒂趫D形，沉浸式和交互性，而不是傳統(tǒng)的Web任務(wù)（如定位和查看信息）；3D圖形提供更逼真和更豐富的用戶體驗；但是，3D環(huán)境往往需要用戶借助一個視角與相關(guān)內(nèi)容進(jìn)行交互，并且通常需要用戶導(dǎo)航到某個位置才能檢索信息，從而降低了用戶完成常見Web任務(wù)的能力（如檢索文本信息）。在本文中，我們采用了一個WebGL 3D圖形JavaScript庫——Three.js，給出了一個雙模式方法的原型實現(xiàn)，用于在交互式3D環(huán)境中進(jìn)行信息傳播的接口設(shè)計，通過創(chuàng)建web交互式應(yīng)用程序，允許用戶在2D和3D用戶界面之間瞬間切換。與單獨(dú)的超文本或者3D模式相比，雙模式用戶界面具有總體任務(wù)性能最佳的優(yōu)勢，且在實踐上，美學(xué)上更受用戶青睞。

2　系統(tǒng)描述

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

3　測試方法

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

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

4　測試結(jié)果

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

5　結(jié)論

在與3D虛擬環(huán)境結(jié)合使用時，本文提出了雙模式用戶界面，以增強(qiáng)用戶與網(wǎng)絡(luò)內(nèi)容的交互。 這項先導(dǎo)性研究表明了3D虛擬環(huán)境的雙模接口的前景。未來的工作將通過將3D視圖與2D視圖更密切地結(jié)合，并在3D內(nèi)容中擴(kuò)展2D注釋來改進(jìn)雙模式界面。 我們還將擴(kuò)大研究范圍從而充分挖掘雙模接口的優(yōu)勢。