基于網(wǎng)絡(luò)的產(chǎn)品交互虛擬實(shí)驗(yàn)室建設(shè)與發(fā)布

閻漢生, 肖正濤, 龍宇輝, 張翠婷, 龍 瑤

(1. 廣東工貿(mào)職業(yè)技術(shù)學(xué)院 機(jī)械工程系, 廣東 廣州 510510；2. 華南理工大學(xué) 機(jī)械與汽車工程學(xué)院, 廣東 廣州 510640)

基于網(wǎng)絡(luò)的產(chǎn)品交互虛擬實(shí)驗(yàn)室建設(shè)與發(fā)布

閻漢生1,2, 肖正濤1, 龍宇輝1, 張翠婷1, 龍 瑤1

(1. 廣東工貿(mào)職業(yè)技術(shù)學(xué)院 機(jī)械工程系, 廣東 廣州 510510；2. 華南理工大學(xué) 機(jī)械與汽車工程學(xué)院, 廣東 廣州 510640)

利用Unity3D和互聯(lián)網(wǎng)技術(shù)開發(fā)了一個(gè)用于產(chǎn)品虛擬展示的網(wǎng)上三維交互平臺。使用Creo、Rhino等主流三維建模軟件構(gòu)建了若干個(gè)典型產(chǎn)品模型,用C#語言編寫動(dòng)作腳本，實(shí)現(xiàn)了交互操作,合理配置IIS7.0服務(wù)器并實(shí)現(xiàn)內(nèi)網(wǎng)穿透功能,在B/S結(jié)構(gòu)下建設(shè)了平臺發(fā)布網(wǎng)站。該平臺作為學(xué)習(xí)平臺,可供用戶自由瀏覽和拆裝產(chǎn)品三維結(jié)構(gòu)模型,學(xué)習(xí)產(chǎn)品結(jié)構(gòu)和工藝知識,也可作為廣告平臺為企業(yè)和商家宣傳產(chǎn)品服務(wù)。

虛擬實(shí)驗(yàn)室； 產(chǎn)品虛擬展示； Unity3D

隨著我國經(jīng)濟(jì)、社會(huì)的迅速發(fā)展和高等教育改革的深入,不少高校和職業(yè)院校開設(shè)了機(jī)械設(shè)計(jì)、產(chǎn)品設(shè)計(jì)等專業(yè)的產(chǎn)品結(jié)構(gòu)認(rèn)知、機(jī)械零件拆裝等實(shí)驗(yàn)項(xiàng)目,但往往出現(xiàn)產(chǎn)品模型無法滿足教學(xué)需求的情況[1]。進(jìn)入21世紀(jì)以來,虛擬現(xiàn)實(shí)技術(shù)得以快速發(fā)展,利用虛擬現(xiàn)實(shí)技術(shù)進(jìn)行產(chǎn)品展示甚至交互操作,已成為目前的技術(shù)熱點(diǎn)之一。

虛擬現(xiàn)實(shí)(virtual reality,VR)技術(shù)是計(jì)算機(jī)仿真技術(shù)的一個(gè)重要分支,它依靠計(jì)算機(jī)軟件創(chuàng)建一種虛擬環(huán)境,以動(dòng)態(tài)三維視聽場景顯示要表達(dá)對象的多種信息。用戶可以獲得交互操作的體驗(yàn),具有浸沉感、交互性和構(gòu)想性[2]。目前流行的實(shí)現(xiàn)虛擬交互的技術(shù)之一是Unity3D,國內(nèi)外已有多家高校和企業(yè)開發(fā)了基于Unity3D的交互實(shí)現(xiàn)方案。例如在國家“863”計(jì)劃項(xiàng)目中,北京理工大學(xué)開發(fā)了基于Unity3D的增強(qiáng)現(xiàn)實(shí)光學(xué)實(shí)驗(yàn)平臺[3]；臨礦集團(tuán)研究人員進(jìn)行了船舶液壓方面的仿真[4]；騰訊更是采用Unity3D做出了《天天飛車》這樣經(jīng)典的游戲[5]。筆者針對機(jī)械設(shè)計(jì)類認(rèn)知實(shí)驗(yàn)設(shè)備缺乏的問題,對展示機(jī)械結(jié)構(gòu)和日用產(chǎn)品的交互平臺及其在互聯(lián)網(wǎng)上發(fā)布問題進(jìn)行了研究。

