基于Web的虛擬陳列室設(shè)計(jì)研究

劉青玲 劉柱鴻

（湖南安全技術(shù)職業(yè)學(xué)院，湖南 長沙 410151）

0 引言

目前，隨著互聯(lián)網(wǎng)技術(shù)的迅猛發(fā)展，虛擬現(xiàn)實(shí)技術(shù)在數(shù)字娛樂、教育和文化遺產(chǎn)保護(hù)等領(lǐng)域得到了廣泛應(yīng)用[1]。作為數(shù)字文化遺產(chǎn)保護(hù)和傳播的重要手段，虛擬陳列室在目前得到了廣泛的關(guān)注和研究[2]。傳統(tǒng)的實(shí)體陳列室存在空間有限、保護(hù)難度和觀展效果單一等問題，此類問題制約了文化遺產(chǎn)的傳播和觀賞效果[3]。而虛擬陳列室具有空間不受限、文化遺產(chǎn)全面保護(hù)以及觀展效果更佳等優(yōu)點(diǎn)。因此，研究基于Web 的虛擬陳列室設(shè)計(jì)對提升文化遺產(chǎn)保護(hù)和傳播的效果具有重要意義[4]。該文旨在研究基于Web 的虛擬陳列室的設(shè)計(jì)，探究如何通過虛擬現(xiàn)實(shí)技術(shù)和Web 技術(shù)將文化遺產(chǎn)數(shù)字化，并將其進(jìn)行互聯(lián)網(wǎng)展示，以提升文化遺產(chǎn)保護(hù)和傳播的效果。該文設(shè)計(jì)了虛擬陳列室總框架，分別建設(shè)前端展示界面、后臺(tái)管理和數(shù)據(jù)儲(chǔ)存模塊，用于指導(dǎo)該陳列室網(wǎng)站的開發(fā)，并歸納出陳列室網(wǎng)站建設(shè)方法，以期為其他學(xué)者提供指導(dǎo)與借鑒?；赪eb 的虛擬陳列室設(shè)計(jì)將有助于推動(dòng)虛擬現(xiàn)實(shí)技術(shù)在網(wǎng)站建設(shè)中的運(yùn)用，是網(wǎng)站建設(shè)工作的總結(jié)與提升，為虛擬陳列室的設(shè)計(jì)和開發(fā)提供了全新的思路和方向。

1 虛擬陳列室總框架設(shè)計(jì)

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

圖1 基于Web 的虛擬陳列室總框架設(shè)計(jì)

前端展示界面是虛擬陳列室系統(tǒng)的核心部分，其主要功能是向用戶展示產(chǎn)品的虛擬陳列效果。后臺(tái)管理模塊是虛擬陳列室系統(tǒng)的管理中心，其主要功能是管理前端展示界面所展示的產(chǎn)品信息。數(shù)據(jù)儲(chǔ)存模塊是虛擬陳列室系統(tǒng)的數(shù)據(jù)存儲(chǔ)中心，其主要功能是存儲(chǔ)前端展示界面所展示的產(chǎn)品信息、后臺(tái)管理系統(tǒng)所管理的用戶和數(shù)據(jù)統(tǒng)計(jì)信息。

2 前端展示界面設(shè)計(jì)

為了實(shí)現(xiàn)向用戶展示產(chǎn)品的虛擬陳列效果功能，前端界面具備如下能力。

首先，圖形渲染能力。前端界面需要能夠?qū)崿F(xiàn)產(chǎn)品的三維建模和圖形渲染，以展示真實(shí)的產(chǎn)品效果[5]。三維建模與渲染技術(shù)是前端界面實(shí)現(xiàn)產(chǎn)品虛擬陳列的基礎(chǔ)，涉及幾何建模、材質(zhì)貼圖、光照計(jì)算和陰影處理等多個(gè)方面。系統(tǒng)使用的三維建模軟件為3DS MAX，渲染技術(shù)使用WebGL庫實(shí)現(xiàn)。具體實(shí)現(xiàn)時(shí)使用模型加載器加載模型，并使用Shader 進(jìn)行渲染，以實(shí)現(xiàn)對模型材質(zhì)、光照和陰影等的處理。

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

圖2 Web 虛擬陳列室前端展示界面多平臺(tái)適配

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

3 后臺(tái)管理模塊設(shè)計(jì)

后臺(tái)管理系統(tǒng)具備如下能力。

首先，產(chǎn)品管理。后臺(tái)管理系統(tǒng)需要能夠?qū)崿F(xiàn)產(chǎn)品的添加、修改、刪除等操作，以保證前端展示界面的產(chǎn)品信息的準(zhǔn)確性和完整性，其中需要管理的內(nèi)容如圖3所示。

圖3 產(chǎn)品管理內(nèi)容

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

