基于Unity 3D的虛擬家具商城的設(shè)計(jì)與實(shí)現(xiàn)

楊漾 姚杭飛 楊琛 許淑華

摘 要： 設(shè)計(jì)了一個(gè)基于Unity 3D的虛擬家具商城系統(tǒng)。該系統(tǒng)通過(guò)Unity 3D三維技術(shù)，模仿實(shí)體店設(shè)計(jì)出一個(gè)步行街和商城三維模型，實(shí)現(xiàn)商城里面的家具三維展示，讓顧客足不出戶就能身臨其境 “逛商場(chǎng)”，享受逛街購(gòu)物樂(lè)趣。該系統(tǒng)具有良好的視覺(jué)和交互效果。

關(guān)鍵詞： Unity 3D； 三維家具； 虛擬商城； 電子商務(wù)； 設(shè)計(jì)

中圖分類法：TP393 文獻(xiàn)標(biāo)志碼：A 文章編號(hào)：1006-8228（2014）06-47-03

0 引言

自進(jìn)入20世紀(jì)90年代以來(lái)，中國(guó)家具每年的需求量以100億元的速度增長(zhǎng)。據(jù)預(yù)測(cè)，未來(lái)20年中國(guó)家具市場(chǎng)的需求量將以10%-15%的速度增長(zhǎng)。目前，我國(guó)家具業(yè)已形成了一定規(guī)模，2003年全國(guó)家具總產(chǎn)值已達(dá)到1650億元。目前，全國(guó)的家具企業(yè)有5萬(wàn)余家，從業(yè)人員已超過(guò)500萬(wàn)人[1]。中國(guó)已經(jīng)成為世界家具生產(chǎn)大國(guó)，中國(guó)的產(chǎn)值占世界1/4，出口量是世界第一，出口額為388億美元，年增長(zhǎng)15.16%。而全行業(yè)2011年產(chǎn)值突破10000億元，2011年家具行業(yè)的整體增幅是25%，成績(jī)卓然[2]。

現(xiàn)有的家具電子商務(wù)平臺(tái)僅限于平面的二維網(wǎng)頁(yè)技術(shù)，依舊保持著傳統(tǒng)圖片展示，即通過(guò)幾張不同角度的照片來(lái)展示商品。這種展示方式無(wú)法直觀地把商品呈現(xiàn)給用戶，使得客戶對(duì)整個(gè)產(chǎn)品缺乏深入的了解。此外，由于平面網(wǎng)頁(yè)的展示局限性，基于平面的購(gòu)物場(chǎng)景使得購(gòu)物過(guò)程缺乏真實(shí)感，極大地影響了客戶購(gòu)物的興趣。

目前，Web3D技術(shù)得到了快速發(fā)展。Web3D技術(shù)是Web技術(shù)和傳統(tǒng)的3D圖形技術(shù)相結(jié)合的產(chǎn)物，是互聯(lián)網(wǎng)上實(shí)現(xiàn)3D圖形技術(shù)的總稱。Web3D技術(shù)強(qiáng)化了視覺(jué)信息。可以讓消費(fèi)者通過(guò)對(duì)虛擬商品的交互操作，了解商品的3D外形、結(jié)構(gòu)、功能，甚至還可以了解商品的使用流程，更增加了商品的真實(shí)性[3]。本文在傳統(tǒng)的家具電子商務(wù)技術(shù)基礎(chǔ)上，設(shè)計(jì)和開發(fā)了一個(gè)基于Web3D的虛擬家具商城。該虛擬家具商城通過(guò)引入計(jì)算機(jī)3D虛擬現(xiàn)實(shí)技術(shù)模擬三維視覺(jué)仿真環(huán)境，強(qiáng)化了商業(yè)過(guò)程中的視覺(jué)作用，讓用戶在虛擬的3D購(gòu)物場(chǎng)景中，通過(guò)使用鼠標(biāo)改變角度，全面地了解商品3D信息。同時(shí)3D虛擬環(huán)境使得購(gòu)物過(guò)程具有一定娛樂(lè)性，讓客戶具有身臨其境的現(xiàn)實(shí)感覺(jué)，極大地吸引客戶的眼球，潛在地促進(jìn)購(gòu)買欲望。

