在 CRM WebClient UI 中使用純 JavaScript 顯示 3D 足球效果
隨著全球企業數字化轉型的深入發展，在前端 portal 通過 3D 效果展示企業產品不再是傳統 2C 企業的專利。在面向 2B 領域的企業管理軟體實施過程中，也逐漸出現了企業入口網站使用 3D 渲染技術的需求。
Right Hemisphere 曾經是一家專業的企業級 2D/3D 模型瀏覽及轉換的軟體供應商。後來，Right Hemisphere 被 SAP 收購，解決方案也更名為 SAP Visual Enterprise。
收購之後，SAP 推出了一系列和 Visual Enterprise Viewer 的整合解決方案。以 SAP CRM 為例，在 CRM WebClient UI 產品主資料的頁面工具欄上新增了一個按鈕 "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 Visual Enterprise Viewer的介紹，請參閱這個連結：
https://help.sap.com/viewer/p/SAP_3D_VISUAL_ENTERPRISE_ACCESS
從以上描述有些讀者或許注意到了，ActiveX 是一項已經很有年代感的技術了。
本文著重介紹的是另一種用純 JavaScript 程式設計來以 3D 方式，在 CRM WebClient UI 中顯示產品主資料的解決方案。對於使用者來說，使用該解決方案無需在客戶端安裝任何 3D 顯示軟體，只需要一個支援 WebGL 的現代瀏覽器即可。
所謂 WebGL，是 Web Graphics Library 的縮寫，它是一套 JavaScript API，用於在任何相容的 Web 瀏覽器中渲染互動式 2D 和 3D 圖形，而無需使用外掛。
WebGL 與其他 Web 標準完全整合，允許 GPU 加速使用物理和影象處理和效果作為網頁畫布。 WebGL 元素可以與其他 HTML 元素混合並與頁面或頁面背景的其他部分組合。
我做了一個簡單的原型，把它的視訊放到了下面這個網站上：
https://www.youtube.com/watch?v=piWsbfPEGUA
(因為這個視訊是在我的內部系統上錄的，在顯示 3D 模型的彈出視窗的位址列裡顯示了內部系統的url，為了不洩漏出來，我在視訊裡把彈出視窗的頂部截掉了）
當工具欄上的3D按鈕點選之後，出現一個新的彈出視窗，效果和使用 SAP Visual Enterprise Viewer 解決方案一樣，並且還多了一個動態旋轉的效果，使使用者能夠全方位地觀察到該足球每一個部位。
正如文章標題所示，這個解決方案裡 3D 顯示的技術實現採取的是純 JavaScript 程式設計。奧妙就在 threejs，這是一個跨瀏覽器的 JavaScript 庫和應用程式程式設計介面 (API)，用於使用 WebGL 在 Web 瀏覽器中建立和顯示動畫 3D 計算機圖形。
對 threejs 的實現細節感興趣的朋友們，可以訪問它的官網連結：
https://threejs.org/docs/index.html#manual/en/introduction/Useful-links
在 threejs 的官網能找到很多用 threejs 開發而成的酷炫效果和使用教程。
下面是我做的原型主要的開發步驟，感興趣的讀者朋友們可以在自己的 CRM 系統試試。
- 在事物碼 SE80 裡開發一個 BSP 應用，該應用負責使用 threejs API 基於已有的 3D 模型素材檔案渲染出一個不斷旋轉的 3D 足球。
主要的核心邏輯位於上圖 BSP 應用的 objLoader.js 內部。而上圖的 .obj, 則是足球的 3D 模型素材檔案，其他 png 結尾的圖片檔案，為該足球的紋理檔案。
在 objLoader.js 裡，首先使用 threejs 提供的 API THREE.FileLoader 分別載入上述提到的 3D 足球模型和紋理檔案：
使用 threejs 提供的 parse API 將載入到記憶體中的模型和紋理等素材資源，解析成為 threejs 能夠識別的資料結構，將其返回到 THREE.Group 容器中從而完成渲染。
選中 BSP 應用的 index.htm, 從右鍵選單裡選擇"test", 在彈出的瀏覽器視窗內您會看到一個旋轉的 3D 足球。
該檔案內的邏輯為使用 threejs API 進行 3D 模型的建立和渲染。
請注意，因為這個足球的3D素材檔案數量比較多，需等待它們全部成功從瀏覽器載入後，才能看到最終效果。
另外，在這個原型裡，這些素材檔案都是直接維護在 BSP 應用裡的。如果做成標準解決方案，則應維護在 CRM 產品頁面的“附件”區域，或是維護在 ERP 對應的物料主資料應用裡。
3D 模型的旋轉效果通過被大部分現代瀏覽器支援的原生 API requestAnimationFrame 來實現。傳一個 render 函式進去，預設情況下每秒鐘會被呼叫 60 次，每次函式呼叫裡對模型的X 和 Y 座標做微調，以造成旋轉的視覺效果。
- 剩下的開發在 CRM WebClient UI 裡進行。
對 UI 元件 PRD01OV 做增強，新增一個新的 Component usage，消費元件GSURLPOPUP，這個元件作為顯示 3D 模型的頁面容器。
在產品主資料的 UI 工具欄上增加一個新的按鈕：
實現該按鈕的點選響應處理：
點選之後，在 GSURLPOPUP 裡顯示我們第一步做好的 BSP 應用，在該應用裡用 threejs 渲染出 3D 模型：
效果如下：
總結
本文介紹了一種不通過 SAP Visual Enterprise 而仍然能夠在 CRM WebClient UI 裡顯示 3D 模型的純 JavaScript 解決方案，能夠最大程度充分利用企業已有的 3D 模型資源。期望對正在使用 SAP CRM 同時又有物料主資料 3D 顯示需求的企業有所啟發。