在SAP UI中使用純JavaScript顯示產品主資料的3D模型檢視

在Jerry寫這篇文章時，通過Google才知道，SAP其實是有自己的3D模型檢視顯示解決方案的。

故事要從Right Hemisphere說起，這是一家專業的企業級2D/3D模型瀏覽及轉換的軟體供應商。後來，Right Hemisphere被SAP收購，解決方案也更名為SAP Visual Enterprise。

收購之後，SAP推出了一系列和Visual Enterprise Viewer的整合解決方案。以SAP CRM為例，在CRM產品主資料的頁面工具欄上新增了一個按鈕"Visual Enterprise Viewer"，點選之後，會顯示一個彈出視窗，在瀏覽器裡利用ActiveX呼叫本地安裝的Viewer應用，顯示該產品主資料的3D檢視。

這種產品3D模型顯示功能在CRM領域的用途是，充分利用企業已有的3D模型的素材檔案(通常是企業專門的工程/設計部門或者外包部分通過專門的3D建模軟體製成），在CRM銷售，服務和營銷場景中也能給使用者提供關於產品的一個360度檢視。比如一個組成複雜的大型機械，通過3D模型展示發生故障的部件，或是作為幫助文件的補充給使用者展示產品的組裝步驟，或是在服務流程中以3D方式顯示出所有可選備件，給使用者更好的視覺體驗等等。

這種基於SAP Visual Enterprise Viewer的3D顯示解決方案的技術實現是建立在WebClient UI框架的增強之上，即引入了一個新的標籤veviewerIsland, 將通過ActiveX啟動本地安裝的Viewer應用的邏輯封裝在內。

因為和本文主題無關，不做深入介紹，感興趣的朋友請參考SAP help上關於

SAP Visual Enterprise Viewer的介紹。

https://help.sap.com/viewer/p/SAP_3D_VISUAL_ENTERPRISE_ACCESS

本文介紹的是另一種用純JavaScript程式設計來以3D方式顯示產品主資料的解決方案。對於使用者來說，使用該解決方案無需在客戶端安裝任何3D顯示軟體，只需要一個支援WebGL的現代瀏覽器即可。

我做了一個簡單的原型，把它的視訊放到了youtube上：

https://www.youtube.com/watch?v=piWsbfPEGUA

(因為這個視訊是在我的內部系統上錄的，在顯示3D模型的彈出視窗的位址列裡顯示了內部系統的url，為了不洩漏出來，我在視訊裡把彈出視窗的頂部截掉了）

當工具欄上的3D按鈕點選之後，出現一個新的彈出視窗，效果和使用SAP Visual Enterprise Viewer解決方案一樣，並且還多了一個動態旋轉的效果，使使用者能夠全方位地觀察到該足球每一個部位。

正如文章標題所示，這個解決方案裡3D顯示的技術實現採取的是純JavaScript程式設計。奧妙就在threejs，一個基於WebGL，使用JavaScript進行3D模型變換和顯示的庫。

在threejs的官網能找到很多用threejs開發而成的酷炫效果和使用教程。

下面是我做的原型主要的開發步驟，感興趣的顧問朋友們可以在自己系統試試。

1. 在SE80裡開發一個BSP應用，該應用負責使用threejs API基於已有的3D模型素材檔案渲染出一個不斷旋轉的3D足球。

選中index.htm, 從右鍵選單裡選擇"test", 在彈出的瀏覽器視窗內您會看到一個旋轉的3D足球。這個檔案的全部原始碼請在我的github上獲得。

https://github.com/i042416/FioriODataTestTool2014/blob/master/WebContent/096_3dfootball.html

該檔案內的邏輯為使用threejs API進行3D模型的建立和渲染，具體技術細節大家可以參考threejs官網教程。這個檔案的程式碼是Jerry從我的同事Wen Aviva的程式碼複製而成，做了極少量的修改。

---

插播一條八卦

Aviva是SAP成都研究院C4C開發團隊一位具有女王級地位的程式媛，有圖為證：

今年3月份，SAP C4C全球開發部門搞了一個內部程式設計馬拉松大賽。SAP成都和美國，印度的其他C4C開發團隊全部參加了這次比賽。每個參賽隊伍組隊完成後，需要給比賽開發的作品取個名字。成都一位組員提出了取名" Hi Aviva! ", 為的是向Aviva致敬，該提議獲得了組內全票通過。最後這個小組的作品獲得了二等獎，因此Aviva的名字又出現在了公司portal和內網頁面上。

為什麼Aviva在組內享有這種女王級的地位？因為技術棧全面，在工作中能自如地運用C++，Java和JavaScript完成標準開發和原型開發任務，經常能幫團隊解決一些很難的技術問題，而且學習新技術速度特別快。Jerry在SAP成都研究院工作11年，和很多程式媛共事過，Aviva的技術能力給我留下非常深刻的印象，另一位是Mao Annie。

Jerry非常佩服這兩位程式媛，能夠把自己的技術修煉到如此程度。

Aviva以前的微信頭像是一位坐在電腦面前程式設計的程式媛的卡通影像。最近換了。

八卦插播結束。

---

如果大家不想自己動手，可以直接開啟下面這個url，檢視這個旋轉的3D足球的效果。

http://i042416.github.io/FioriODataTestTool2014/WebContent/096_3dfootball.html

請注意，因為這個足球的3D素材檔案數量比較多，需等待它們全部成功從瀏覽器載入後，才能看到最終效果。

另外，在這個原型裡，這些素材檔案都是直接維護在BSP應用裡的。如果做成標準解決方案，則應維護在CRM產品頁面的“附件”區域，或是維護在ERP對應的物料主資料應用裡。

3D模型的旋轉效果通過了大部分現代瀏覽器支援的原生API requestAnimationFrame來實現。傳一個render函式進去，預設情況下每秒鐘會被呼叫60次，每次函式呼叫裡對模型的X和Y座標做微調，以造成旋轉的視覺效果。

2. 剩下的開發全部是傳統的CRM WebClient UI開發了。

對UI元件PRD01OV做增強，新增一個新的Component usage，消費元件GSURLPOPUP，這個元件作為顯示3D模型的頁面容器。

在產品主資料的UI工具欄上增加一個新的按鈕：

實現該按鈕的點選響應處理：

點選之後，在GSURLPOPUP裡顯示我們第一步做好的BSP應用，在該應用裡用threejs渲染出3D模型：

歡迎試用該原型，並提出您的寶貴意見。

感謝閱讀。

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/24475491/viewspace-2213843/，如需轉載，請註明出處，否則將追究法律責任。