1 Unity 3D技術(shù)介紹

電子商務(wù)系統(tǒng)開發(fā)使用Unity3D是一個(gè)大膽的嘗試，Unity3D是一個(gè)由Unity Technologies開發(fā)的，可讓玩家輕松創(chuàng)建諸如三維視頻游戲、建筑可視化、實(shí)時(shí)三維動(dòng)畫等類型互動(dòng)內(nèi)容的多平臺(tái)的綜合型游戲開發(fā)工具，是一個(gè)全面整合的專業(yè)游戲引擎。Unity類似于Director，Blender game engine， Virtools 或 Torque Game Builder等利用交互的圖型化開發(fā)環(huán)境為首要方式的軟件，其編輯器運(yùn)行在Windows和Mac OS X下，可發(fā)布游戲至Windows、Mac、Wii、iPhone和Android平臺(tái)。也可以利用Unity Web Player插件發(fā)布網(wǎng)頁(yè)游戲，支持Mac 和Windows的網(wǎng)頁(yè)瀏覽。它的網(wǎng)頁(yè)播放器也被Mac widgets所支持。

Unity3D是一款強(qiáng)大、優(yōu)雅而簡(jiǎn)單的集成編輯器和引擎，它所有的功能都組織在不同的、帶有標(biāo)簽的窗口視圖里，每個(gè)視圖都提供了不同的編輯和操作功能。而且，這款軟件完全以資源為中心，可以為所有不同類型的對(duì)象創(chuàng)建物理鏈接和引用，即便是像代碼這樣的對(duì)象。更重要的是，Unity3D的許可方式以及可選的插件使得用戶在需要時(shí)可以得到適量的功能和定制。這樣的靈活性使得它可供一個(gè)獨(dú)立的愛(ài)好者或是一個(gè)大型的開發(fā)團(tuán)隊(duì)使用[4]。

Unity3D支持所有主要文件格式，并能和大部分相關(guān)應(yīng)用程序協(xié)同工作。Unity3D支持三種腳本語(yǔ)言：JavaScript，C#，Boo。我們?cè)谟肁SP+MySQL開發(fā)系統(tǒng)時(shí)采用的腳本語(yǔ)言是JavaScript，這使得Unity3D與我們的程序更加契合。我們采用這樣一個(gè)游戲引擎，是希望把三維多視角游戲帶到購(gòu)物中來(lái)，在這樣的環(huán)境下，可以多平臺(tái)呈現(xiàn)我們的商品。Unity3D內(nèi)置的NVIDIA?PhysX?物理引擎帶給買家生活的互動(dòng)，在游戲中購(gòu)物，在購(gòu)物中游戲的想法可以得到實(shí)現(xiàn)。

2 系統(tǒng)功能、建模和碰撞檢測(cè)

2.1 系統(tǒng)功能架構(gòu)

該網(wǎng)站是一個(gè)三維家具虛擬商城購(gòu)物平臺(tái)。顧客通過(guò)鼠標(biāo)控制第一人稱視角，通過(guò)鍵盤的方向鍵控制移動(dòng)，能夠在360度視角觀察家具。在這個(gè)過(guò)程中，顧客能夠充分的了解三維家具模型的信息，包括尺寸、材質(zhì)和設(shè)計(jì)風(fēng)格等。

系統(tǒng)按照功能的性質(zhì)，分為前臺(tái)服務(wù)系統(tǒng)和后臺(tái)管理系統(tǒng)。

⑴ 前臺(tái)服務(wù)系統(tǒng)：主要提供用戶注冊(cè)、用戶登錄、商品瀏覽、資料管理、訂單管理、購(gòu)物車等功能。系統(tǒng)前臺(tái)功能結(jié)構(gòu)圖如圖1所示。

⑵ 后臺(tái)管理系統(tǒng)：系統(tǒng)后臺(tái)功能就是對(duì)數(shù)據(jù)庫(kù)進(jìn)行各種操作，例如查詢、更新、添加等功能，包括顧客管理、進(jìn)貨管理、退貨管理、訂貨管理和庫(kù)存管理，結(jié)構(gòu)圖如圖2所示。