其次，數(shù)據(jù)統(tǒng)計(jì)。后臺(tái)管理系統(tǒng)需要實(shí)現(xiàn)數(shù)據(jù)的收集和統(tǒng)計(jì)，包括用戶的訪問量、產(chǎn)品的點(diǎn)擊率等數(shù)據(jù)，以幫助企業(yè)分析用戶行為和產(chǎn)品市場需求。通過統(tǒng)計(jì)和分析產(chǎn)品瀏覽量、點(diǎn)擊量和銷售量等指標(biāo)，可以了解產(chǎn)品的受歡迎程度和銷售情況，從而優(yōu)化產(chǎn)品和服務(wù)。常用的統(tǒng)計(jì)指標(biāo)包括產(chǎn)品銷售額、轉(zhuǎn)化率以及訪問量等。轉(zhuǎn)化率A 的計(jì)算如公式（1）所示。

式中：Y為轉(zhuǎn)化用戶數(shù)；F為訪問用戶數(shù)。

對交易數(shù)據(jù)的搜集、整理和分析，可以獲得大量的信息和見解，包括客戶的消費(fèi)習(xí)慣、產(chǎn)品銷售情況、市場競爭情況和推廣活動(dòng)效果等。在此類信息的基礎(chǔ)上，基于Web 的虛擬陳列室設(shè)計(jì)可以對優(yōu)化產(chǎn)品和服務(wù)、改進(jìn)營銷策略等方面進(jìn)行決策。

最后，用戶管理。后臺(tái)管理系統(tǒng)需要能夠?qū)崿F(xiàn)用戶的管理和權(quán)限控制，包括用戶的注冊、登錄以及角色分配等操作，以保證系統(tǒng)的安全性和穩(wěn)定性。通過后臺(tái)管理模塊，管理員可以隨時(shí)對用戶信息進(jìn)行編輯和更新，其中包括用戶姓名、聯(lián)系方式和收貨地址等。通過分析和統(tǒng)計(jì)用戶行為，可以更好地了解用戶需求和行為習(xí)慣，從而優(yōu)化產(chǎn)品和服務(wù)，提高用戶滿意度和忠誠度。

4 數(shù)據(jù)儲(chǔ)存模塊設(shè)計(jì)

數(shù)據(jù)儲(chǔ)存模塊具備如下能力。

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

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

最后，數(shù)據(jù)備份。數(shù)據(jù)庫能夠?qū)崿F(xiàn)數(shù)據(jù)的備份和恢復(fù)，以確保數(shù)據(jù)的安全性和可靠性，數(shù)據(jù)備份的容錯(cuò)率R的計(jì)算如公式（2）所示。

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

根據(jù)備份策略和備份工具，設(shè)置數(shù)據(jù)備份的頻率、方式和存儲(chǔ)位置等，對備份數(shù)據(jù)進(jìn)行測試和恢復(fù)，以確保備份數(shù)據(jù)的可靠性。

5 測試試驗(yàn)

5.1 試驗(yàn)準(zhǔn)備

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

5.2 試驗(yàn)結(jié)果

通過統(tǒng)計(jì)測試者在虛擬陳列室中瀏覽展品的時(shí)間，可以了解哪些展品更受歡迎，哪些展品需要增加吸引力?？s放和旋轉(zhuǎn)是VR 虛擬陳列室中的2 個(gè)重要操作，通過統(tǒng)計(jì)測試者進(jìn)行這2 種操作的次數(shù)，可以了解哪些展品需要提供更多的細(xì)節(jié)信息，哪些展品需要增加互動(dòng)性和多樣性。測試者在虛擬陳列室中的交互行為可以反映出虛擬陳列室的交互設(shè)計(jì)是否合理和易于使用。通過分析交互次數(shù)，可以了解測試者的操作習(xí)慣和使用體驗(yàn)，進(jìn)而優(yōu)化虛擬陳列室的交互設(shè)計(jì)。測試試驗(yàn)結(jié)果見表1，其中列出了測試者對虛擬陳列室進(jìn)行不同操作時(shí)所需的平均時(shí)間。

表1 測試試驗(yàn)結(jié)果

從表1 可以看出，測試者在虛擬陳列室中瀏覽展品的平均時(shí)間為20.3 s，瀏覽時(shí)間最長的測試者為第3 號(hào)測試者，時(shí)間為22.7 s，可以考慮增加展品的展示內(nèi)容和細(xì)節(jié)，以吸引用戶的注意力。測試者進(jìn)行縮放和旋轉(zhuǎn)操作的平均時(shí)間為7.4 s?？s放和旋轉(zhuǎn)是VR 虛擬陳列室中的2 個(gè)重要操作，可以提供更多的細(xì)節(jié)信息和交互性，以優(yōu)化用戶體驗(yàn)。測試者在虛擬陳列室中交互的平均時(shí)間為8.5 s。交互是VR 虛擬陳列室中重要的交互方式，可以提供更多的操作方式和交互性，以提高用戶體驗(yàn)。

綜上所述，從測試數(shù)據(jù)中可以看出，在VR 虛擬陳列室中，用戶最關(guān)注的是展品本身，同時(shí)縮放、旋轉(zhuǎn)和交互是用戶體驗(yàn)的重要部分。因此，設(shè)計(jì)和開發(fā)VR 虛擬陳列室時(shí)，應(yīng)注重展品設(shè)計(jì)、交互設(shè)計(jì)和用戶體驗(yàn)優(yōu)化，以提高用戶對虛擬陳列室的滿意度和使用率。

6 結(jié)語

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