于冰洋 張紹玉 崔賀明 成都理工大學(xué)信息科學(xué)與技術(shù)學(xué)院

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

1.系統(tǒng)模塊設(shè)計(jì)

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

圖2 多個(gè)模型加載效果圖

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

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

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

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

2.三維全景展示功能與threejs技術(shù)

2.1 ThreeJS技術(shù)的理論與應(yīng)用

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

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

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

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

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

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

3.VR技術(shù)在項(xiàng)目中的應(yīng)用

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

4.結(jié)束語

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