基于Web3D的燈飾協同設計定制系統

馮開平， 潘光洋

（廣東工業大學，廣東 廣州 510006）

傳統的燈飾設計是由設計師在企業內部獨立完成的，然后再生產銷售。客戶無法參與到燈飾設計中，使得設計師不能根據每個客戶的實際需要設計出合適的產品[1]。利用現代網絡技術，使客戶與設計師能夠協同設計產品，是目前制造業信息化發展的主要方向。

互聯網的出現，使3D圖形技術發生了深刻的變化，產生了一些專門針對互聯網的3D圖形技術，我們統稱為Web3D技術。而X3D作為新一代互聯網3D圖形的標準，為互聯網3D圖形的發展展現了廣闊的前景。

本文主要針對燈飾的協同設計系統進行研究，把最新的 Web3D技術引入到制造業，實現燈飾3D模型在Web上的瀏覽，以及進行模型的交互設計，使客戶在燈飾設計師的協助下完成燈飾的定制。

1 系統框架

本系統采用B/S分布式體系結構，這種體系結構簡化了客戶端軟件，統一了用戶接口，用戶容易輕松掌握，具有通用性、高擴展性。由于所有的開發、維護和升級都集中在服務器端，不涉及客戶端，所以系統的開發、維護、升級簡單。

圖1 基于Web3D的燈飾產品協同設計系統框架圖

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

1）燈飾展示模塊——在瀏覽器中實現燈飾產品的三維動態查看與實時交互。本系統的燈飾三維模型是使用 3ds max建模，然后再轉化為X3D格式。客戶可以在瀏覽器中使用BS Contact瀏覽插件進行瀏覽。

2）燈飾設計模塊——實現客戶與設計師的協同設計。客戶或設計師對產品進行設計后，使用Ajax技術把產品的修改信息保存為數據文件，再把數據文件傳到設計師或客戶的瀏覽器，然后再根據數據文件重構模型，從而實現產品修改在網絡上的同步更新。

3）燈飾管理模塊——對產品三維模型與信息進行保存，刪除和修改。該模塊使用 MySQL構建數據庫，以進行對產品信息的管理，包括產品的特點描述、體積、價格等。該數據庫還可以保存設計模塊中所產生數據文件[4]。

4）燈飾訂購模塊——廠家對完成設計的產品進行報價，然后用戶在網上下訂單以及支付費用。本系統使用目前國內最常用的“網銀”在線支付平臺。當客戶完成設計過程后，系統會生成最終訂單并且讓客戶選擇“網銀”支付方式支付費用。

2 基于Web3D的燈飾協同設計關鍵技術

X3D是一種專為萬維網而設計的三維圖像標記語言，全稱為可擴展的三維建模語言，是VRML的升級版本。它使用javascript作為交互語言，能夠在網頁上實現三維模型的瀏覽與行為交互，但需要相關插件支持。

X3D技術包括了建模技術、行為交互技術和渲染技術。3D模型的建模技術已相當成熟，常用的建模軟件工具有3ds max和maya等。X3D的行為交互通過兩種方式實現：內部編程接口和外部編程接口。當前客戶端瀏覽器需要安裝相應的X3D播放器或插件才能顯示由X3D語言編寫的三維場景。使用不同的插件，X3D行為交互的實現就會不同，在本燈飾協同設計系統中，我們使用目前流行的 Bs Contact player插件來完成X3D場景的顯示渲染工作。

2.1 Bs Contact插件的COM接口

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

表1 BS Contact的COM接口

作者主要使用了setNodeEventIn這個接口來修改 X3D場景中的燈飾物體。要使用這種方式控制X3D場景的燈飾，過程如圖2所示，具體操作步驟如下：

1）在編寫燈飾物體之前，使用 prototype節點將燈飾物體封裝成一個新的X3D節點lamp，將重要的燈飾參數設置為lamp的接口屬性，如：DEF、color、translation、lampholder_radias 和lampholder_material等。編寫場景時，使用lamp節點定義燈飾實體，設置其的屬性DEF，以標識此實體。

2）在網頁上使用 embed標簽引入 BS contact Player組件，使得網頁可顯示X3D的場景，向網頁提供BS contact Player的COM接口。

3）在網頁上使用 javascript腳本調用 BS contact player組件的COM接口，控制X3D場景。

圖2 頁面與場景的交互

2.2 X3D的交互技術

