馮開平， 潘光洋

（廣東工業(yè)大學(xué)，廣東 廣州 510006）

傳統(tǒng)的燈飾設(shè)計(jì)是由設(shè)計(jì)師在企業(yè)內(nèi)部獨(dú)立完成的，然后再生產(chǎn)銷售?？蛻魺o(wú)法參與到燈飾設(shè)計(jì)中，使得設(shè)計(jì)師不能根據(jù)每個(gè)客戶的實(shí)際需要設(shè)計(jì)出合適的產(chǎn)品[1]。利用現(xiàn)代網(wǎng)絡(luò)技術(shù)，使客戶與設(shè)計(jì)師能夠協(xié)同設(shè)計(jì)產(chǎn)品，是目前制造業(yè)信息化發(fā)展的主要方向。

互聯(lián)網(wǎng)的出現(xiàn)，使3D圖形技術(shù)發(fā)生了深刻的變化，產(chǎn)生了一些專門針對(duì)互聯(lián)網(wǎng)的3D圖形技術(shù)，我們統(tǒng)稱為Web3D技術(shù)。而X3D作為新一代互聯(lián)網(wǎng)3D圖形的標(biāo)準(zhǔn)，為互聯(lián)網(wǎng)3D圖形的發(fā)展展現(xiàn)了廣闊的前景。

本文主要針對(duì)燈飾的協(xié)同設(shè)計(jì)系統(tǒng)進(jìn)行研究，把最新的 Web3D技術(shù)引入到制造業(yè)，實(shí)現(xiàn)燈飾3D模型在Web上的瀏覽，以及進(jìn)行模型的交互設(shè)計(jì)，使客戶在燈飾設(shè)計(jì)師的協(xié)助下完成燈飾的定制。

1 系統(tǒng)框架

本系統(tǒng)采用B/S分布式體系結(jié)構(gòu)，這種體系結(jié)構(gòu)簡(jiǎn)化了客戶端軟件，統(tǒng)一了用戶接口，用戶容易輕松掌握，具有通用性、高擴(kuò)展性。由于所有的開發(fā)、維護(hù)和升級(jí)都集中在服務(wù)器端，不涉及客戶端，所以系統(tǒng)的開發(fā)、維護(hù)、升級(jí)簡(jiǎn)單。

圖1 基于Web3D的燈飾產(chǎn)品協(xié)同設(shè)計(jì)系統(tǒng)框架圖

如圖1所示，系統(tǒng)的框架主要由以下4個(gè)功能模塊組成[2-3]。

1）燈飾展示模塊——在瀏覽器中實(shí)現(xiàn)燈飾產(chǎn)品的三維動(dòng)態(tài)查看與實(shí)時(shí)交互。本系統(tǒng)的燈飾三維模型是使用 3ds max建模，然后再轉(zhuǎn)化為X3D格式?？蛻艨梢栽跒g覽器中使用BS Contact瀏覽插件進(jìn)行瀏覽。

2）燈飾設(shè)計(jì)模塊——實(shí)現(xiàn)客戶與設(shè)計(jì)師的協(xié)同設(shè)計(jì)?？蛻艋蛟O(shè)計(jì)師對(duì)產(chǎn)品進(jìn)行設(shè)計(jì)后，使用Ajax技術(shù)把產(chǎn)品的修改信息保存為數(shù)據(jù)文件，再把數(shù)據(jù)文件傳到設(shè)計(jì)師或客戶的瀏覽器，然后再根據(jù)數(shù)據(jù)文件重構(gòu)模型，從而實(shí)現(xiàn)產(chǎn)品修改在網(wǎng)絡(luò)上的同步更新。

3）燈飾管理模塊——對(duì)產(chǎn)品三維模型與信息進(jìn)行保存，刪除和修改。該模塊使用 MySQL構(gòu)建數(shù)據(jù)庫(kù)，以進(jìn)行對(duì)產(chǎn)品信息的管理，包括產(chǎn)品的特點(diǎn)描述、體積、價(jià)格等。該數(shù)據(jù)庫(kù)還可以保存設(shè)計(jì)模塊中所產(chǎn)生數(shù)據(jù)文件[4]。

