朱淑琴，于達(dá)，王海峰，田淼

（北京聯(lián)合大學(xué)師范學(xué)院，北京 100011)

3D虛擬展示平臺(tái)的設(shè)計(jì)與實(shí)現(xiàn)

朱淑琴，于達(dá)，王海峰，田淼

（北京聯(lián)合大學(xué)師范學(xué)院，北京 100011)

基于實(shí)際需求，采用3ds Max三維模型制作工具，創(chuàng)建一套汽車和汽車用品模型，并將交互技術(shù)應(yīng)用在虛擬展示平臺(tái)中，實(shí)現(xiàn)基于Web的3D汽車用品展示系統(tǒng)，系統(tǒng)分為單個(gè)物品展示模塊和人機(jī)互動(dòng)展示模塊。能夠360度瀏覽查看物品，對(duì)物品進(jìn)行旋轉(zhuǎn)、縮放、移動(dòng)物品和更改物品顏色，并且可以互動(dòng)操作將物品擺放在虛擬汽車模型上。

2016年北京高等學(xué)校高水平人才交叉培養(yǎng)“實(shí)培計(jì)劃”項(xiàng)目（201號(hào) 和127號(hào)）

0 引言

虛擬現(xiàn)實(shí)技術(shù)（Virtual Reality），是20世紀(jì)末剛發(fā)展起來的高新技術(shù)，它涉及到眾多學(xué)科。虛擬現(xiàn)實(shí)技術(shù)利用計(jì)算機(jī)創(chuàng)建一個(gè)虛擬環(huán)境，并通過視覺、觸覺、聽覺、味覺、嗅覺等作用，使用戶產(chǎn)生與現(xiàn)實(shí)中一樣的感覺，從而讓用戶達(dá)到身臨其境的感受，并能夠?qū)崿F(xiàn)用戶與該環(huán)境直接進(jìn)行交互[1-2]。

許多行業(yè)把虛擬展示系統(tǒng)作為一種電子商務(wù)方案，以便能夠給顧客更好的體驗(yàn)[3-5]。例如汽車行業(yè)，汽車行業(yè)虛擬展示可謂是各種商業(yè)虛擬展示中的佼佼者。隨著虛擬現(xiàn)實(shí)系統(tǒng)的發(fā)展，各種汽車展示系統(tǒng)應(yīng)運(yùn)而生，但這些汽車展示系統(tǒng)無法與真實(shí)的汽車展示相比，只局限于模型的展示，沒有交互功能，使得觀眾無法了解汽車的性能與特點(diǎn)。虛擬展示技術(shù)的發(fā)展為網(wǎng)上汽車虛擬交互展示提供了可能，利用虛擬展示技術(shù)可以直觀、高效地構(gòu)建交互性和沉浸性都良好的虛擬展示系統(tǒng)。

本文基于汽車用戶實(shí)際需求，構(gòu)建汽車用品三維模型，將交互技術(shù)應(yīng)用到汽車用品展示系統(tǒng)中?；赪eb3D制作的3D汽車展示平臺(tái)，使顧客更容易通過互聯(lián)網(wǎng)接觸到產(chǎn)品，更好地了解產(chǎn)品的各項(xiàng)性能。

1 系統(tǒng)功能劃分

本系統(tǒng)中分為兩大模塊，分別是：?jiǎn)蝹€(gè)物品展示模塊和人機(jī)互動(dòng)展示模塊。單個(gè)物品展示模塊中，實(shí)現(xiàn)了汽車物品的展示、顏色更換和物體移動(dòng)、旋轉(zhuǎn)、縮放功能；人機(jī)互動(dòng)展示模塊中，實(shí)現(xiàn)了手動(dòng)和自動(dòng)擺放汽車物品，對(duì)擺放成功的物體進(jìn)行顏色更換功能。

（1）單個(gè)物品展示模塊

本模塊功能分為物品展示按鈕和更換物品顏色兩部分。通過觸發(fā)Cult3D中的事件，實(shí)現(xiàn)鼠標(biāo)控制物品或鼠標(biāo)點(diǎn)擊展示按鈕控制物品360度旋轉(zhuǎn)的功能。而更換物品顏色功能則是利用Java語言實(shí)現(xiàn)。例如：網(wǎng)頁右側(cè)為可選物品，并且在物品下面設(shè)有 “可更換的顏色”一欄，這一欄下顯示可更換的物品顏色塊，點(diǎn)擊就能更換物品顏色。更換顏色下方有如下按鈕包括：四個(gè)方向旋轉(zhuǎn)按鈕、放大和縮小按鈕。

