基于VR技術(shù)的三維家居設(shè)計(jì)及展現(xiàn)系統(tǒng)

劉丙信 劉金科 朱晨陽

摘要 為了優(yōu)化家居環(huán)境的設(shè)計(jì)，結(jié)合虛擬現(xiàn)實(shí)（VR）技術(shù)，設(shè)計(jì)一套三維家居設(shè)計(jì)及展現(xiàn)系統(tǒng)。該系統(tǒng)沉浸式體驗(yàn)更加逼真，在各個(gè)空間自由切換，讓客戶身臨其境感受未來家，增加了人機(jī)交互式體驗(yàn)。

[關(guān)鍵詞]虛擬現(xiàn)實(shí)三維家居人機(jī)交互

1 引言

隨著社會(huì)的發(fā)展和人們生活水平的提高，企業(yè)間競(jìng)爭(zhēng)的不斷加劇，迫使企業(yè)必須想方設(shè)法為用戶提供更新、更豐富的產(chǎn)品和服務(wù)。家居工業(yè)發(fā)展呈現(xiàn)5個(gè)特點(diǎn)：貨品全，資金多，周轉(zhuǎn)快，庫存少，銷售途徑多。VR技術(shù)與家居設(shè)計(jì)結(jié)合存在一定的必然性，為企業(yè)在為客戶提供更多樣化和個(gè)性化的產(chǎn)品和更優(yōu)良的服務(wù)方面開辟了新的途徑。VR（虛擬現(xiàn)實(shí)）樣板房是利用VR技術(shù)根據(jù)真實(shí)樣板房的1：1比例設(shè)計(jì)，將樣板房進(jìn)行360度實(shí)景展示，用戶直接漫游其中，體驗(yàn)房間的布局、空間感。

2 系統(tǒng)概述

A-Frame是網(wǎng)頁虛擬現(xiàn)實(shí)體驗(yàn)框架，將WebGL、WebVR等關(guān)鍵技術(shù)進(jìn)行了封裝，大幅提升了效率，也方便與VR硬件設(shè)備的對(duì)接。此外，A-Frame使用了高效的圖形庫Three.js，系統(tǒng)渲染效率較高。采用A-Frame中的a-scene構(gòu)建出虛擬現(xiàn)實(shí)場(chǎng)景，同時(shí)通過HTML的Dom操作給場(chǎng)景添加家具產(chǎn)品的模型。每個(gè)家具產(chǎn)品可以分解為長(zhǎng)方體、球體、圓柱體等基形狀，對(duì)應(yīng)A-Frame中的a-box、a-circle等預(yù)置形狀，通過組合成模型，把家具做成符合A-Frame規(guī)范的組件（a-entity）。并且將組件的屬性（prop）暴露出來，實(shí)現(xiàn)家具產(chǎn)品模型的建立以及可定制化。通過JavaScript可以將家具組件放置在三維空間里，通過坐標(biāo)系的計(jì)算完成房間內(nèi)的家居布局;通過修改組件暴露出來的屬性可以實(shí)現(xiàn)例如家具表面顏色、貼紋的定制化。最后利用A-Frame封裝的WebVR技術(shù)可以快速構(gòu)建出虛擬現(xiàn)實(shí)場(chǎng)景，實(shí)現(xiàn)樣板房的三維展示。用戶根據(jù)體驗(yàn)結(jié)果可以對(duì)設(shè)計(jì)方案進(jìn)行修改完善。

3 系統(tǒng)設(shè)計(jì)

三維家居設(shè)計(jì)系統(tǒng)包含家具建模、材質(zhì)紋理附加、行為附加和游覽交互功能。

3.1 家具建模

VR樣板房展示系統(tǒng)所能展現(xiàn)的真實(shí)程度，除了受限于硬件的處理能力外，主要取決于模型本身的細(xì)致程度。建模過程分為家具數(shù)據(jù)采集、CAD繪制、模型構(gòu)建、紋理貼圖和美化。家具分為人造板和實(shí)木制作兩種，兩種不同材質(zhì)的家具各有其特點(diǎn)，采取不同的建模方式。

（1）人造板拼接成的家具往往具有簡(jiǎn)單的結(jié)構(gòu)，使用框架自帶的原生幾何體組件即可完成模型構(gòu)建過程;樣板房的墻體和地面也由這些組件完成。

（2）實(shí)木制作的家具因?yàn)椴馁|(zhì)的特性有很多的細(xì)節(jié)處理方式，需要從外部導(dǎo)入已經(jīng)成型的obj文件進(jìn)行渲染。本文采用3DSmax來完成家具的構(gòu)建，為了達(dá)到高還原度和真實(shí)度，建模前繪制CAD圖，按照固定的比例尺和實(shí)際物體大小進(jìn)行縮放。設(shè)計(jì)好的CAD圖導(dǎo)入到3DSmax軟件中完成模型的調(diào)整、細(xì)化等工作。

3.2 創(chuàng)建材質(zhì)或貼圖

