隨著全球企業數字化轉型的深入發展，在前端 portal 透過 3D 效果展示企業產品不再是傳統 2C 企業的專利。在面向 2B 領域的企業管理軟體實施過程中，也逐漸出現了企業入口網站使用 3D 渲染技術的需求。

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

![](https://img-blog.csdnimg.cn/img_convert/f844c60752084c8cd0d0798bc9092e98.png)

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

![](https://img-blog.csdnimg.cn/img_convert/71ad5fef80ab56893d4217fa7ea94935.png)

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

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

![](https://img-blog.csdnimg.cn/img_convert/bf25712d3ccd31d04893d1f781815b51.png)

更多關於 SAP Visual Enterprise Viewer的介紹，請參閱這個連結：

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

![](https://img-blog.csdnimg.cn/img_convert/18dd9f0d918c3c7e98536f647ea5eb60.png)

從以上描述有些讀者或許注意到了，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 解決方案一樣，並且還多了一個動態旋轉的效果，使使用者能夠全方位地觀察到該足球每一個部位。

![](https://img-blog.csdnimg.cn/img_convert/35c918545049678bc3763835a03637a4.png)

正如文章標題所示，這個解決方案裡 3D 顯示的技術實現採取的是純 JavaScript 程式設計。奧妙就在 threejs，這是一個跨瀏覽器的 JavaScript 庫和應用程式程式設計介面 (API)，用於使用 WebGL 在 Web 瀏覽器中建立和顯示動畫 3D 計算機圖形。

對 threejs 的實現細節感興趣的朋友們，可以訪問它的官網連結：

https://threejs.org/docs/index.html#manual/en/introduction/Useful-links

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

![](https://img-blog.csdnimg.cn/img_convert/ce0723468397192591b4262d7b73b793.png)

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

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

![](https://img-blog.csdnimg.cn/img_convert/5f558227c666e0ded4c0df9eb2e2dfe5.png)

主要的核心邏輯位於上圖 BSP 應用的 objLoader.js 內部。而上圖的 .obj, 則是足球的 3D 模型素材檔案，其他 png 結尾的圖片檔案，為該足球的紋理檔案。

在 objLoader.js 裡，首先使用 threejs 提供的 API `THREE.FileLoader` 分別載入上述提到的 3D 足球模型和紋理檔案：

![](https://img-blog.csdnimg.cn/img_convert/8cd4125e3c3998b5460c742ffed02ed0.png)

使用 threejs 提供的 `parse` API 將載入到記憶體中的模型和紋理等素材資源，解析成為 threejs 能夠識別的資料結構，將其返回到 `THREE.Group` 容器中從而完成渲染。

![](https://img-blog.csdnimg.cn/img_convert/d67ff8324dd9401c2ca6f233913ff1fa.png)

選中 BSP 應用的 index.htm, 從右鍵選單裡選擇"test", 在彈出的瀏覽器視窗內您會看到一個旋轉的 3D 足球。

該檔案內的邏輯為使用 threejs API 進行 3D 模型的建立和渲染。

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

![](https://img-blog.csdnimg.cn/img_convert/b206aa352fb54cf36c2b04c00bdc9c8e.png)

另外，在這個原型裡，這些素材檔案都是直接維護在 BSP 應用裡的。如果做成標準解決方案，則應維護在 CRM 產品頁面的“附件”區域，或是維護在 ERP 對應的物料主資料應用裡。
3D 模型的旋轉效果透過被大部分現代瀏覽器支援的原生 API `requestAnimationFrame` 來實現。傳一個 render 函式進去，預設情況下每秒鐘會被呼叫 60 次，每次函式呼叫裡對模型的X 和 Y 座標做微調，以造成旋轉的視覺效果。

![](https://img-blog.csdnimg.cn/img_convert/15fdba4739b6ff45819a481b84848151.png)

2. 剩下的開發在 CRM WebClient UI 裡進行。

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

![](https://img-blog.csdnimg.cn/img_convert/5df2da488b4a3ff2df21e6bc0fae9884.png)

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

![](https://img-blog.csdnimg.cn/img_convert/46e80984a1cca9be93c6c7482b4e5008.png)

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

![](https://img-blog.csdnimg.cn/img_convert/d6c5cafb7b0ad3624d9bdf7ea9dfe233.png)

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

![](https://img-blog.csdnimg.cn/img_convert/90cca0ddf66ec3b929d234d61e5cb344.png)

效果如下：

![](https://img-blog.csdnimg.cn/img_convert/fda1c3038f5382a108a17ad99a09ccbb.png)

# 總結

本文介紹了一種不透過 SAP Visual Enterprise 而仍然能夠在 CRM WebClient UI 裡顯示 3D 模型的純 JavaScript 解決方案，能夠最大程度充分利用企業已有的 3D 模型資源。期望對正在使用 SAP CRM 同時又有物料主資料 3D 顯示需求的企業有所啟發。

在 CRM WebClient UI 中使用純 JavaScript 顯示 3D 足球效果

相關文章