4）燈飾訂購(gòu)模塊——廠家對(duì)完成設(shè)計(jì)的產(chǎn)品進(jìn)行報(bào)價(jià)，然后用戶在網(wǎng)上下訂單以及支付費(fèi)用。本系統(tǒng)使用目前國(guó)內(nèi)最常用的“網(wǎng)銀”在線支付平臺(tái)。當(dāng)客戶完成設(shè)計(jì)過(guò)程后，系統(tǒng)會(huì)生成最終訂單并且讓客戶選擇“網(wǎng)銀”支付方式支付費(fèi)用。

2 基于Web3D的燈飾協(xié)同設(shè)計(jì)關(guān)鍵技術(shù)

X3D是一種專為萬(wàn)維網(wǎng)而設(shè)計(jì)的三維圖像標(biāo)記語(yǔ)言，全稱為可擴(kuò)展的三維建模語(yǔ)言，是VRML的升級(jí)版本。它使用javascript作為交互語(yǔ)言，能夠在網(wǎng)頁(yè)上實(shí)現(xiàn)三維模型的瀏覽與行為交互，但需要相關(guān)插件支持。

X3D技術(shù)包括了建模技術(shù)、行為交互技術(shù)和渲染技術(shù)。3D模型的建模技術(shù)已相當(dāng)成熟，常用的建模軟件工具有3ds max和maya等。X3D的行為交互通過(guò)兩種方式實(shí)現(xiàn)：內(nèi)部編程接口和外部編程接口。當(dāng)前客戶端瀏覽器需要安裝相應(yīng)的X3D播放器或插件才能顯示由X3D語(yǔ)言編寫的三維場(chǎng)景。使用不同的插件，X3D行為交互的實(shí)現(xiàn)就會(huì)不同，在本燈飾協(xié)同設(shè)計(jì)系統(tǒng)中，我們使用目前流行的 Bs Contact player插件來(lái)完成X3D場(chǎng)景的顯示渲染工作。

2.1 Bs Contact插件的COM接口

BS Contact插件的 SDK（Software Development Kit）為JavaScript提供一種應(yīng)用起來(lái)非常簡(jiǎn)單的外部腳本接口—— COM接口，它允許程序員在X3D場(chǎng)景文件中讀寫使用DEF命名的節(jié)點(diǎn)屬性值，從X3D場(chǎng)景中接收X3D的輸出事件和向X3D場(chǎng)景發(fā)送X3D的輸入事件。BS Contact插件向客戶端瀏覽器提供的COM接口部分函數(shù)如表1所示。

表1 BS Contact的COM接口

作者主要使用了setNodeEventIn這個(gè)接口來(lái)修改 X3D場(chǎng)景中的燈飾物體。要使用這種方式控制X3D場(chǎng)景的燈飾，過(guò)程如圖2所示，具體操作步驟如下：

1）在編寫燈飾物體之前，使用 prototype節(jié)點(diǎn)將燈飾物體封裝成一個(gè)新的X3D節(jié)點(diǎn)lamp，將重要的燈飾參數(shù)設(shè)置為lamp的接口屬性，如：DEF、color、translation、lampholder_radias 和lampholder_material等。編寫場(chǎng)景時(shí)，使用lamp節(jié)點(diǎn)定義燈飾實(shí)體，設(shè)置其的屬性DEF，以標(biāo)識(shí)此實(shí)體。

2）在網(wǎng)頁(yè)上使用 embed標(biāo)簽引入 BS contact Player組件，使得網(wǎng)頁(yè)可顯示X3D的場(chǎng)景，向網(wǎng)頁(yè)提供BS contact Player的COM接口。

3）在網(wǎng)頁(yè)上使用 javascript腳本調(diào)用 BS contact player組件的COM接口，控制X3D場(chǎng)景。

圖2 頁(yè)面與場(chǎng)景的交互

2.2 X3D的交互技術(shù)