1 三維交互平臺的整體結(jié)構(gòu)和開發(fā)流程

該展示機(jī)械結(jié)構(gòu)和日用產(chǎn)品的交互平臺被命名為廣東工貿(mào)虛擬實(shí)驗(yàn)室,最終在互聯(lián)網(wǎng)上發(fā)布。它是以B/S形式運(yùn)行的一個(gè)網(wǎng)站。該實(shí)驗(yàn)室的主要內(nèi)容包括實(shí)驗(yàn)室簡介、產(chǎn)品展示、新聞資訊、登錄、友情鏈接等模塊。產(chǎn)品展示模塊是實(shí)驗(yàn)室最主要的模塊,其下分為家電產(chǎn)品結(jié)構(gòu)認(rèn)知和機(jī)械產(chǎn)品結(jié)構(gòu)認(rèn)知兩個(gè)部分。圖1是平臺的整體結(jié)構(gòu)。

圖1 平臺整體結(jié)構(gòu)圖

平臺的開發(fā)流程主要是：篩選合適的實(shí)物模型—進(jìn)行拆解測繪—整理產(chǎn)品信息資料—在Rhino或Creo中進(jìn)行零件建模和整體裝配—通過3ds MAX軟件進(jìn)行預(yù)處理—生成FBX中間文件—導(dǎo)入U(xiǎn)nity3D環(huán)境編輯交互腳本和窗口界面—生成可執(zhí)行的交互文件—嵌入到已完成的產(chǎn)品展示網(wǎng)頁—形成完整的交互平臺網(wǎng)站[6]。開發(fā)流程如圖2所示：

圖2 平臺開發(fā)流程圖

虛擬交互平臺開發(fā)的核心技術(shù)是在Unity3D編輯器中生成三維交互文件。

2 Unity3D交互文件的制作

2.1 Unity3D模塊制作流程

在Unity3D環(huán)境下,制作交互文件的基本流程如圖3所示。不論具體產(chǎn)品模型是什么,其交互文件的制作流程是基本相同的。本研究已制作了掛燙機(jī)、榨汁機(jī)、加濕器、減速器、注塑模等多個(gè)產(chǎn)品模型。

圖3 交互文件制作流程圖

2.2 導(dǎo)入模型并搭建場景

Rhino是工業(yè)設(shè)計(jì)專業(yè)學(xué)生常用的建模軟件；Creo是機(jī)械設(shè)計(jì)與制造專業(yè)學(xué)生常用的建模軟件。本文所建平臺主要面向這兩個(gè)專業(yè)使用。經(jīng)測試,Rhino和Creo生成的三維模型均可在Unity3D里使用,但方向不易控制,所以需要先在3ds MAX軟件中調(diào)整好Z軸方向后存為fbx格式文件,再導(dǎo)入U(xiǎn)nity3D才方便使用。

在Unity3D中啟用項(xiàng)目面板,找到Assets目錄,創(chuàng)建模型文件夾,然后將guatangji.fbx文件加入其中。同樣，可以繼續(xù)創(chuàng)建其他資源文件夾,放入和本模型交互過程有關(guān)的多媒體文件,包括聲音、音效、貼圖、圖片等。創(chuàng)建場景的方法是點(diǎn)擊在文件選單下的NewScene命令，然后找到模型文件夾里的模型文件,用鼠標(biāo)拖放到當(dāng)前場景窗口中即可。這時(shí)在Unity3D界面下的game窗口可以實(shí)時(shí)觀察模型,并可做簡單的旋轉(zhuǎn)、縮放、平移操作,在層級面板里可以管理所有當(dāng)前場景中的模型。

2.3 界面設(shè)計(jì)

