基于AngularJS與Cult3D的車輛維修教學(xué)仿真系統(tǒng)設(shè)計與實現(xiàn)

方蕓 閆超

摘要：Cult3D是目前廣泛使用的Web3D技術(shù)，AngularJS是一款優(yōu)秀的JS框架?；贏ngularJS與Cutl3D技術(shù)，結(jié)合車輛維修教學(xué)系統(tǒng)需求，對面向B/S架構(gòu)的三維車輛維修仿真教學(xué)系統(tǒng)進(jìn)行了設(shè)計與實現(xiàn)。

關(guān)鍵詞關(guān)鍵詞：Cult3D；AngularJS；三維仿真

DOIDOI：10.11907/rjdk.161412

中圖分類號：TP319文獻(xiàn)標(biāo)識碼：A文章編號文章編號：16727800（2016）007011302

0引言

車輛維修保養(yǎng)教學(xué)受設(shè)備和器材、教學(xué)場地以及教師數(shù)量等條件制約，直接影響了教學(xué)訓(xùn)練效果。借助Cult3D三維建模技術(shù)可以實現(xiàn)車輛維修保養(yǎng)教學(xué)過程仿真，從而有效提高教學(xué)質(zhì)量。傳統(tǒng)車輛維修教學(xué)仿真軟件大都基于C/S架構(gòu)開發(fā)，這種方法具有安裝、維護(hù)升級困難且操作難度高等弊端。隨著服務(wù)器性能的不斷提升和各種前端框架的成熟應(yīng)用，開發(fā)基于Web的車輛維修教學(xué)仿真軟件成為可能。

當(dāng)前主流Web3D技術(shù)包括Java3D、Fluid3D、SuperScape、Vecta3D、Cult3D等。Cult3D因其設(shè)計人性化，及其在交互性能、傳輸性能和渲染畫質(zhì)等方面的優(yōu)勢得到了廣泛使用?？紤]到車輛維修教學(xué)仿真過程中的需求，本文采用Cult3D技術(shù)實現(xiàn)三維建模及前端交互功能。

AngularJS是一款前端JS框架，其主要特性包括：MVVM、依賴注入、語義化標(biāo)簽以及自動化雙向數(shù)據(jù)綁定等。AngularJS為Web應(yīng)用提供了一種端對端的解決方案，并為開發(fā)者提供了一種更高層次的抽象模型以簡化開發(fā)過程，目前已被應(yīng)用于Google公司的多款產(chǎn)品開發(fā)中，并在業(yè)界得到了廣泛使用。

本文擬基于車輛維修教學(xué)仿真的基本需求，在已有三維仿真模型的基礎(chǔ)上，采用Cult3D交互技術(shù)和AngularJS框架，提出了面向B/S架構(gòu)的車輛維修教學(xué)三維仿真系統(tǒng)設(shè)計與實現(xiàn)方法。該方法對于其它三維仿真教學(xué)系統(tǒng)設(shè)計也有一定的參考價值。

1系統(tǒng)架構(gòu)

系統(tǒng)設(shè)計從總體上分為服務(wù)端設(shè)計和前端設(shè)計，二者均采用了分層架構(gòu)。

1.1服務(wù)器端架構(gòu)設(shè)計

服務(wù)器端架構(gòu)如圖 1所示。服務(wù)器端架構(gòu)可以分為持久層和業(yè)務(wù)層。持久層主要負(fù)責(zé)教學(xué)數(shù)據(jù)庫以及Cult3D文件的維護(hù)與檢索處理。數(shù)據(jù)庫訪問采用了目前廣泛使用的ORM框架——Hibernate。業(yè)務(wù)層負(fù)責(zé)具體的業(yè)務(wù)處理，采用了Spring框架實現(xiàn)依賴注入、事務(wù)處理等業(yè)務(wù)，并采用SpringMVC實現(xiàn)了REST API的發(fā)布。前端對資源的任何操作均采用RESTful的方式加以實現(xiàn)。由于所有的操作都是無狀態(tài)的，因此這種設(shè)計方式極大地提高了系統(tǒng)的可伸縮性，也在一定程度上節(jié)省了服務(wù)器的性能開銷。

1.2前端架構(gòu)設(shè)計

系統(tǒng)前端采用AngularJS框架，結(jié)合分層架構(gòu)思想，將前端系統(tǒng)分為業(yè)務(wù)層和視圖層，如圖 2所示。業(yè)務(wù)層主要由Service和Conroller組成，其中Service主要負(fù)責(zé)與服務(wù)器端進(jìn)行交互，主要通過REST API實現(xiàn)，并封裝了Cult3D交互所需的一些通用操作。這種方式提高了js代碼的可重用性，減少了視圖層與Cult3D以及服務(wù)端的耦合。Controller由一個包含屬性和方法的JavaScript對象組成。AngularJS應(yīng)用主要依靠控制器來控制數(shù)據(jù)在應(yīng)用程序中的流動。視圖層則主要負(fù)責(zé)數(shù)據(jù)的顯示，由HTML模板、專門負(fù)責(zé)Cult3D交互的ActiveX控件以及基于AngularJS的自定義標(biāo)簽組成。

2.1AngularJS與Cult3D的集成

Cult3D提供了IE瀏覽器的插件，通過JavaScript或VBScript腳本可以實現(xiàn)Cult3D對象與HTML頁面的交互。Cult3D與HTML頁面的交互主要以事件和消息的形式異步實現(xiàn)。Cult3D對象的事件處理必須在HTML頁面里定義，但可以通過調(diào)用AngularJS控制器的方法來實現(xiàn)Cult3D與AngularJS的集成。

通常Cult3D對象加載完畢后，基本上所有的交互操作都通過OnSendMessage事件進(jìn)行處理，相應(yīng)地，AngularJS也就接管了所有的消息處理操作，進(jìn)而實現(xiàn)了Cult3D與AngularJS的集成。

2.2Cult3D的業(yè)務(wù)封裝實現(xiàn)

為了減少代碼重復(fù)，減少代碼與Cult3D對象具體操作的耦合，將Cult3D的業(yè)務(wù)處理均封裝在一個Service中，并通過依賴注入的方式將其注入到相應(yīng)的Controller中，對其進(jìn)行調(diào)用。Cult3DService的定義代碼如下：

2.3異步消息處理

系統(tǒng)與Cult3D的交互通過異步消息機(jī)制實現(xiàn)。本系統(tǒng)將每個車輛維修課程拆分成多個步驟，一個典型步驟的操作流程如圖 3所示。

圖3步驟操作流程 對應(yīng)地，在一個步驟中，可能需要處理的異步消息包括：①異步從后臺請求當(dāng)前步驟信息成功的處理消息；②用戶從瀏覽器點擊了Cult3D對象中的某個部件后由Cult3D返回的事件消息；③用戶點擊了Cult3D對象的某個位置后由Cult3D返回的事件消息；④用戶從工具對話框中點擊了某個工具后返回的事件消息；⑤Cult3D返回的某個動作執(zhí)行完成后的事件消息。

這些消息可以概括為3種類型：①Cult3D返回的消息；②Ajax請求成功的消息；③前端處理完成的消息。為了對這些消息進(jìn)行統(tǒng)一處理，采用AngularJS的異步消息處理方式，將消息接收與消息處理相分離。根據(jù)消息類型的不同，在Service層進(jìn)行接收，然后調(diào)用$rootScope.broadcast方法進(jìn)行消息的廣播，消息的處理則在Controller層集中完成。這種方式有效提高了代碼的可復(fù)用性和可維護(hù)性。