X3D的交互技術(shù)可分為2種方式：場(chǎng)景中物體之間的交互、場(chǎng)景與網(wǎng)頁(yè)之間的交互[5]。在實(shí)現(xiàn)場(chǎng)景中物體之間的交互，可使用 X3D的script節(jié)點(diǎn)和route節(jié)點(diǎn)。使用script節(jié)點(diǎn)時(shí)，將script節(jié)點(diǎn)比作一個(gè)人的大腦，由其來(lái)直接控制X3D場(chǎng)景的物體，將X3D場(chǎng)景中的各物體模型連接為有機(jī)的整體。場(chǎng)景與網(wǎng)頁(yè)之間的交互使用Ajax與BS Contact的COM接口實(shí)現(xiàn)。使用Ajax技術(shù)獲取動(dòng)態(tài)數(shù)據(jù)，然后通過(guò)BS Contact的COM接口將修改應(yīng)用到場(chǎng)景中。當(dāng)客戶執(zhí)行修改動(dòng)作時(shí)，Ajax能做到在客戶沒察覺的情況下修改場(chǎng)景，做到局部刷新的效果，實(shí)現(xiàn)實(shí)時(shí)修改場(chǎng)景。

3 系統(tǒng)主要功能的實(shí)現(xiàn)

本節(jié)就燈飾協(xié)同設(shè)計(jì)系統(tǒng)原型的幾個(gè)主要功能展開講述，包括燈飾局部的修改以及場(chǎng)景在多客戶端上的同步。

3.1 燈飾局部的修改

燈飾的類型不同，需要為系統(tǒng)創(chuàng)建不同的燈飾模型。以由燈頭、燈柱和燈座組成的燈飾模型為例，講述燈飾局部的修改功能的實(shí)現(xiàn)。燈飾局部修改功能實(shí)現(xiàn)的步驟為：

1）在原型文件 lamproto.X3D 中使用ProtoDeclare節(jié)點(diǎn)聲明 Lamp的擴(kuò)展模型。實(shí)現(xiàn)燈頭和燈座的修改，需要將燈頭和燈座設(shè)置為一個(gè)接口，使得程序員可在編程時(shí)使用接口修改燈飾的局部。

2）在場(chǎng)景文件 main.X3D 中使用 Extern-ProtoDeclare引入lampproto.X3D中Lamp節(jié)點(diǎn)的聲明，并將Lamp節(jié)點(diǎn)命名Lamp供ProtoInstance節(jié)點(diǎn)使用。最后ProtoInstance節(jié)點(diǎn)將Lamp節(jié)點(diǎn)實(shí)例化，創(chuàng)建燈飾實(shí)例模型lampInst。實(shí)例化代碼如下所示：

3）修改組成部分的方法。單擊組成部分的圖片按鈕，如燈頭2圖片，則網(wǎng)頁(yè)執(zhí)行如下代碼：

setNodeEventIn(“l(fā)ampHeadInline”,”url”,’[“pa rt/lampHead2.X3D”

“http://localhost/part/lampHead2.X3D”]’);

4）修改組成部分的位置。有些組成部分修改之后，不能和其他部分很好地結(jié)合，這時(shí)需要人工調(diào)整燈飾局部的位置。由于在設(shè)計(jì)Lamp擴(kuò)展節(jié)點(diǎn)時(shí)，設(shè)計(jì)了記錄燈頭和燈座的位置屬性，它們作為 Lamp節(jié)點(diǎn)的屬性為 lampHeadTsl和lampDownTsl。在網(wǎng)頁(yè)上輸入燈頭的位置值x、y和z值，然后執(zhí)行如下javascript代碼修改燈頭的位置：

setNodeEventIn(“l(fā)ampInst”,”lampHeadTsl”,”x y z”)；

3.2 實(shí)現(xiàn)多客戶端同步顯示場(chǎng)景

Bs contact player播放器在顯示X3D場(chǎng)景時(shí)，將X3D場(chǎng)景下載到客戶端，在客戶端修改X3D場(chǎng)景并不會(huì)影響其他客戶端上相同路徑的 X3D場(chǎng)景。那么設(shè)計(jì)者無(wú)法查看當(dāng)前請(qǐng)求協(xié)助的場(chǎng)景，僅能查看到?jīng)]有經(jīng)過(guò)用戶修改的場(chǎng)景。要實(shí)現(xiàn)多客戶端同步顯示場(chǎng)景，可將用戶的修改數(shù)據(jù)保存到數(shù)據(jù)庫(kù)中，顯示場(chǎng)景時(shí)從數(shù)據(jù)庫(kù)中讀取指定場(chǎng)景的修改數(shù)據(jù)并將修改數(shù)據(jù)作用于場(chǎng)景中以達(dá)到場(chǎng)景的同步，邏輯框圖如圖3所示。

