資訊專欄INFORMATION COLUMN
摘要：以為例，在產品主數據的頁面工具欄上新增了一個按鈕，點擊之后，會顯示一個彈出窗口，在瀏覽器里利用調用本地安裝的應用，顯示該產品主數據的視圖。本文介紹的是另一種用純編程來以方式顯示產品主數據的解決方案。
在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...
本文介紹的是另一種用純JavaScript編程來以3D方式顯示產品主數據的解決方案。對于用戶來說，使用該解決方案無需在客戶端安裝任何3D顯示軟件，只需要一個支持WebGL的現代瀏覽器即可。
我做了一個簡單的原型，把它的視頻放到了youtube上：
https://www.youtube.com/watch...
(因為這個視頻是在我的內部系統上錄的，在顯示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/Fi...
該文件內的邏輯為使用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/Fior...
請注意，因為這個足球的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的原創技術文章，請關注公眾號"汪子熙"或者掃描下面二維碼:
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/98607.html
摘要：在她的幫助下，原型發布順利完成。節點收到一個交易后，會根據判斷標準對該交易進行有效性校驗，無效的交易會被廢棄。負責權限管理，成員身份相關證書管理和維護交易相關證書管理等等。 今天的文章來自Wen Aviva, 坐Jerry面對面的程序媛。 Jerry在之前的公眾號文章《在SAP UI中使用純JavaScript顯示產品主數據的3D模型視圖》已經介紹過Aviva了，SAP成都C4C開發團...
摘要：在以下簡稱和以下簡稱開發團隊都工作過，這篇文章給出這兩款產品一些技術層面的比較。標準開發方式和的雖然看起來都是風格，但實現技術不同。而的標準則是基于和協作而成的。 如果您對SAP S/4HANA for Customer Management（以下簡稱S4CRM）和SAP Cloud for Customer（以下簡稱C4C）不甚熟悉，那我建議您可以先瀏覽我之前寫的這兩篇微信公眾號文章...
摘要：在以下簡稱和以下簡稱開發團隊都工作過，這篇文章給出這兩款產品一些技術層面的比較。標準開發方式和的雖然看起來都是風格，但實現技術不同。而的標準則是基于和協作而成的。 如果您對SAP S/4HANA for Customer Management（以下簡稱S4CRM）和SAP Cloud for Customer（以下簡稱C4C）不甚熟悉，那我建議您可以先瀏覽我之前寫的這兩篇微信公眾號文章...
摘要：年月日晚，成都地鐵一號線，手機上突然彈出來一條金庸去世的新聞。作為一個開發人員，我在金庸這十四部名著里看到的，是的江湖。金庸的這個武功設定，和公司的數字化轉型，向的轉型很像。 2018年10月30日晚，成都地鐵一號線，Jerry手機app上突然彈出來一條金庸去世的新聞。 Jerry識字很早，小學一年級就開始蹭我父親的《射雕英雄傳》看了。小時候，我爸工作的車間里有一位領導，退休后把自己家...
閱讀 2121·2023-04-26 00:50
閱讀 2493·2021-10-13 09:39
閱讀 2227·2021-09-22 15:34
閱讀 1621·2021-09-04 16:41
閱讀 1349·2019-08-30 15:55
閱讀 2444·2019-08-30 15:53
閱讀 1716·2019-08-30 15:52
閱讀 755·2019-08-29 16:19