目前主要的方法是采用NGUI插件來創(chuàng)建界面和按鈕。NGUI是一款基于C#編寫的免費(fèi)Unity3D插件,含有豐富、易用的控件,簡化了編碼工作量[8]。使用NGUI的基本方法是在NGUI下選擇2D UI創(chuàng)建UI根目錄,在此根目錄下包含其他界面元素分支,例如按鈕、界面等。在UIROOT中可以設(shè)置和縮放界面的尺寸；在UIPANEL腳本里,可以調(diào)整界面的透明度、深度等參數(shù)。

以“蒸汽掛燙機(jī)虛擬裝配”界面的按鈕設(shè)計(jì)為例,在場景→創(chuàng)建→子圖形命令下創(chuàng)建按鈕圖片,命名為Button_yanshi。在檢測面板中,可選擇自定義圖片替換默認(rèn)圖片,使按鈕外表更美觀。為該按鈕的創(chuàng)建→標(biāo)簽→子對象命令添加文本,可更改按鈕顯示文字為“演示”。依次創(chuàng)建其他界面元素,所得界面如圖4所示。

圖4 掛燙機(jī)虛擬拆裝UI設(shè)計(jì)

點(diǎn)擊按鈕后的動(dòng)作功能,要通過編寫C#腳本實(shí)現(xiàn)不同的場景切換，具體是通過調(diào)用OnClick()函數(shù)對鼠標(biāo)點(diǎn)擊動(dòng)作進(jìn)行監(jiān)控。Application.LoadLevel()和Application.Quit()函數(shù)可分別實(shí)現(xiàn)加載某場景和退出當(dāng)前場景的功能。使腳本和按鈕關(guān)聯(lián)也很簡單,只需用鼠標(biāo)把腳本文件拖放到當(dāng)前場景攝像機(jī)上即可。

2.4 視角控制

在拆解和詳解場景中都有對產(chǎn)品模型的交互操作,此時(shí)觀察視角要能旋轉(zhuǎn)、縮放、平移,用戶才能有較好的操作感和視覺體驗(yàn)[9]。對于學(xué)習(xí)產(chǎn)品結(jié)構(gòu)知識來說,通過視角的自由變換才能更細(xì)致地觀察產(chǎn)品的結(jié)構(gòu)細(xì)節(jié)；對于商品展示而言,用戶通過自由觀察才能全面獲得該產(chǎn)品的信息。Unity3D自帶的第一人稱和第三人稱腳本,能實(shí)現(xiàn)對攝像機(jī)視角的控制,適合作為游戲視野,但由于是模擬人眼的觀察視角,并不太適合本平臺的視角控制要求,故在此不采用。

具體方法是：創(chuàng)建CameraControl腳本,將腳本拖放至攝像機(jī)對象加載腳本。在場景空白處按下鼠標(biāo)右鍵并移動(dòng)即可旋轉(zhuǎn)視角；按下鼠標(biāo)中鍵并移動(dòng)可平移視角；滾動(dòng)鼠標(biāo)中鍵可實(shí)現(xiàn)縮放的功能。以旋轉(zhuǎn)視角為例,部分核心代碼如下：