圖3 實(shí)現(xiàn)多客戶端同步顯示場(chǎng)景

動(dòng)作數(shù)據(jù)也就在客戶端中執(zhí)行的COM接口語(yǔ)句，如“setNodeEventIn(nodeName, fieldname,value);”。此 setNodeEventIn函數(shù)是頁(yè)面上的javascript全局函數(shù)，完成調(diào)用BS Contact player的COM接口setNodeEventIn的操作。

客戶端修改場(chǎng)景時(shí)，動(dòng)作數(shù)據(jù)通過(guò)php頁(yè)面保存到Mysql數(shù)據(jù)庫(kù)中。為了能在場(chǎng)景中顯示修改后的場(chǎng)景，使用了 Ajax局部刷新技術(shù)，使得頁(yè)面讀取數(shù)據(jù)庫(kù)中的動(dòng)作數(shù)據(jù)，并執(zhí)行對(duì)本地場(chǎng)景的修改，使用的刷新代碼如下所示：

這種交互方式可以減少帶寬的負(fù)擔(dān)，使得多個(gè)客戶/設(shè)計(jì)師在共享工作空間中對(duì)產(chǎn)品的三維模型進(jìn)行設(shè)計(jì)、修改和查看，提高了產(chǎn)品設(shè)計(jì)速度和質(zhì)量。修改場(chǎng)景時(shí)，多客戶端的場(chǎng)景同步實(shí)時(shí)顯示。

3.3 系統(tǒng)實(shí)現(xiàn)的主界面

應(yīng)用綜上所述的技術(shù)以及實(shí)現(xiàn)的邏輯方法，創(chuàng)建一個(gè)燈飾協(xié)同設(shè)計(jì)系統(tǒng)雛形，其功能主界面如圖4所示。

圖4 燈飾定制系統(tǒng)功能主界面

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

最近幾年來(lái)，燈飾行業(yè)快速發(fā)展是不爭(zhēng)的事實(shí)，個(gè)性燈飾的增長(zhǎng)尤為迅速。人們?cè)絹?lái)越注重?zé)艟叩脑煨?、風(fēng)格和色彩，越來(lái)越追求藝術(shù)效果，燈飾與房間風(fēng)格的統(tǒng)一。本文討論了使用Web3D技術(shù)構(gòu)建一個(gè)燈飾協(xié)同設(shè)計(jì)系統(tǒng)，使人們可以通過(guò)網(wǎng)絡(luò)在設(shè)計(jì)師的協(xié)助下設(shè)計(jì)出適合自已的個(gè)性燈飾，對(duì)燈飾行業(yè)的發(fā)展注入了新元素。

[1]趙 東, 王鳳岐, 王 磊. 基于 WEB的個(gè)性化定制系統(tǒng)研究現(xiàn)狀及發(fā)展趨勢(shì)[J]. 組合機(jī)床與自動(dòng)化加工技術(shù), 2004, (1): 60-62.

[2]Yang Yu, Zhang Xiaodong, Liu Fei, et al. An internet-based product customization system for CIM [J]. Robotics and Computer-Integrated Manufacturing, 2005, 21(2): 109-118.

[3]王江春, 張中生. 基于虛擬現(xiàn)實(shí)的客車在線定制系統(tǒng)[J]. 系統(tǒng)仿真學(xué)報(bào), 2005, 17(4): 930-935.

[4]袁清珂, 何圣華, 李炳田. 基于網(wǎng)絡(luò)化制造個(gè)性化產(chǎn)品協(xié)同定制系統(tǒng)的研究[J]. 機(jī)電工程技術(shù), 2004,33(1): 16-18.

[5]黃正軍, 周建中. 基于X3D的虛擬場(chǎng)景動(dòng)態(tài)交互技術(shù)研究[J]. 計(jì)算機(jī)工程與科學(xué), 2007, 29(7): 55-57.