基于Web的虛擬陳列室設計研究

劉青玲 劉柱鴻

（湖南安全技術職業學院，湖南 長沙 410151）

0 引言

目前，隨著互聯網技術的迅猛發展，虛擬現實技術在數字娛樂、教育和文化遺產保護等領域得到了廣泛應用[1]。作為數字文化遺產保護和傳播的重要手段，虛擬陳列室在目前得到了廣泛的關注和研究[2]。傳統的實體陳列室存在空間有限、保護難度和觀展效果單一等問題，此類問題制約了文化遺產的傳播和觀賞效果[3]。而虛擬陳列室具有空間不受限、文化遺產全面保護以及觀展效果更佳等優點。因此，研究基于Web 的虛擬陳列室設計對提升文化遺產保護和傳播的效果具有重要意義[4]。該文旨在研究基于Web 的虛擬陳列室的設計，探究如何通過虛擬現實技術和Web 技術將文化遺產數字化，并將其進行互聯網展示，以提升文化遺產保護和傳播的效果。該文設計了虛擬陳列室總框架，分別建設前端展示界面、后臺管理和數據儲存模塊，用于指導該陳列室網站的開發，并歸納出陳列室網站建設方法，以期為其他學者提供指導與借鑒。基于Web 的虛擬陳列室設計將有助于推動虛擬現實技術在網站建設中的運用，是網站建設工作的總結與提升，為虛擬陳列室的設計和開發提供了全新的思路和方向。

1 虛擬陳列室總框架設計

基于Web 的虛擬陳列室構建系統是一種在線展示產品的工具，可以為客戶提供更直觀、更全面以及更豐富的產品展示方式。該系統主要包括前端展示界面、后臺管理模塊以及數據儲存模塊等多個部分。虛擬陳列室的設計總框架如圖1 所示。

圖1 基于Web 的虛擬陳列室總框架設計

前端展示界面是虛擬陳列室系統的核心部分，其主要功能是向用戶展示產品的虛擬陳列效果。后臺管理模塊是虛擬陳列室系統的管理中心，其主要功能是管理前端展示界面所展示的產品信息。數據儲存模塊是虛擬陳列室系統的數據存儲中心，其主要功能是存儲前端展示界面所展示的產品信息、后臺管理系統所管理的用戶和數據統計信息。

2 前端展示界面設計

為了實現向用戶展示產品的虛擬陳列效果功能，前端界面具備如下能力。

首先，圖形渲染能力。前端界面需要能夠實現產品的三維建模和圖形渲染，以展示真實的產品效果[5]。三維建模與渲染技術是前端界面實現產品虛擬陳列的基礎，涉及幾何建模、材質貼圖、光照計算和陰影處理等多個方面。系統使用的三維建模軟件為3DS MAX，渲染技術使用WebGL庫實現。具體實現時使用模型加載器加載模型，并使用Shader 進行渲染，以實現對模型材質、光照和陰影等的處理。

其次，多平臺適配。前端界面需要能夠適配多種設備平臺，包括PC、平板、手機等，以提供更便捷的使用體驗。虛擬陳列室系統需要適配不同的屏幕尺寸、分辨率和操作方式，以方便用戶在各種設備上使用[6]。在多平臺適配中，使用Flex 布局可以實現頁面的自適應和布局調整，適配不同的屏幕尺寸和分辨率。Flex 布局在多平臺適配中的技術流程如圖2 所示。

圖2 Web 虛擬陳列室前端展示界面多平臺適配

最后，交互功能。前端界面需要提供用戶交互功能，包括旋轉、縮放和拖拽等操作，使用戶能夠更直觀地了解產品的細節。系統使用jQuery、React 庫實現DOM 操作和事件綁定，通過hammer.js 手勢庫實現觸摸屏交互。在具體實現過程中，需要根據用戶的操作實時更新模型的位置、旋轉角度和縮放比例等參數。

