基于Web3D的產(chǎn)品協(xié)同設(shè)計(jì)系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

邵秀麗 于奇奇 楊靜雅 任志娟

摘 要： 為了簡化閥門設(shè)計(jì)過程、整合異地不同用戶的想法到閥門產(chǎn)品的創(chuàng)新設(shè)計(jì)中，提出構(gòu)建基于Web3D的閥門協(xié)同設(shè)計(jì)系統(tǒng)。系統(tǒng)運(yùn)用nodeJs+socket.io即時(shí)通信框架進(jìn)行客戶端與服務(wù)器端即時(shí)通信；采用封裝了Web GL的Web 3D交互技術(shù)Three.js，實(shí)現(xiàn)了在Web 3D場景中閥門模型的交互設(shè)計(jì)，以實(shí)現(xiàn)異地用戶客戶端的設(shè)計(jì)成果的同步。并解決了多用戶自由操作引起的沖突問題，使設(shè)計(jì)過程能順利進(jìn)行。

關(guān)鍵詞： 協(xié)同設(shè)計(jì)； Web 3D設(shè)計(jì)； 沖突處理

中圖分類號(hào)：TP311 文獻(xiàn)標(biāo)志碼：A 文章編號(hào)：1006-8228（2018）07-41-04

Abstract： In order to simplify the valve design process and integrate the ideals of different users in different locations into the innovative design of valve products， this paper proposes to construct a valve collaborative design system based on Web3D. The system uses the instant communication framework nodeJs+socket.io to perform instant communication between the client and the server. Using the Web 3D interaction technology Three.js that encapsulates the Web GL， the interaction design of the valve model in the web 3D scene is realized， and the synchronization of client design results of remote users is realized too. For the smooth progress of the design process， the conflict problem caused by multi-user free operation is solved.

Key words： collaborative design； Web3D； conflict resolution

0 引言

傳統(tǒng)的閥門設(shè)計(jì)過程其主要參與者是企業(yè)內(nèi)的員工，整個(gè)設(shè)計(jì)過程相對(duì)封閉，一方面不能夠很好的結(jié)合用戶及其他設(shè)計(jì)人員的觀點(diǎn)[1-3]，另一方面一定程度制約著閥門的質(zhì)量，影響了企業(yè)的生產(chǎn)力。本文給出基于互聯(lián)網(wǎng)的3D場景的閥門交互設(shè)計(jì)解決方案，在該方案下對(duì)場景交互設(shè)計(jì)、零件庫的加載、場景中零件模型的添加與編輯、3D場景操作集的實(shí)現(xiàn)細(xì)節(jié)進(jìn)行了具體的介紹。另外，對(duì)設(shè)計(jì)過程中涉及的恢復(fù)性問題如：歷史記錄的保存與恢復(fù)、“后來者”同步問題的解決、上下步操作的回滾給出了解決方案并進(jìn)行了實(shí)現(xiàn)。通過該系統(tǒng)達(dá)到簡化閥門設(shè)計(jì)過程、集成不同角色的用戶參與到設(shè)計(jì)過程的目標(biāo)。

1 系統(tǒng)概述

本系統(tǒng)采用B/S結(jié)構(gòu)，實(shí)現(xiàn)了3D場景中的零件拼裝設(shè)計(jì)[4-6]。處于異地的用戶將維護(hù)的零件模型簡圖加載到3D方案下的設(shè)計(jì)窗口進(jìn)行拼裝選擇；用戶可以對(duì)導(dǎo)入3D場景中的零件模型進(jìn)行零件大小、位置、旋轉(zhuǎn)角度的編輯，提供了清空?qǐng)鼍?、刪除選中物體、上下步操作的回滾等基本操作。另外，系統(tǒng)提供歷史記錄的保存與恢復(fù)過程，支持設(shè)計(jì)場景的整體保存與恢復(fù)動(dòng)作。

2 系統(tǒng)主要功能設(shè)計(jì)及實(shí)現(xiàn)

2.1 Web 3D的設(shè)計(jì)場景的實(shí)現(xiàn)