2.2 系統(tǒng)活動(dòng)狀態(tài)分析

系統(tǒng)的活動(dòng)狀態(tài)主要有買方購(gòu)物活動(dòng)和賣方管理商品活動(dòng)[5]。

⑴ 買方購(gòu)物活動(dòng)：買方購(gòu)物狀態(tài)圖如圖3所示。

⑵ 賣方管理商品活動(dòng)：賣方管理商品狀態(tài)圖如圖4所示。

2.3 3D虛擬步行街漫游場(chǎng)景建模

在虛擬步行街漫游場(chǎng)景中，虛擬店鋪分布在步行街內(nèi)，客戶可以通過(guò)漫游方式在步行街行走，通過(guò)前后左右的移動(dòng)來(lái)觀察整個(gè)步行街上的店鋪，并且可以隨意進(jìn)出店鋪，全方位地瀏覽店鋪里的家具。其整個(gè)操作都只要用鼠標(biāo)和鍵盤控制，可操作性非常強(qiáng)。

虛擬商城步行街的場(chǎng)景設(shè)計(jì)如下。

⑴ 首先使用3DSMax建立一個(gè)虛擬步行街建筑模型，并對(duì)模型進(jìn)行渲染和烘培。

⑵ 在步行街模型的基礎(chǔ)上，構(gòu)建虛擬的房間作為購(gòu)物店鋪，并且在店鋪中放置家具模型。

⑶ 進(jìn)行顧客與場(chǎng)景之間的交互行為操作設(shè)計(jì)，這個(gè)設(shè)計(jì)需要在Unity3D中完成，所以我們要將剛才制作好的模型導(dǎo)出為fbx文件，將*.fbx格式的模型導(dǎo)入到Unity3D中，將攝像機(jī)添加到這個(gè)模型中，再為這個(gè)模型添加第一人稱視角，其中包含有FPSInputController.js，CharacterMotor.js，MouseLook.js等幾種Javascript腳本語(yǔ)言，使得用戶可以通過(guò)鼠標(biāo)和鍵盤的操作，實(shí)現(xiàn)在場(chǎng)景自由地旋轉(zhuǎn)和移動(dòng)，進(jìn)行視角的變換。

2.4 碰撞檢測(cè)

碰撞檢測(cè)用于判定一對(duì)或多對(duì)物體在給定時(shí)間域內(nèi)的同一時(shí)刻是否占有相同的區(qū)域。就虛擬場(chǎng)景漫游中的碰撞檢測(cè)來(lái)說(shuō)，它可以使用戶以更自然的方式與虛擬場(chǎng)景中的對(duì)象進(jìn)行交互，保持場(chǎng)景的真實(shí)性和用戶的沉浸感。如果沒(méi)有及時(shí)的碰撞檢測(cè)，當(dāng)虛擬場(chǎng)景中的一個(gè)對(duì)象碰到另一個(gè)對(duì)象時(shí)，往往會(huì)發(fā)生相互穿透、重疊等現(xiàn)象，而不會(huì)產(chǎn)生碰撞效果，這在現(xiàn)實(shí)世界中是不可能的，所以也就會(huì)破壞虛擬場(chǎng)景的真實(shí)感和用戶的沉浸感。因此，虛擬場(chǎng)景中的漫游，必須能夠及時(shí)地判斷虛擬場(chǎng)景中物體之間是否發(fā)生碰撞以及碰撞后的響應(yīng)。

物理引擎在很多情況下沒(méi)辦法判斷兩個(gè)物體是否發(fā)生碰撞，原因是前一幀和后一幀都在未發(fā)生碰撞的狀態(tài)下，物理引擎當(dāng)作什么也沒(méi)有發(fā)生，于是就出現(xiàn)了穿越。在本文中，為了進(jìn)行碰撞檢測(cè)，需要給相機(jī)和墻都加上剛體Rigid和包圍盒Collider，創(chuàng)建剛體包圍盒，即BoxCollider，然后進(jìn)行測(cè)試。而Unity3D中的第一人稱控制器First Person Controller自身已帶有碰撞檢測(cè)。