if(Input.GetMouseButton(1) ){ //檢測鼠標(biāo)右鍵按下以及鼠標(biāo)位移坐標(biāo) xDeg += Input.GetAxis(″Mouse X″) * xSpeed * 0.02f; yDeg -= Input.GetAxis(″Mouse Y″) * ySpeed * 0.02f; yDeg = ClampAngle(yDeg,yMinLimit,yMaxLimit); //計(jì)算鼠標(biāo)移動(dòng)的夾角 desiredRotation = Quaternion.Euler(yDeg,xDeg,0); //設(shè)置攝像機(jī)視角跟隨鼠標(biāo)移動(dòng) currentRotation = transform.rotation; rotation=Quaternion.Lerp(currentRotation,desiredRotation,Time.deltaTime*zoomDampening); transform.rotation = rotation;}

2.5 其他操作

在實(shí)際操作中,交互類型還有許多,還包括單擊幀動(dòng)畫、拖曳動(dòng)作、零件高亮顯示、各種提示信息板等。圖5所示為掛燙機(jī)虛擬拆卸前后的效果。

圖5 掛燙機(jī)拆卸過程截圖

2.6 生成交互文件

Unity3D之所以發(fā)展如此迅速,其廣泛的平臺適應(yīng)性功不可沒。在File→BuildSettings里可選擇與交互文件相適應(yīng)的平臺,包括WebPlayer、PC，Mac & Linux Standalone、IOS、Android等[10]。本文選擇WebPlayer發(fā)布網(wǎng)頁交互文件,進(jìn)一步勾選“離線部署”(offline deployment)后生成離線文件。在Scenes In Build中加入所有場景文件,點(diǎn)擊“編譯”(Build)打包發(fā)布網(wǎng)頁交互文件。將這些網(wǎng)頁文件嵌入已做好的產(chǎn)品交互平臺網(wǎng)頁中,即可在瀏覽器中訪問和操作。圖6為交互平臺網(wǎng)站——廣東工貿(mào)虛擬實(shí)驗(yàn)室的運(yùn)行截圖。為滿足在移動(dòng)端瀏覽網(wǎng)站的需求,筆者另外制作了適應(yīng)手機(jī)界面的輕量化網(wǎng)頁[11]。

圖6 網(wǎng)絡(luò)三維交互平臺截圖

3 交互平臺網(wǎng)站的配置與發(fā)布

3.1 網(wǎng)站的配置

虛擬交互的特點(diǎn)之一是脫離本地限制,能在互聯(lián)網(wǎng)上運(yùn)行,供廣大網(wǎng)絡(luò)客戶自由瀏覽。三維產(chǎn)品交互虛擬實(shí)驗(yàn)平臺不能僅在本地電腦上打開html文件運(yùn)行,還需要進(jìn)行網(wǎng)絡(luò)配置,發(fā)布在互聯(lián)網(wǎng)上。網(wǎng)站采用B/S模式,使用微軟的IIS7.0配置服務(wù)器。

需要自行配置服務(wù)器,而不能采用一般的教學(xué)論壇或免費(fèi)空間服務(wù)器的主要原因,在于絕大多數(shù)高校的網(wǎng)絡(luò)教學(xué)平臺是委托第三方公司開發(fā)的、功能已經(jīng)固化的系統(tǒng)。例如筆者所在單位的得實(shí)平臺[12],它允許建立的教學(xué)網(wǎng)站都是模板化的,能上傳的文件類型和訪問鏈接關(guān)系也都是固定的,而Unity3D中后綴為js的文件，Unity3D是不允許上傳的,也不能自定義訪問路徑。免費(fèi)空間服務(wù)器可以通過ftp協(xié)議上傳完整的網(wǎng)站文件,但通常服務(wù)器端主機(jī)的MIME沒有特別修改時(shí),對Unity3D格式文件的是無法識別的,也無法響應(yīng)。所以必須自行配置服務(wù)器,實(shí)現(xiàn)以局域網(wǎng)網(wǎng)站的形式正常訪問。以筆者使用的Win7+IIS7.0為例,具體操作如下：

(1) 執(zhí)行Windows的“控制面板—程序和功能—打開或關(guān)閉Windows功能—添加IIS信息服務(wù)”,把IIS里面的小項(xiàng)都打上“√”。

(2) 在“控制面板—管理工具”里,打開IIS管理器。點(diǎn)擊左側(cè)的“網(wǎng)站—default web site”,在其右側(cè)的各種屬性中,可以配置其IP、端口(例如80、1234等)、首頁路徑、網(wǎng)站名稱等信息，把整個(gè)Unity3D相關(guān)的網(wǎng)站文件都復(fù)制到“首頁路徑wwwroot”文件夾內(nèi)。此處也可以把首頁路徑和整個(gè)網(wǎng)站文件都設(shè)置到非系統(tǒng)盤的分區(qū)。

(3) 點(diǎn)擊左側(cè)最高層的“主機(jī)名稱”,在其中部的IIS,“MIME類型”中添加“unity3d”和“application/octet-stream”。

(4) 在“Windows防火墻”的“高級設(shè)置”中,點(diǎn)擊“入站規(guī)則”,右側(cè)可“新建規(guī)則”,按提示操作,新增名稱為“unity3d”、端口為“1234(比較特殊、安全)”的允許訪問規(guī)則。此時(shí),防火墻為正常開啟狀態(tài)，可以訪問http://localhost:1234或者h(yuǎn)ttp://192.168.0.110:1234網(wǎng)頁,其中的IP為本機(jī)IP。到此，實(shí)現(xiàn)了局域網(wǎng)的B/S訪問,可在頁面內(nèi)正常操作Unity3D交互文件。

3.2 發(fā)布在互聯(lián)網(wǎng)上

要將設(shè)在個(gè)人電腦上的IIS服務(wù)器發(fā)布到互聯(lián)網(wǎng)上,需要把本機(jī)端口和廣域網(wǎng)域名進(jìn)行綁定。這里面臨兩個(gè)問題：一是廣域網(wǎng)域名通常不是免費(fèi)的,二是個(gè)人電腦的IP地址不是固定的[13]。筆者經(jīng)過反復(fù)研究,找到一個(gè)可行的解決方案。

首先在“花生殼”網(wǎng)站注冊賬號,可獲得一個(gè)免費(fèi)域名。筆者注冊了一個(gè)自定義的二級域名“gdgmvrlab.imwork.net”,然后在網(wǎng)上下載一個(gè)“花生殼內(nèi)網(wǎng)穿透免費(fèi)版”(HskDDNS_3.2.0.12190.exe),其使用是免費(fèi)的,但需要少量的首次認(rèn)證費(fèi)。在這個(gè)內(nèi)網(wǎng)穿透軟件的管理中,新建映射,把免費(fèi)域名和IIS服務(wù)器所在的主機(jī)端口映射起來即可。這樣,通過免費(fèi)域名即可訪問前文所示的局域網(wǎng)IP和端口。

本方案的優(yōu)點(diǎn)是可以免費(fèi)通過廣域網(wǎng)網(wǎng)址訪問虛擬交互平臺,并可正常操作Unity3D文件；缺點(diǎn)是作為服務(wù)器的個(gè)人電腦要開機(jī)才能訪問該網(wǎng)站。另外，內(nèi)網(wǎng)穿透免費(fèi)版的單月流量目前限制在1 GB,致使網(wǎng)站只能試用,暫不能大規(guī)模推廣應(yīng)用。最終解決方法還是要靠單位網(wǎng)絡(luò)中心積極配合,開放一定的服務(wù)器配置權(quán)限,以解決開機(jī)時(shí)間和訪問流量的限制。

4 結(jié)語

以Unity3D交互編程為核心,綜合了零件測繪、三維建模、網(wǎng)站制作與發(fā)布等先進(jìn)技術(shù),開發(fā)了一個(gè)可在互聯(lián)網(wǎng)上瀏覽并交互操作的平臺。隨著繼續(xù)增加產(chǎn)品實(shí)例,該平臺在進(jìn)行高校機(jī)械產(chǎn)品結(jié)構(gòu)認(rèn)知虛擬實(shí)驗(yàn)和企業(yè)新產(chǎn)品展示方面可以起到良好的作用,具有較好的社會(huì)意義和經(jīng)濟(jì)價(jià)值,也為相關(guān)虛擬交互實(shí)驗(yàn)的開發(fā)探索了一條有益的途徑。

References)