（2）人機(jī)互動(dòng)展示模塊

本模塊功能分為手動(dòng)擺放物品、自動(dòng)擺放物品和鼠標(biāo)對(duì)視圖操作三部分。自動(dòng)擺放物品的功能是，在用戶點(diǎn)擊“自動(dòng)擺放”按鈕時(shí)，系統(tǒng)自動(dòng)把物品擺放到車上的正確位置。手動(dòng)擺放物品所實(shí)現(xiàn)的功能主要是，在用戶選擇“手動(dòng)擺放”時(shí)，在下拉列表中選擇要擺放的物品。選擇后，該物品將會(huì)顯示在視圖區(qū)，根據(jù)系統(tǒng)所設(shè)置的移動(dòng)物品的方式移動(dòng)物品，擺放到用戶認(rèn)為正確的位置。鼠標(biāo)對(duì)視圖操作所實(shí)現(xiàn)的主要功能是：利用鼠標(biāo)左、中、右鍵來控制視圖的旋轉(zhuǎn)、移動(dòng)、放大或縮小。

2 三維對(duì)象建模

本系統(tǒng)主要采用第三方建模工具3ds Max對(duì)汽車及汽車物品進(jìn)行建模，通過Cult3D For MAX導(dǎo)出插件，將三維模型導(dǎo)出為C3D格式，再利用Cult3D De鄄signer將C3D模型導(dǎo)入，并實(shí)現(xiàn)交互功能。

在Cult3D中，Cult3D Designer軟件是不支持模型制作的，所以一切Cult3D支持的模型文件，都必須使用其他三維軟件進(jìn)行建模，之后導(dǎo)出成Cult3D支持的格式：*.C3D，才能被Cult3D使用。本文選擇使用了3ds Max軟件對(duì)汽車進(jìn)行建模操作，本文創(chuàng)建的模型分為汽車及汽車用品模型，它們分別是：汽車模型、剎車燈模型、行李箱模型、行李架模型、雨眉模型、前保險(xiǎn)杠模型、后保險(xiǎn)杠模型、后車燈模型、前車燈模型、倒車鏡模型、排氣管模型、側(cè)保險(xiǎn)杠模型和發(fā)動(dòng)機(jī)模型。

3 虛擬展示平臺(tái)基本交互的具體實(shí)現(xiàn)

在物品展示中，用戶可以對(duì)汽車用品進(jìn)行放大、縮小、移動(dòng)、旋轉(zhuǎn)和更換顏色5個(gè)功能。本文利用Cult3D中虛擬體，把各個(gè)物品全部放在同一虛擬體下，作為虛擬體的子物體，設(shè)置功能時(shí)只需要對(duì)該虛擬體進(jìn)行操作即可。

（1）移動(dòng)操作的實(shí)現(xiàn)

Step1：在Cult3D Designer中建立一個(gè)Dummy虛擬體，把汽車所有的物品模型拖到Dummy中，形成Dummy的子物體。如圖1所示：

Step2：建立四個(gè) Manual事件，并分別取名為moveA，moveB，moveC，moveD，再建立四個(gè)Translation XYZ Action事件，并與分別與四個(gè)manual和Dummy

進(jìn)行連接，并設(shè)置其參數(shù)：讓其Z軸進(jìn)行1個(gè)單位的移動(dòng)。其它三個(gè)節(jié)點(diǎn)只是軸向不同，這里不再重復(fù)介紹。如圖2所示，設(shè)置完成后的移動(dòng)操作事件，如圖3所示。

Step3：通過網(wǎng)頁中的JavaScript代碼觸發(fā)這四個(gè)事件，即可完成相應(yīng)移動(dòng)的操作。移動(dòng)操作實(shí)現(xiàn)如下：

圖1 所有物體為 Dummy的子物體

：

圖2 設(shè)置Z軸正方向移動(dòng)

圖3 移動(dòng)視角的事件

（2）旋轉(zhuǎn)操作的實(shí)現(xiàn)

Step1：建立四個(gè)Manual事件，分別取名為：zhuan鄄gA，zhuangB，zhuangC，zhangD，再建立四個(gè)旋轉(zhuǎn)事件，把四個(gè)旋轉(zhuǎn)事件分別與四個(gè)Manual事件和Dummy進(jìn)行連接 （如圖 4所示），并設(shè)置旋轉(zhuǎn)事件的參數(shù)。把zhuangA的Y軸設(shè)置成10個(gè)單位的旋轉(zhuǎn)，其他旋轉(zhuǎn)事件只是旋轉(zhuǎn)方向不同，設(shè)置方法一樣。如圖5所示。