3 主要模塊分析設(shè)計(jì)和實(shí)現(xiàn)

3.1 用戶登錄注冊(cè)模塊

用戶可以在網(wǎng)站首頁(yè)的登錄框中輸入用戶名和密碼實(shí)行登錄，當(dāng)輸入的用戶名和密碼正確則可成功登錄，否則將提示登錄失敗，可重新登錄。如未開通賬戶則注冊(cè)相應(yīng)用戶后即可登錄系統(tǒng)。輸入相應(yīng)的賬戶和密碼，按下登錄按鈕后，將啟動(dòng)登錄驗(yàn)證程序。登錄成功，即可進(jìn)行不同的操作。用戶登錄注冊(cè)活動(dòng)圖如圖5所示。

3.2 會(huì)員信息管理模塊

顧客進(jìn)入網(wǎng)站首頁(yè)登錄后，點(diǎn)擊“會(huì)員中心”即可進(jìn)入“會(huì)員中心”頁(yè)面。這里為用戶提供了用戶注冊(cè)信息的查看和修改功能，即用戶密碼的修改、購(gòu)物車的查看、訂單的查看等。會(huì)員信息管理時(shí)序如圖6所示。

3.3 商品購(gòu)物模塊

用戶注冊(cè)后可以在網(wǎng)站上瀏覽各類商品，可將喜歡的物品放入購(gòu)物車，進(jìn)行下訂單以及支付操作，滿足顧客的購(gòu)物樂(lè)趣。當(dāng)用戶購(gòu)物后，網(wǎng)站將對(duì)訂單進(jìn)行審核并根據(jù)用戶填寫的訂單，在短期內(nèi)將商品寄出，同時(shí)用戶在下訂單后可進(jìn)入自己的個(gè)人中心對(duì)訂單的處理情況進(jìn)行實(shí)時(shí)查詢。購(gòu)物時(shí)序圖如圖7所示。

3.4 商品管理模塊

賣方可以登錄商品管理模塊，可以對(duì)自己鋪下的商品進(jìn)行管理。商品管理時(shí)序圖如圖8所示。

3.5 3D步行街和商場(chǎng)

3.6 3D家具

4 結(jié)束語(yǔ)

本文設(shè)計(jì)了一個(gè)三維的虛擬家具商城的商務(wù)網(wǎng)站，討論了利用Unity 3D并融于系統(tǒng)的架構(gòu)角色設(shè)計(jì)方案，詳細(xì)分析了系統(tǒng)流程并進(jìn)行了相應(yīng)的建模分析。該系統(tǒng)的設(shè)計(jì)方案參加了2013年浙江省“網(wǎng)上輕紡城杯”第八屆大學(xué)生電子商務(wù)競(jìng)賽并獲得二等獎(jiǎng)。下一步，我們將深入研究家具模型的美觀性、便捷性，以及網(wǎng)上支付的多樣性、安全性。

參考文獻(xiàn)：

[1] 鄭超.中國(guó)家具市場(chǎng)現(xiàn)狀分析及營(yíng)銷策略研究[D].天津大學(xué)，2006.

[2] 中國(guó)企業(yè)報(bào). 中國(guó)家具步入良性軌道 年產(chǎn)值破萬(wàn)億[OL].http：//jiaju.sina.com.cn/news/2012-05-08/090057147744.shtml，2012-05-08

[3] 徐勇.基于Web3D技術(shù)的電子商務(wù)應(yīng)用研究[D].浙江工商大學(xué)，2007.

[4] （美）Michelle Menard，（譯）史曉明，李強(qiáng).Unity游戲開發(fā)實(shí)戰(zhàn)[M].機(jī)械工業(yè)出版社，2012.

[5] 王松樵，許淑華.基于Web3D的虛擬五金商城的設(shè)計(jì)與實(shí)現(xiàn)[J].計(jì)算機(jī)時(shí)代，2012.10：42-45