[1] 聶學(xué)俊,杜敏杰.機(jī)械工程控制基礎(chǔ)虛擬實(shí)驗(yàn)平臺開發(fā)[J].中國現(xiàn)代教育裝備,2016(8):4-6.

[2] 王佳婧.虛擬實(shí)驗(yàn)開發(fā)與運(yùn)用研究[J].軟件導(dǎo)刊,2013(8):190-192.

[3] 陳澤嬋,陳靖,嚴(yán)雷,等.基于Unity3D的移動(dòng)增強(qiáng)現(xiàn)實(shí)光學(xué)實(shí)驗(yàn)平臺[J].計(jì)算機(jī)應(yīng)用,2015(12):194-199.

[4] 呂文梅,宋代廣.基于Unity3D與3Dmax的虛擬船舶液壓系統(tǒng)三維模型展示[J].軟件導(dǎo)刊,2014(6):74-76.

[5] 作者不詳.騰訊游戲分享匯：天天飛車六大研發(fā)經(jīng)驗(yàn)[EB/OL].(2014-08-20)[2016-10-18].http://tieba.baidu.com/p/3242901328.

[6] 褚晶瑩.基于Unity3D技術(shù)的VR展臺的設(shè)計(jì)與實(shí)現(xiàn)[D].長春：吉林大學(xué),2016：22-25.

