在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的原創技術文章,請關注公眾號"汪子熙"或者掃描下面二維碼:


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com