于冰洋 張紹玉 崔賀明 成都理工大學信息科學與技術學院

0引言：本論文主要在為解決目前家具市場上家具展示遇到的問題和挑戰(zhàn)，研究和設計三維家具展示平臺。該平臺充分利用計算機科學，提出了一套貼合家具購買者需求，簡單有效，低復雜度，切實可行的家具展示平臺解決方案。

1.系統(tǒng)模塊設計

本系統(tǒng)著力三維動態(tài)視景和實體行為相結合，它給人們帶來全新的真實體驗和交互式的感受。該項目通過鼠標拖動，使普通用戶操作更為簡便，三維全景圖像源自對真實場景的攝影捕捉，真實感強烈，所以制作出的全景展示會更加生動和真實。而基于3D模型的全景展示技術無疑是錦上添花。本項目將全景虛擬技術和3D模型結合一體能最大程度上的去模擬現(xiàn)實情景，提高用戶的可參與性和可操作性。系統(tǒng)總體框架及所使用的技術見圖1：但大多數(shù)網(wǎng)站只有單個或單種家居的展示，使用戶使用起來略顯單調(diào)無法滿足。在本項目中則解決了這個問題，我們實現(xiàn)了網(wǎng)頁上多個模型的加載，不同類型種類的家具模型都可以在一個頁面上加載出來，用戶能夠完美的選擇拖動擺放多個家具，實現(xiàn)自己想要的整體房間家具布置效果。

圖2 多個模型加載效果圖

圖1 系統(tǒng)總體框架

后臺我們采用的是Jeecg快速開發(fā)平臺進行開發(fā)，該平臺著力于為企業(yè)提供服務，通過對外提供的接口服務，就可以在平臺上進行企業(yè)的注冊，注冊通過后就可以使用該平臺進行三維展示功能。通過家具管理功能模塊就可以上傳自己的家具模型，并可以對家具模型進行編輯。通過家居風格功能模塊，可以制定不同的家具風格展示，并在家具管理功能模塊中把家具加入到相應的家具風格中。本系統(tǒng)采用精細化的數(shù)據(jù)權限控制，精確到行級，列表級，表單字段級，為不同的角色分配不同的權限。在部門管理功能模塊中添加相關企業(yè)信息，部門信息。在用戶管理功能模塊中可以添加用戶，分配該用戶的資源權限。在部門管理功能模塊中把加入到相應的部門中進行統(tǒng)一管理。

前端主要進行家具模型展示，前端采用bootstrap框架技術和HTML5開發(fā)引擎Three.js 。前端主要分兩個模塊，左側預覽區(qū)和右側模型展示區(qū)，首先我們可以上傳一張室內(nèi)背景圖在右側模型展示區(qū)，然后在左側預覽區(qū)選擇家具模型拖動到右側模型展示區(qū)進行展示。本系統(tǒng)實現(xiàn)動態(tài)添加刪除多個模型和模型位置擺放，大小控制等。本系統(tǒng)還實現(xiàn)了在VR效果下擺放家具模型，使家具擺放更具真實感，虛擬地面的設計使模型的擺放更加精確，人眼位置的設定可以在不同的方位觀看家具擺放的效果。

本系統(tǒng)的數(shù)據(jù)庫采用MySql數(shù)據(jù)庫，該數(shù)據(jù)庫的設計主要是用于對虛擬家居系統(tǒng)的家具信息，用戶信息，企業(yè)信息進行存儲。

2.三維全景展示功能與threejs技術

2.1 ThreeJS技術的理論與應用

在項目的初期，我們就將三維全景展示與網(wǎng)頁結合的觀念作為了項目的核心。三維全景展示是項目的重點與創(chuàng)新點，而在網(wǎng)頁上來實現(xiàn)則是考慮到用戶的使用方便性同時需要減少開發(fā)的成本來決定的。隨著現(xiàn)代技術的進步以及WebGL的規(guī)范，游覽器能很好的展示高質(zhì)量三維效果，threejs作為一個比較完善的基于webgl的開源項目，能用JavaScript高效的在網(wǎng)頁上實現(xiàn)3D程序。

Threejs是一個3DJavaScript庫，作者是巴塞羅那的Ricardo Cabello Miguels 又稱作Mr.doob。作為webGL的一個第三方庫，Threejs對于大多數(shù)的軟件以及游覽器都具有良好的兼容性。通俗的來講，threejs即為 three+js，three代表3D，js則指JavaScript，Javascript是運行在web端的腳本語言，threejs作為JavaScript的一個圖形引擎，能夠在網(wǎng)頁上完美的實現(xiàn)三維效果以及3D渲染功能，同時作為WebGL的衍生并對其進行了一定的封裝，threejs相對webGL只需用少量的代碼就能實現(xiàn)相同的效果。

2.2 在項目中添加的創(chuàng)新點

市場上存在著一些家居售賣網(wǎng)站，同樣也使用著三維展示的效果。

同時threejs中的camera元素決定著三維畫面中攝像機的高度，對應到網(wǎng)頁來看就是人眼觀察整個房間布局的高度。用戶上傳的背景圖或許會因為攝影者的身高或相機照相位置與網(wǎng)頁中攝像機擺放高度有差異，影響了整個頁面的協(xié)調(diào)性。我們通過對camera函數(shù)的修改，使其成為用戶自設定的參數(shù)，讓用戶能夠完全自己修改攝像機在畫面里的高度，解決了上傳的背景存在不適感的問題。

由于項目與家具的擺放相關，在項目的進行中也需要考慮到用戶的使用體驗。為項目添加上虛擬地面功能，對場景scene添加了GridHelper函數(shù)，作為網(wǎng)格的GridHelper函數(shù)自帶size和division參數(shù)，用戶可根據(jù)自己拍照時實際地面的高度作為參照物，對在網(wǎng)頁上呈現(xiàn)的三維全景虛擬家具背景設定自己需要的地面高度，只需輸入地面高度、寬度，展示頁面上便會生成相應的三維地面，家具在其中的擺放便會受到地面的限制，完全能夠模擬現(xiàn)實里真實的家具擺放。

3.VR技術在項目中的應用

隨著VR技術的火熱發(fā)展，基于交互式的三維動態(tài)視景和實體行為的系統(tǒng)是目前企業(yè)發(fā)展的新機遇，在科學發(fā)展的驅(qū)動下三維全景展示很大程度上將會成為相關領域未來的新方向。本項目同時將全景虛擬技術和3D模型結合一體能最大程度上的去模擬現(xiàn)實情景，提高用戶的可參與性和可操作性，讓用戶能有一種身臨其境之感。本項目實際應用價值很高，雖功能強大但操作簡單，用戶只需上傳一張室內(nèi)圖即可看到家具擺放情況即所見即所感。有功能完善的后臺系統(tǒng)作為支持，降低了企業(yè)人員的工作量。全景虛擬展示無疑將會成為未來新潮流，提前進入全景領域無疑是一種明智之舉，抓住這樣的機遇才是成功的關鍵。全景虛擬展示應用很廣，全景虛擬家居展示平臺只是其中一個領域，而在其他領域也會涉及。

4.結束語

本論文主要在為解決目前家具市場上家具展示遇到的問題和挑戰(zhàn)，研究和設計三維家具展示平臺。該平臺充分利用計算機科學，提出了一套貼合家具購買者需求，簡單有效，低復雜度，切實可行的家具展示平臺解決方案。