Step2：通過網(wǎng)頁中的JavaScript代碼觸發(fā)Manual事件。旋轉(zhuǎn)功能的部分的實(shí)現(xiàn)：

圖4 設(shè)置并連接好的旋轉(zhuǎn)事件

圖5 設(shè)置旋轉(zhuǎn)指定軸向和旋轉(zhuǎn)單位

（3）縮放操作的實(shí)現(xiàn)

Step1：建立兩個(gè)Manual事件，分別命名為：fangda和shuoxiao，再建立兩個(gè)Scale XYZ Action事件，并分別與Maual事件相連接（如圖6所示），通過雙擊Scale XYZ Action事件來打來設(shè)置面板，并設(shè)置好放大和縮小的參數(shù)，如圖7所示：

圖6 設(shè)置好后的縮放事件

圖7 設(shè)置放大事件的參數(shù)

Step2：為Manual事件編寫觸發(fā)程序和縮放功能實(shí)現(xiàn)：

function fangda（）{if（!Cult3D.triggerAction（"fangda"））{ts（）;}}//放大

function shuoxiao（）{if（!Cult3D.triggerAction（"shuoxiao"））{ts（）;}}//縮小

4 結(jié)語

本文重點(diǎn)研究交互式虛擬現(xiàn)實(shí)技術(shù)，并把研究成果應(yīng)用于實(shí)踐，完成了對(duì)3D汽車用品展示系統(tǒng)的開發(fā)和設(shè)計(jì)工作。而3D汽車用品展示系統(tǒng)的實(shí)現(xiàn)則是借助Cult3D Designer軟件來完成。該系統(tǒng)針對(duì)Cult3D的技術(shù)特點(diǎn)，從對(duì)模型的移動(dòng)、旋轉(zhuǎn)、縮放、擺放和顏色更換這五個(gè)功能實(shí)現(xiàn)進(jìn)行研究，充分證明了Cult3D在三維虛擬展示方面的優(yōu)越性、靈活性、方便性。

參考文獻(xiàn)：

[1]楊麗英.基于VR技術(shù)的3D展廳交互系統(tǒng)研究[J].現(xiàn)代計(jì)算機(jī)（專業(yè)版）,2016,（36）:63-66.

[2]徐敏,童強(qiáng).一種基于Unity3D+Vuforia的增強(qiáng)現(xiàn)實(shí)交互App的開發(fā)[J].現(xiàn)代計(jì)算機(jī)（專業(yè)版）,2016,（12）:71-75.

[3]游麗.虛擬現(xiàn)實(shí)技術(shù)在建筑設(shè)計(jì)教學(xué)領(lǐng)域的應(yīng)用[D].四川師范大學(xué)，2010.

[4]孫興奇.基于虛擬現(xiàn)實(shí)技術(shù)的Web3D作品制作淺談[J].科技創(chuàng)新導(dǎo)報(bào)，2010,12.

[5]李世國(guó)等.基于Acrobat3D的產(chǎn)品虛擬展示設(shè)計(jì).機(jī)械設(shè)計(jì)與制造[J]，2007,7.

Design and Im p lementation of 3D Virtual Disp lay System

ZHU Shu-qin，YU Da，WANG Hai-feng，TIAN Miao
（Teachers'College of Beijing Union University,Beijing 100011）

Based on the actual needs,uses 3ds Max tool to create a set of automotive suppliesmodel,and adopts interactive technology to develop virtual exhibition system about automotive supplies.The system is divided into commodity display module and man-machine interactive displaymodule.Through this system,we can view,rotate,zoom,move items and change the color of items.In addition,we can operate in an interactive way to put items on the virtual carmodels.

朱淑琴（1978-），女，講師，碩士，研究方向?yàn)樘摂M現(xiàn)實(shí)技術(shù)

2017-04-21

2017-04-30

1007-1423（2017）13-0067-04

10.3969/j.issn.1007-1423.2017.13.016

虛擬現(xiàn)實(shí)；3D模型；交互技術(shù)；Web3D

于達(dá)（1995-），男，本科

王海峰（1995-），男，本科

Virtual Reality;3D Model;Interactive Technology;Web3D