X3D的交互技術可分為2種方式：場景中物體之間的交互、場景與網頁之間的交互[5]。在實現場景中物體之間的交互，可使用 X3D的script節點和route節點。使用script節點時，將script節點比作一個人的大腦，由其來直接控制X3D場景的物體，將X3D場景中的各物體模型連接為有機的整體。場景與網頁之間的交互使用Ajax與BS Contact的COM接口實現。使用Ajax技術獲取動態數據，然后通過BS Contact的COM接口將修改應用到場景中。當客戶執行修改動作時，Ajax能做到在客戶沒察覺的情況下修改場景，做到局部刷新的效果，實現實時修改場景。

3 系統主要功能的實現

本節就燈飾協同設計系統原型的幾個主要功能展開講述，包括燈飾局部的修改以及場景在多客戶端上的同步。

3.1 燈飾局部的修改

燈飾的類型不同，需要為系統創建不同的燈飾模型。以由燈頭、燈柱和燈座組成的燈飾模型為例，講述燈飾局部的修改功能的實現。燈飾局部修改功能實現的步驟為：

1）在原型文件 lamproto.X3D 中使用ProtoDeclare節點聲明 Lamp的擴展模型。實現燈頭和燈座的修改，需要將燈頭和燈座設置為一個接口，使得程序員可在編程時使用接口修改燈飾的局部。

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

3）修改組成部分的方法。單擊組成部分的圖片按鈕，如燈頭2圖片，則網頁執行如下代碼：

setNodeEventIn(“lampHeadInline”,”url”,’[“pa rt/lampHead2.X3D”

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

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

setNodeEventIn(“lampInst”,”lampHeadTsl”,”x y z”)；

3.2 實現多客戶端同步顯示場景

Bs contact player播放器在顯示X3D場景時，將X3D場景下載到客戶端，在客戶端修改X3D場景并不會影響其他客戶端上相同路徑的 X3D場景。那么設計者無法查看當前請求協助的場景，僅能查看到沒有經過用戶修改的場景。要實現多客戶端同步顯示場景，可將用戶的修改數據保存到數據庫中，顯示場景時從數據庫中讀取指定場景的修改數據并將修改數據作用于場景中以達到場景的同步，邏輯框圖如圖3所示。

圖3 實現多客戶端同步顯示場景

動作數據也就在客戶端中執行的COM接口語句，如“setNodeEventIn(nodeName, fieldname,value);”。此 setNodeEventIn函數是頁面上的javascript全局函數，完成調用BS Contact player的COM接口setNodeEventIn的操作。

客戶端修改場景時，動作數據通過php頁面保存到Mysql數據庫中。為了能在場景中顯示修改后的場景，使用了 Ajax局部刷新技術，使得頁面讀取數據庫中的動作數據，并執行對本地場景的修改，使用的刷新代碼如下所示：

這種交互方式可以減少帶寬的負擔，使得多個客戶/設計師在共享工作空間中對產品的三維模型進行設計、修改和查看，提高了產品設計速度和質量。修改場景時，多客戶端的場景同步實時顯示。

3.3 系統實現的主界面

應用綜上所述的技術以及實現的邏輯方法，創建一個燈飾協同設計系統雛形，其功能主界面如圖4所示。

圖4 燈飾定制系統功能主界面

4 結束語

最近幾年來，燈飾行業快速發展是不爭的事實，個性燈飾的增長尤為迅速。人們越來越注重燈具的造型、風格和色彩，越來越追求藝術效果，燈飾與房間風格的統一。本文討論了使用Web3D技術構建一個燈飾協同設計系統，使人們可以通過網絡在設計師的協助下設計出適合自已的個性燈飾，對燈飾行業的發展注入了新元素。

[1]趙 東, 王鳳岐, 王 磊. 基于 WEB的個性化定制系統研究現狀及發展趨勢[J]. 組合機床與自動化加工技術, 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]王江春, 張中生. 基于虛擬現實的客車在線定制系統[J]. 系統仿真學報, 2005, 17(4): 930-935.

[4]袁清珂, 何圣華, 李炳田. 基于網絡化制造個性化產品協同定制系統的研究[J]. 機電工程技術, 2004,33(1): 16-18.

[5]黃正軍, 周建中. 基于X3D的虛擬場景動態交互技術研究[J]. 計算機工程與科學, 2007, 29(7): 55-57.