為了向用戶提供更專業(yè)、更直觀的用戶體驗(yàn)，系統(tǒng)實(shí)現(xiàn)了基于Web 3D場景的模型展示、模型編輯的功能。參與設(shè)計(jì)者在設(shè)計(jì)界面進(jìn)行零件選擇或者上傳線下做好的CAD零件模型，在3D場景中完成零件的基本編輯操作，包括場景中零件的移除、場景的清空、上下步操作的回滾、設(shè)計(jì)過程中歷史版本的保存和恢復(fù)等功能，以更好的支持用戶在3D場景中的自行車設(shè)計(jì)活動(dòng)。[7]最終，完成零件模型在場景中拼裝成產(chǎn)品的個(gè)性化設(shè)計(jì)過程。具體實(shí)現(xiàn)流程如圖1所示。

第一步：場景與場景的內(nèi)部構(gòu)件創(chuàng)建

⑴ 創(chuàng)建初始化場景，使用Three.js類庫的THREE.Scene（）方法創(chuàng)建初始化場景對(duì)象scene；

⑵ 相機(jī)的添加，使用類庫的THREE.PerspectiveCamera（）方法創(chuàng)建場景中的遠(yuǎn)景相機(jī)，指定場景查看角度，設(shè)置相機(jī)擺放位置position，并通過lookAt（）函數(shù)設(shè)置函數(shù)觀察點(diǎn)，最后將其添加到⑴場景場景對(duì)象中，即完成場景中模型的添加；

⑶ 參照網(wǎng)絡(luò)的添加，使用類庫的THREE.GridHelper（）方法創(chuàng)建場景網(wǎng)格，通過傳遞參數(shù)設(shè)置網(wǎng)格的尺寸、兩條線的間隔、中心線條以及其他非中心線條的顏色，并設(shè)置網(wǎng)格位置，本次設(shè)置場景的中心位置坐標(biāo)（0，0，0）的位置，最后將其添加到場景中[8-9]。

第二步：場景中的光源的設(shè)置

⑴ 環(huán)境光的添加，通類庫的THREE.AmbientLight（0x444444）方法創(chuàng)建環(huán)境光對(duì)象，其中參數(shù)為環(huán)境光顏色，本次采用灰色環(huán)境光，創(chuàng)建完后將環(huán)境光添加到場景中；

⑵ 平行光的添加，通過類庫的THREE.DirectionLight（0xffeed）創(chuàng)建平行光對(duì)象，其中參數(shù)為平行光顏色，并設(shè)置平行光方位，調(diào)用平行光對(duì)象的set（20，20，20）.normalize（）進(jìn)行設(shè)置，最后將平行光對(duì)象添加到場景中。

第三步：場景的渲染顯示

場景的渲染在整個(gè)交互場景的構(gòu)建工作中有重要的作用，決定了場景中組件以及模型的顯示。使用類庫的THREE.WebGLRenderer（）創(chuàng)建渲染器對(duì)象，使用render（）方法設(shè)定參數(shù)場景對(duì)象scene和相機(jī)對(duì)象camera，對(duì)場景中的構(gòu)件進(jìn)行渲染顯示。

第四步：設(shè)計(jì)場景用戶交互事件的添加

⑴ 場景中物體的360度查看，查看角度隨鼠標(biāo)的拖拽而改變。旋轉(zhuǎn)控制設(shè)置THREE.OrbitControls（camera）方法，為場景相機(jī)對(duì)象添加旋轉(zhuǎn)屬性，相機(jī)的查看視角可隨鼠標(biāo)的拖動(dòng)而改變；

⑵ 添加零件模型的編輯事件，通過類庫的THREE.TransformControls（）方法創(chuàng)建編輯對(duì)象，設(shè)置參數(shù)camera、renderer.domElement為場景中渲染的物體添加編輯事件；

⑶ 添加場景中物體點(diǎn)擊捕獲事件，首先為渲染器設(shè)置mousemove事件和mousedown事件；

