劉丙信 劉金科 朱晨陽

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

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

1 引言

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

2 系統(tǒng)概述

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

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

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

3.1 家具建模

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

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

（2）實木制作的家具因為材質(zhì)的特性有很多的細(xì)節(jié)處理方式，需要從外部導(dǎo)入已經(jīng)成型的obj文件進行渲染。本文采用3DSmax來完成家具的構(gòu)建，為了達到高還原度和真實度，建模前繪制CAD圖，按照固定的比例尺和實際物體大小進行縮放。設(shè)計好的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ì)對家具本身材料質(zhì)地的還原度比較高，貼圖本身不易更改，難以接近實際效果。因此，綜合使用材質(zhì)和貼圖兩種渲染方式，讓模型達到較好的表現(xiàn)效果。紋理的最終效果將直接影響渲染效果，因而也是模型創(chuàng)建過程中非常重要的環(huán)節(jié)，可以給家具單獨使用光源來提高材質(zhì)的還原度。好的紋理可以簡化模型細(xì)節(jié)的體現(xiàn)，也能夠讓樣板房的真實度更高，提高整個系統(tǒng)的體驗。

3.3 模型行為附加

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

3.4 VR界面整合

3.4.1 加載

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

3.4.2 定位和渲染

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

3.4.3 視角調(diào)整

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

4 結(jié)論

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

參考文獻

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

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

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

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