3 后臺管理模塊設計

后臺管理系統具備如下能力。

首先，產品管理。后臺管理系統需要能夠實現產品的添加、修改、刪除等操作，以保證前端展示界面的產品信息的準確性和完整性，其中需要管理的內容如圖3所示。

圖3 產品管理內容

后臺管理模塊還可以對產品展示進行配置，包括展示位置、數量、排序等。管理員可以根據用戶喜好和需求調整產品的展示位置和數量，提升展示效果和用戶滿意度。通過管理產品推薦和熱門產品，提高產品的曝光度和銷售量。管理員可以根據產品的銷售情況、用戶反饋等因素選擇推薦和熱門產品，并進行相應的展示和宣傳。

其次，數據統計。后臺管理系統需要實現數據的收集和統計，包括用戶的訪問量、產品的點擊率等數據，以幫助企業分析用戶行為和產品市場需求。通過統計和分析產品瀏覽量、點擊量和銷售量等指標，可以了解產品的受歡迎程度和銷售情況，從而優化產品和服務。常用的統計指標包括產品銷售額、轉化率以及訪問量等。轉化率A 的計算如公式（1）所示。

式中：Y為轉化用戶數；F為訪問用戶數。

對交易數據的搜集、整理和分析，可以獲得大量的信息和見解，包括客戶的消費習慣、產品銷售情況、市場競爭情況和推廣活動效果等。在此類信息的基礎上，基于Web 的虛擬陳列室設計可以對優化產品和服務、改進營銷策略等方面進行決策。

最后，用戶管理。后臺管理系統需要能夠實現用戶的管理和權限控制，包括用戶的注冊、登錄以及角色分配等操作，以保證系統的安全性和穩定性。通過后臺管理模塊，管理員可以隨時對用戶信息進行編輯和更新，其中包括用戶姓名、聯系方式和收貨地址等。通過分析和統計用戶行為，可以更好地了解用戶需求和行為習慣，從而優化產品和服務，提高用戶滿意度和忠誠度。

4 數據儲存模塊設計

數據儲存模塊具備如下能力。

首先，數據存儲。數據庫需要能夠存儲產品信息、用戶信息和數據統計信息等多種數據類型，以保證系統數據的完整性和準確性。在數據存儲過程中需要進行數據模型設計，包括ER 圖設計、關系模型設計和物理模型設計等。ER 圖是指實體-關系圖，用于表示虛擬陳列室中的實體及其之間的關系。關系模型是指將ER 圖轉化為關系模式的過程，通過關系模式可以表示實體及其屬性、實體之間的關系。關系模式可以用R（A1，A2，...，An）表示，其中，R為關系模式的名稱，A1，A2，...，An為關系模式中的屬性，主鍵和外鍵可以對屬性進行約束來實現。關系模式可以清晰地表明實體及其屬性、實體之間的關系，為實現虛擬陳列室的功能提供基礎數據結構。

其次，數據管理。數據庫需要實現數據的添加、修改、刪除等操作，以確保數據的及時更新和維護。進行數據管理時，系統會編寫SQL 語句進行數據操作，語句包括SELECT、INSERT、UPDATE 以及DELETE 等操作，用于實現數據的查詢、插入、更新和刪除。編寫SQL 語句時，需要注意SQL 注入等安全問題，并進行數據權限管理，以確保數據的安全性和可靠性。

最后，數據備份。數據庫能夠實現數據的備份和恢復，以確保數據的安全性和可靠性，數據備份的容錯率R的計算如公式（2）所示。

式中：S為備份失敗率，可理解為備份失敗次數和備份總次數的差；H為恢復失敗率，可理解為恢復失敗次數與恢復總次數的差。

根據備份策略和備份工具，設置數據備份的頻率、方式和存儲位置等，對備份數據進行測試和恢復，以確保備份數據的可靠性。

5 測試試驗

5.1 試驗準備