⑷ 添加鍵盤快捷鍵事件，為瀏覽器窗體對(duì)象添加鍵盤的‘keydown事件，并通過對(duì)應(yīng)case選項(xiàng)，對(duì)場景中transformControls編輯對(duì)象通過setMode方法更改焦點(diǎn)物體的編輯模式。

最后，建立線程實(shí)時(shí)對(duì)場景進(jìn)行渲染。

2.2 協(xié)同控制的設(shè)計(jì)及實(shí)現(xiàn)

協(xié)作任務(wù)創(chuàng)建后[10]，即可按照約定好的協(xié)作開始時(shí)間展開自行車的協(xié)作設(shè)計(jì)，進(jìn)行設(shè)計(jì)過程中，針對(duì)可能出現(xiàn)的并發(fā)沖突，采用一定的協(xié)同控制機(jī)制避免此種現(xiàn)象的發(fā)生，使協(xié)作活動(dòng)有序的進(jìn)行。該協(xié)同機(jī)制，是為協(xié)作設(shè)計(jì)窗口設(shè)置一個(gè)令牌，獲得該令牌的用戶擁有對(duì)該設(shè)計(jì)窗口操作的權(quán)利，其他用戶不得進(jìn)行操作。并在令牌式策略的控制的基礎(chǔ)上實(shí)現(xiàn)了集中方式、自由方式，該協(xié)作任務(wù)的負(fù)責(zé)人可隨時(shí)根據(jù)活動(dòng)進(jìn)行的需要靈活的進(jìn)行切換。

2.2.1 自由式控制方式

多用戶自由對(duì)設(shè)計(jì)對(duì)象進(jìn)行設(shè)計(jì)操作，存在用戶同時(shí)對(duì)同一零件的同一屬性進(jìn)行操作，而導(dǎo)致操作沖突的現(xiàn)象為解決該并發(fā)沖突問題，本文設(shè)計(jì)了一種以到達(dá)服務(wù)器的時(shí)間為序的先來先處理的沖突解決方案：自定義用戶操作的緩存機(jī)制，將時(shí)間相近的一系列操作請(qǐng)求視為可能產(chǎn)生沖突的并發(fā)操作集，每次并發(fā)的處理均先執(zhí)行操作集中的第一個(gè)操作請(qǐng)求，其后逐個(gè)對(duì)并發(fā)操作集中的操作請(qǐng)求進(jìn)行沖突的判斷與處理。并發(fā)操作集執(zhí)行完畢，清空本次存儲(chǔ)結(jié)果，開始下一次并發(fā)的處理。

該方案下沖突處理流程如圖2所示。

2.2.2 集中控制方式

協(xié)作組內(nèi)用戶操作令牌的申請(qǐng)，統(tǒng)一分發(fā)至活動(dòng)負(fù)責(zé)人處，負(fù)責(zé)人根據(jù)申請(qǐng)情況，選定用戶為其分配操作令牌。一旦分配，不得再次為第二人分配令牌，直到該用戶因時(shí)間片用完或者自行釋放為止，或者可由負(fù)責(zé)人強(qiáng)制剝奪設(shè)計(jì)人操作令牌，被釋放的令牌可繼續(xù)分配給組內(nèi)其他用戶。

⑴ 協(xié)作組內(nèi)用戶操作令牌的申請(qǐng)

活動(dòng)進(jìn)行過程中，協(xié)作組內(nèi)普通用戶（除負(fù)責(zé)人外）可隨時(shí)對(duì)操作令牌進(jìn)行申請(qǐng)，由負(fù)責(zé)人為其分配操作令牌。

具體實(shí)現(xiàn)步驟如下：

① 用戶申請(qǐng)操作令牌的占用權(quán)。采用本文即時(shí)通信機(jī)制類庫中的socket.emit（）方法，設(shè)置發(fā)送標(biāo)識(shí)‘getCentralRight；