模型創(chuàng)建完成后還需要有花紋、材質(zhì)的體現(xiàn)，尋找合適的貼圖家具裝飾或根據(jù)家具本身的特性創(chuàng)建相應(yīng)的材質(zhì)。創(chuàng)建材質(zhì)對(duì)家具本身材料質(zhì)地的還原度比較高，貼圖本身不易更改，難以接近實(shí)際效果。因此，綜合使用材質(zhì)和貼圖兩種渲染方式，讓模型達(dá)到較好的表現(xiàn)效果。紋理的最終效果將直接影響渲染效果，因而也是模型創(chuàng)建過程中非常重要的環(huán)節(jié)，可以給家具單獨(dú)使用光源來提高材質(zhì)的還原度。好的紋理可以簡(jiǎn)化模型細(xì)節(jié)的體現(xiàn)，也能夠讓樣板房的真實(shí)度更高，提高整個(gè)系統(tǒng)的體驗(yàn)。

3.3 模型行為附加

渲染好的家具以靜態(tài)的形式在頁面中展示，要實(shí)現(xiàn)交互還要借助js代碼來實(shí)現(xiàn)，包括鼠標(biāo)點(diǎn)擊事件的響應(yīng)和滾輪按鈕變化等操作。其中框架內(nèi)生成的家具模型可以按框架結(jié)構(gòu)添加縮放、移動(dòng)、更換紋理等行為;外部導(dǎo)入文件無法在框架內(nèi)做到碰撞檢測(cè)，需要額外添加屬性為不可見的幾何組件作為響應(yīng)塊，為響應(yīng)塊添加適當(dāng)?shù)男袨楦耐獠磕Ｐ弯秩竞蟮拇笮『臀恢茫憫?yīng)塊自身也做出對(duì)應(yīng)的改變，最終達(dá)到所有模型都可以和用戶交互的目的。

3.4 VR界面整合

3.4.1 加載

所有創(chuàng)建的模型導(dǎo)出為obj格式，同對(duì)應(yīng)的mtl紋理文件以及圖片放在同一目錄中，導(dǎo)出模型時(shí)相關(guān)文件均使用相對(duì)路徑。兩種類型建模的文件分開存儲(chǔ)，js文件統(tǒng)一存儲(chǔ)，在完成模型庫的創(chuàng)建后便可以根據(jù)平臺(tái)需求組裝不同的房間樣式。在界面創(chuàng)建的過程中可以為房間添加適當(dāng)?shù)墓庠醋鳛殇秩拘Ч难a(bǔ)充。當(dāng)用戶使用網(wǎng)頁進(jìn)行家具、房型的選擇時(shí)，事先將家具模型加載到展示場(chǎng)景中，待用戶數(shù)據(jù)分析完后只需根據(jù)需求調(diào)用文件、渲染數(shù)據(jù)。

3.4.2 定位和渲染

模型要渲染到指定的位置需要仔細(xì)研究坐標(biāo)參數(shù)，樣板房整體使用世界坐標(biāo)，單個(gè)模型及其內(nèi)部使用相對(duì)坐標(biāo)進(jìn)行定位，相對(duì)坐標(biāo)使用統(tǒng)一的參照點(diǎn);家具的擺放位置可以使用相對(duì)坐標(biāo)的旋轉(zhuǎn)角度，也可以使用世界坐標(biāo)的旋轉(zhuǎn)角度。渲染的時(shí)間視模型的精細(xì)程度和計(jì)算機(jī)的計(jì)算能力而不同，可以通過排序算法優(yōu)先渲染消耗資源少的模型。

3.4.3 視角調(diào)整

每個(gè)場(chǎng)景中都可以存在多個(gè)攝影機(jī)的實(shí)例，切換不同的實(shí)例可以轉(zhuǎn)換視角，傳統(tǒng)鍵鼠或其他VR硬件的組合可以對(duì)視角屬性進(jìn)行設(shè)置，也可以直接設(shè)定瀏覽角度，減少操作難度，提升用戶體驗(yàn)。

4 結(jié)論

以家居三維設(shè)計(jì)以及虛擬化展示為目標(biāo)，虛擬現(xiàn)實(shí)技術(shù)與家居裝修相結(jié)合，設(shè)計(jì)實(shí)現(xiàn)一套三維家居虛擬設(shè)計(jì)及展現(xiàn)系統(tǒng)，較為全面的論述了整個(gè)系統(tǒng)的設(shè)計(jì)過程和工作流程，用戶通過簡(jiǎn)單的登錄、選擇家具、擺放，然后進(jìn)入漫游模式，360度實(shí)景展示，并根據(jù)需要進(jìn)行修改替換。該系統(tǒng)旨在提供家具定制、樣板房在線展示的功能，在家居裝飾中具有一定的應(yīng)用前景。

參考文獻(xiàn)

[1]陳晨，基于虛擬現(xiàn)實(shí)的家具三維設(shè)計(jì)與體驗(yàn)系統(tǒng)研究[D].東南大學(xué)，201 3.

[2]趙文博.虛擬現(xiàn)實(shí)技術(shù)（VR技術(shù)）在家居設(shè)計(jì)中的應(yīng)用[J].工業(yè)設(shè)計(jì)，2017 （11）：98-99.

[3] https： //aframe. io/，

[4]李榕玲，張悅，基于VR技術(shù)的家居陳列方法研究[J]，現(xiàn)代電子技術(shù)，2017，40 （22）.