[7] Mohov S. Practical Game Design with Unity and Playmaker[M].Birmingham：Packt Publishing,2013.

[8] 相茂英,馬純永,韓勇,等.基于Unity3D的化工設(shè)備虛擬培訓(xùn)系統(tǒng)研究[J].計(jì)算機(jī)技術(shù)與發(fā)展,2014(7):196-200.

[9] 劉楊,錢稷,管志翰,等.基于Unity3D的三維虛擬桃樹整形修剪系統(tǒng)的應(yīng)用研究[J].數(shù)字技術(shù)與應(yīng)用,2015(7):80.

[10] 張典華,陳一民,李磊.基于Unity3D的多平臺三維空戰(zhàn)游戲的開發(fā)[J].計(jì)算機(jī)技術(shù)與發(fā)展,2014(1):192-195.

[11] 懷志和.Android移動(dòng)網(wǎng)站開發(fā)詳解[M].北京：清華大學(xué)出版社,2013.

[12] 楊香花,譚艷薇,鄭許冰.基于得實(shí)網(wǎng)絡(luò)教學(xué)平臺的《旅游電子商務(wù)》網(wǎng)絡(luò)課程建設(shè)與實(shí)踐[J].吉林廣播電視大學(xué)學(xué)報(bào),2013(8):20-22.

[13] 陳學(xué)平,熊偉.中小型網(wǎng)站建設(shè)與管理[M].3版.北京：電子工業(yè)出版社,2014.

Building and publishing virtual laboratory for products interaction based on network

Yan Hansheng1,2, Xiao Zhengtao1, Long Yuhui1, Zhang Cuiting1, Long Yao1

(1. Department of Mechanical Engineering, Guangdong College of Industry and Commerce,Guangzhou 510510, China；2. School of Mechanical and Automotive Engineering,South China University of Technology,Guangzhou 510640, China)

Aiming at the lack of physical product model in colleges and enterprises,an Internet 3D interactive platform for virtual exhibition of product is developed by using Unity3D and network technology. Several typical product models are built by mainstream 3D modeling software,such as Creo and Rhino. Combining C# to build movement script for interactive function,the Web site is published under B/S structure on IIS7.0 server and has the network transmission function. The users can use the learning platform to freely browse,repeatedly disassemble product 3D structure model, and grasp the process knowledge.This platform can be used as an advertising platform to promote products for enterprises and businesses.

virtual laboratory; product virtual exhibition; Unity3D

10.16791/j.cnki.sjg.2017.04.037

2016-10-24 修改日期：2016-12-08

廣東省高職教育教學(xué)改革項(xiàng)目(GDJG2015026)；2014年廣東省高職教育大學(xué)生創(chuàng)新創(chuàng)業(yè)訓(xùn)練計(jì)劃項(xiàng)目(粵教高函[2015]24號)；廣東工貿(mào)職業(yè)技術(shù)學(xué)院科研項(xiàng)目(2014-Z-06)

閻漢生(1978—),男,湖北宜昌,碩士,講師,主要研究方向?yàn)閿?shù)字化設(shè)計(jì)與制造、工業(yè)設(shè)計(jì).

E-mail：yhs7812@163.com

TP391.9

A

1002-4956(2017)4-0147-05