② 服務(wù)器端根據(jù)對(duì)應(yīng)標(biāo)識(shí)采用客戶端socket對(duì)象的socket.on方法接收客戶端發(fā)送信息，解析出負(fù)責(zé)人id，根據(jù)負(fù)責(zé)人id找到服務(wù)器存儲(chǔ)負(fù)責(zé)人對(duì)應(yīng)socket對(duì)象（通信機(jī)制的建立時(shí)存儲(chǔ)），完成后，調(diào)用負(fù)責(zé)人socket對(duì)象的emit（）方法設(shè)置申請(qǐng)標(biāo)識(shí)‘a(chǎn)pplyRight，并將申請(qǐng)人id、申請(qǐng)時(shí)間、申請(qǐng)人名稱發(fā)送至負(fù)責(zé)人對(duì)應(yīng)客戶端，交由負(fù)責(zé)人去指定分配用戶；

③ 負(fù)責(zé)人客戶端根據(jù)‘a(chǎn)pplyRight標(biāo)識(shí)獲取申請(qǐng)信息，并在頁面申請(qǐng)列表中顯示。

④ 服務(wù)器根據(jù)‘a(chǎn)ssignOperate標(biāo)識(shí)接收負(fù)責(zé)人分配操作令牌信息，并根據(jù)用戶id獲取對(duì)應(yīng)socket對(duì)象，分配完畢可借助該socket對(duì)象向?qū)?yīng)客戶端發(fā)送信息。其次，調(diào)用封裝分配操作令牌接口，進(jìn)行令牌權(quán)限的分配。

⑵ 活動(dòng)負(fù)責(zé)人強(qiáng)制獲取操作令牌

用戶進(jìn)行操作期間，活動(dòng)負(fù)責(zé)人可進(jìn)行操作令牌的強(qiáng)制獲取。獲取后，設(shè)計(jì)界面的操作權(quán)重新歸負(fù)責(zé)人所有。

具體實(shí)現(xiàn)步驟如下：

① 用戶進(jìn)行設(shè)計(jì)操作期間，設(shè)置除負(fù)責(zé)人外的其他用戶客戶端均不具有再次獲取操作令牌的權(quán)限，負(fù)責(zé)人強(qiáng)制獲取操作令牌，使用本文通信機(jī)制中發(fā)送信息接口將協(xié)作活動(dòng)id發(fā)送至NodeJs服務(wù)器端[11]；

② 服務(wù)器端根據(jù)對(duì)應(yīng)標(biāo)識(shí)接收用戶強(qiáng)制獲取信息后，清空該協(xié)作活動(dòng)令牌占用，停止活動(dòng)對(duì)應(yīng)計(jì)時(shí)器，采用socket.broadcast.to（activityid）.emit（）和socket.emit（）方法結(jié)合回收通知標(biāo)識(shí)‘userRight通知組內(nèi)客戶端回收結(jié)果；

③ 客戶端根據(jù)‘userRight標(biāo)識(shí)接收服務(wù)回收結(jié)果信息，根據(jù)對(duì)應(yīng)結(jié)果設(shè)置設(shè)計(jì)界面是否可操作。

⑶ 操作人操作令牌的釋放

獲取協(xié)作活動(dòng)操作令牌的協(xié)作組內(nèi)用戶（集中式活動(dòng)負(fù)責(zé)人除外），在進(jìn)行設(shè)計(jì)操作過程中，可隨時(shí)進(jìn)行操作令牌的釋放。本文實(shí)現(xiàn)的三種控制方式均遵循該過程。具體實(shí)現(xiàn)步驟如下：

① 用戶申請(qǐng)釋放操作令牌。使用通信機(jī)制類庫接口將用戶id、用戶名稱、用戶協(xié)作組id、控制類別標(biāo)識(shí)發(fā)送到NodeJs服務(wù)器端；

② 服務(wù)器端根據(jù)釋放標(biāo)識(shí)接收用戶釋放申請(qǐng)信息，首先，清空對(duì)應(yīng)協(xié)作活動(dòng)的令牌占用，停止活動(dòng)計(jì)時(shí)器；其次，判斷控制類別，若是集中式或是自由式直接向服務(wù)器發(fā)送釋放成功信息；若是輪轉(zhuǎn)式從用戶信息列表中取出下一位用戶的用戶id、用戶名稱、用戶對(duì)應(yīng)socket對(duì)象，調(diào)用本文分配令牌接口為該用戶分配操作令牌。