該文試驗旨在測試基于Web 的虛擬陳列室在用戶體驗和系統性能方面的表現。具體目標包括用戶能否在虛擬陳列室中自由瀏覽和交互，系統是否能夠穩定地運行并快速響應用戶操作，是否具有良好的兼容性和可擴展性。系統使用的計算機型號為CPU Intel Core i7，8 GB 內存，500 GB 硬盤，顯示器分辨率為1920×1080 的23 英寸液晶顯示器，采用Logitech MK270 無線鼠標和鍵盤。操作系統為Windows 10，采用Google Chrome 瀏覽器，版本號為91.0.4472.124，虛擬陳列室軟件為Matterport，版本號為3.1.1。試驗需要安裝Matterport 虛擬陳列室軟件，并啟動。進入虛擬陳列室，并瀏覽其中的展示內容。在虛擬陳列室中進行部分交互操作，如縮放、旋轉和移動等。然后在虛擬陳列室中進行搜索操作，測試系統的查詢速度和搜索結果的準確性。再使用不同的瀏覽器（如Firefox、Edge 等）測試系統的兼容性，嘗試在虛擬陳列室中添加新的展示內容，測試系統的可擴展性。

5.2 試驗結果

通過統計測試者在虛擬陳列室中瀏覽展品的時間，可以了解哪些展品更受歡迎，哪些展品需要增加吸引力。縮放和旋轉是VR 虛擬陳列室中的2 個重要操作，通過統計測試者進行這2 種操作的次數，可以了解哪些展品需要提供更多的細節信息，哪些展品需要增加互動性和多樣性。測試者在虛擬陳列室中的交互行為可以反映出虛擬陳列室的交互設計是否合理和易于使用。通過分析交互次數，可以了解測試者的操作習慣和使用體驗，進而優化虛擬陳列室的交互設計。測試試驗結果見表1，其中列出了測試者對虛擬陳列室進行不同操作時所需的平均時間。

表1 測試試驗結果

從表1 可以看出，測試者在虛擬陳列室中瀏覽展品的平均時間為20.3 s，瀏覽時間最長的測試者為第3 號測試者，時間為22.7 s，可以考慮增加展品的展示內容和細節，以吸引用戶的注意力。測試者進行縮放和旋轉操作的平均時間為7.4 s。縮放和旋轉是VR 虛擬陳列室中的2 個重要操作，可以提供更多的細節信息和交互性，以優化用戶體驗。測試者在虛擬陳列室中交互的平均時間為8.5 s。交互是VR 虛擬陳列室中重要的交互方式，可以提供更多的操作方式和交互性，以提高用戶體驗。

綜上所述，從測試數據中可以看出，在VR 虛擬陳列室中，用戶最關注的是展品本身，同時縮放、旋轉和交互是用戶體驗的重要部分。因此，設計和開發VR 虛擬陳列室時，應注重展品設計、交互設計和用戶體驗優化，以提高用戶對虛擬陳列室的滿意度和使用率。

6 結語

通過研究基于Web 的虛擬陳列室的設計，探究了如何通過虛擬現實技術和Web 技術將內容數字化，并將其進行互聯網展示，以提升傳播效果。該文首先設計虛擬陳列室總框架，其次對前端展示界面、后臺管理和數據儲存模塊進行建設，探究基于Web 的虛擬陳列室對用戶的體驗和參與度的影響，并通過數據分析得出結論。測試數據表明，基于Web 的虛擬陳列室可以更好地提升觀展效果和用戶的參與度，對指導陳列室網站的開發具有重要意義。在今后的研究中，可以進一步探究基于Web 的虛擬陳列室的應用場景和用戶群體，不斷完善和改進虛擬陳列室的設計和開發，提升其展示效果和用戶體驗。此外，還可以探索虛擬現實技術的更多應用場景，推動虛擬現實技術在各個領域的廣泛應用。