在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模型：

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

感謝閱讀。

要獲取更多Jerry的原創技術文章，請關注公衆號"汪子熙"或者掃描下面二維碼: