基于AngularJS與Cult3D的車輛維修教學仿真系統設計與實現

方蕓 閆超

摘要：Cult3D是目前廣泛使用的Web3D技術，AngularJS是一款優秀的JS框架。基于AngularJS與Cutl3D技術，結合車輛維修教學系統需求，對面向B/S架構的三維車輛維修仿真教學系統進行了設計與實現。

關鍵詞關鍵詞：Cult3D；AngularJS；三維仿真

DOIDOI：10.11907/rjdk.161412

中圖分類號：TP319文獻標識碼：A文章編號文章編號：16727800（2016）007011302

0引言

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

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

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

本文擬基于車輛維修教學仿真的基本需求，在已有三維仿真模型的基礎上，采用Cult3D交互技術和AngularJS框架，提出了面向B/S架構的車輛維修教學三維仿真系統設計與實現方法。該方法對于其它三維仿真教學系統設計也有一定的參考價值。

1系統架構

系統設計從總體上分為服務端設計和前端設計，二者均采用了分層架構。

1.1服務器端架構設計

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

1.2前端架構設計

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

2.1AngularJS與Cult3D的集成

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

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

2.2Cult3D的業務封裝實現

為了減少代碼重復，減少代碼與Cult3D對象具體操作的耦合，將Cult3D的業務處理均封裝在一個Service中，并通過依賴注入的方式將其注入到相應的Controller中，對其進行調用。Cult3DService的定義代碼如下：

2.3異步消息處理

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

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

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