③ 客戶端根據(jù)接收到的釋放結(jié)果，或是輪轉(zhuǎn)結(jié)果信息，根據(jù)信息設(shè)置設(shè)計(jì)界面可操作與可申請(qǐng)情況。若是集中或自由，設(shè)置設(shè)計(jì)界面不可用，申請(qǐng)按鈕可用；若是輪轉(zhuǎn)，分配用戶擁有設(shè)計(jì)界面操作權(quán)，釋放按鈕可用，組內(nèi)其他用戶不得操作，申請(qǐng)按鈕不可用。

2.2.3 先到先得控制方式

協(xié)作組內(nèi)用戶可隨時(shí)自由的爭奪操作令牌，先到先得。以時(shí)間為標(biāo)準(zhǔn)，服務(wù)器為第一個(gè)申請(qǐng)的用戶分配操作令牌。分配后，其他人不得再次申請(qǐng)，直到操作令牌被該用戶釋放或者操作時(shí)間片用完，方可展開下一次自由爭奪。實(shí)現(xiàn)流程略。

該方式下，令牌的申請(qǐng)與分配的具體實(shí)現(xiàn)過程：客戶端用戶申請(qǐng)操作令牌，將申請(qǐng)信息（用戶id、協(xié)作活動(dòng)id、用戶名稱）發(fā)送到服務(wù)端，服務(wù)器在為申請(qǐng)用戶分配操作權(quán)時(shí)，需要先判斷該活動(dòng)令牌是否已被占用，若未占用，調(diào)用操作令牌分配接口，為用戶分配該活動(dòng)操作令牌；否則發(fā)出拒絕通知。

2.3 信息交流機(jī)制的設(shè)計(jì)

客戶端與服務(wù)器端為多對(duì)一的關(guān)系，服務(wù)器端應(yīng)用程序server.js必須時(shí)刻處于運(yùn)行狀態(tài)，該程序一經(jīng)開啟時(shí)刻處于運(yùn)行狀態(tài)。服務(wù)器與客戶端之間的即時(shí)通信就可以隨時(shí)進(jìn)行。其主要設(shè)計(jì)機(jī)制是：A.服務(wù)器端應(yīng)用程序通過調(diào)用監(jiān)聽接口，并指定監(jiān)聽信息標(biāo)志，時(shí)刻監(jiān)聽帶有該標(biāo)志的客戶端操作權(quán)控制請(qǐng)求和操作請(qǐng)求信息，客戶端一旦發(fā)送對(duì)應(yīng)請(qǐng)求信息，則服務(wù)器端程序server.js中對(duì)應(yīng)監(jiān)聽程序接收用戶請(qǐng)求信息；B.客戶端應(yīng)用程序通過調(diào)用監(jiān)聽接口，同樣指定監(jiān)聽信息標(biāo)志，時(shí)刻監(jiān)聽帶有該標(biāo)志的服務(wù)器端操作權(quán)控制以及操作控制反饋的結(jié)果信息，服務(wù)器端一旦發(fā)送對(duì)應(yīng)反饋信息，則客戶端應(yīng)用程序中對(duì)應(yīng)監(jiān)聽程序接收服務(wù)器端反饋結(jié)果信息。

3 軟件測試

本節(jié)對(duì)閥門協(xié)同設(shè)計(jì)模塊的即時(shí)通信連接使用jmeter工具進(jìn)行了壓力測試。最后，對(duì)系統(tǒng)的主要功能進(jìn)行了功能性測試。

連接的性能測試是在極限情況下對(duì)Node.js服務(wù)器建立的即時(shí)通信websocket連接進(jìn)行的壓力測試，用來檢查軟件長期的穩(wěn)定性，整個(gè)測試過程主要是增加連接的運(yùn)載負(fù)荷，直到出現(xiàn)瓶頸不能達(dá)成連接為止。

本次的測試工具為：

apache-jmeter-3.2和JMeterWebSocketSampler-

1.0.2-SNAPSHOT.jar插件

測試環(huán)境為：

①操作系統(tǒng)：windows 8.1；

②服務(wù)器配置：處理器 Intel i7-4790 CPU@3.6GH；內(nèi)存：8G；系統(tǒng)類型：64位；軟件環(huán)境：Node.js服務(wù)，socket.io即時(shí)通信插件

本次性能測試主要對(duì)并發(fā)連接的壓力測試。

并發(fā)連接壓力測試結(jié)果：并發(fā)用戶量為1000時(shí)，平臺(tái)的響應(yīng)時(shí)間約為6s，且未出現(xiàn)連接錯(cuò)誤，達(dá)到連接的并發(fā)穩(wěn)定性要求；并發(fā)線程數(shù)超過2000，平均響應(yīng)時(shí)間不理想，達(dá)到并發(fā)連接瓶頸。

4 結(jié)束語

本文針對(duì)在線協(xié)同設(shè)計(jì)的Web 3D設(shè)計(jì)方案給出了解決方案。同時(shí)，在借助Node.js+socket.io即時(shí)通信技術(shù)的基礎(chǔ)上，設(shè)計(jì)了一種多用戶自由操作的沖突處理策略以及同時(shí)只有一人操作的操作權(quán)分配機(jī)制，使協(xié)同設(shè)計(jì)活動(dòng)能有效的進(jìn)行。并實(shí)現(xiàn)了設(shè)計(jì)成果在參與設(shè)計(jì)者瀏覽器中實(shí)時(shí)呈現(xiàn)。

本系統(tǒng)還需要在以下幾個(gè)方面進(jìn)行改進(jìn)：

⑴ 對(duì)設(shè)計(jì)過程中對(duì)零件拼接合理性、安全性的檢測；

⑵ 使用socket.io即時(shí)通信框架，解決客戶端與服務(wù)端的即時(shí)通信問題，該框架下的服務(wù)器端的承載能力有限，最多只能容納3000個(gè)long-polling方式的客戶端的連接，隨著平臺(tái)的推廣存在瓶頸。

參考文獻(xiàn)（References）：

[1] 董仁揚(yáng).三維機(jī)械設(shè)計(jì)軟件MDT4O增強(qiáng)版培訓(xùn)教程AutOdesk[D].中國西部大學(xué)，2000.

[2] 殷國富，陳永華.計(jì)算機(jī)輔助設(shè)計(jì)技術(shù)及應(yīng)用[M]. 科學(xué)出版社，2000.

[3] 孔慶復(fù).計(jì)算機(jī)輔助設(shè)計(jì)與制造[M].哈爾濱工業(yè)出版社，1999.

[4] 朱曉宇，聶穎.基于Socket.io構(gòu)建Web協(xié)同標(biāo)繪應(yīng)用[J].軟件，2016.37（1）：110-113

[5] 潘康華.基于MBD的機(jī)械產(chǎn)品三維設(shè)計(jì)標(biāo)準(zhǔn)關(guān)鍵技術(shù)與應(yīng)用研究[D].機(jī)械科學(xué)研究總院，2012.

[6] Proctor Pall， Wash Everett. Boeing Rolls Out 777 To Tentative Market[J].AviationWeek & Space Technology，1994.140（15）：36-39

[7] I. S. Jacobs and C. P. Bean， "Fine particles， thin films and exchange anisotropy，" in Magnetism， vol. III， G. T. Rado and H. Suhl， Eds. New York： Academic，1963：271-350

[8] M Klein， "Supporting onflict resolution in cooper-tivedesign systems"， Artificial Intelligence in Engineering，1989.21（6）：1379-1390

[9] R. Nicole， "Title of paper with only first word capitalized，"J. Name Stand. Abbrev.， in press.

[10] Y. Yorozu， M. Hirano， K. Oka， and Y. Tagawa， "Electronspectroscopy studies on magneto-optical media and plastic substrate interface，" IEEE Transl. J. Magn. Japan， vol. 2， pp. 740-741， August 1987 [Digests 9th Annual Conf. Magnetics Japan， p. 301， 1982].

[11] M. Young， The Technical Writer's Handbook. Mill Valley，CA： University Science，1989.