摘要：以為例，在產(chǎn)品主數(shù)據(jù)的頁面工具欄上新增了一個(gè)按鈕，點(diǎn)擊之后，會顯示一個(gè)彈出窗口，在瀏覽器里利用調(diào)用本地安裝的應(yīng)用，顯示該產(chǎn)品主數(shù)據(jù)的視圖。本文介紹的是另一種用純編程來以方式顯示產(chǎn)品主數(shù)據(jù)的解決方案。

在Jerry寫這篇文章時(shí)，通過Google才知道，SAP其實(shí)是有自己的3D模型視圖顯示解決方案的。

故事要從Right Hemisphere說起，這是一家專業(yè)的企業(yè)級2D/3D模型瀏覽及轉(zhuǎn)換的軟件供應(yīng)商。后來，Right Hemisphere被SAP收購，解決方案也更名為SAP Visual Enterprise。

收購之后，SAP推出了一系列和Visual Enterprise Viewer的集成解決方案。以SAP CRM為例，在CRM產(chǎn)品主數(shù)據(jù)的頁面工具欄上新增了一個(gè)按鈕"Visual Enterprise Viewer"，點(diǎn)擊之后，會顯示一個(gè)彈出窗口，在瀏覽器里利用ActiveX調(diào)用本地安裝的Viewer應(yīng)用，顯示該產(chǎn)品主數(shù)據(jù)的3D視圖。

這種產(chǎn)品3D模型顯示功能在CRM領(lǐng)域的用途是，充分利用企業(yè)已有的3D模型的素材文件(通常是企業(yè)專門的工程/設(shè)計(jì)部門或者外包部分通過專門的3D建模軟件制成），在CRM銷售，服務(wù)和營銷場景中也能給用戶提供關(guān)于產(chǎn)品的一個(gè)360度視圖。比如一個(gè)組成復(fù)雜的大型機(jī)械，通過3D模型展示發(fā)生故障的部件，或是作為幫助文檔的補(bǔ)充給用戶展示產(chǎn)品的組裝步驟，或是在服務(wù)流程中以3D方式顯示出所有可選備件，給用戶更好的視覺體驗(yàn)等等。

這種基于SAP Visual Enterprise Viewer的3D顯示解決方案的技術(shù)實(shí)現(xiàn)是建立在WebClient UI框架的增強(qiáng)之上，即引入了一個(gè)新的標(biāo)簽veviewerIsland, 將通過ActiveX啟動本地安裝的Viewer應(yīng)用的邏輯封裝在內(nèi)。

因?yàn)楹捅疚闹黝}無關(guān)，不做深入介紹，感興趣的朋友請參考SAP help上關(guān)于

SAP Visual Enterprise Viewer的介紹。

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

本文介紹的是另一種用純JavaScript編程來以3D方式顯示產(chǎn)品主數(shù)據(jù)的解決方案。對于用戶來說，使用該解決方案無需在客戶端安裝任何3D顯示軟件，只需要一個(gè)支持WebGL的現(xiàn)代瀏覽器即可。

我做了一個(gè)簡單的原型，把它的視頻放到了youtube上：

https://www.youtube.com/watch...

(因?yàn)檫@個(gè)視頻是在我的內(nèi)部系統(tǒng)上錄的，在顯示3D模型的彈出窗口的地址欄里顯示了內(nèi)部系統(tǒng)的url，為了不泄漏出來，我在視頻里把彈出窗口的頂部截掉了）

當(dāng)工具欄上的3D按鈕點(diǎn)擊之后，出現(xiàn)一個(gè)新的彈出窗口，效果和使用SAP Visual Enterprise Viewer解決方案一樣，并且還多了一個(gè)動態(tài)旋轉(zhuǎn)的效果，使用戶能夠全方位地觀察到該足球每一個(gè)部位。

正如文章標(biāo)題所示，這個(gè)解決方案里3D顯示的技術(shù)實(shí)現(xiàn)采取的是純JavaScript編程。奧妙就在threejs，一個(gè)基于WebGL，使用JavaScript進(jìn)行3D模型變換和顯示的庫。

在threejs的官網(wǎng)能找到很多用threejs開發(fā)而成的酷炫效果和使用教程。

下面是我做的原型主要的開發(fā)步驟，感興趣的顧問朋友們可以在自己系統(tǒng)試試。

1. 在SE80里開發(fā)一個(gè)BSP應(yīng)用，該應(yīng)用負(fù)責(zé)使用threejs API基于已有的3D模型素材文件渲染出一個(gè)不斷旋轉(zhuǎn)的3D足球。

選中index.htm, 從右鍵菜單里選擇"test", 在彈出的瀏覽器窗口內(nèi)您會看到一個(gè)旋轉(zhuǎn)的3D足球。這個(gè)文件的全部源代碼請?jiān)谖业膅ithub上獲得。

https://github.com/i042416/Fi...

該文件內(nèi)的邏輯為使用threejs API進(jìn)行3D模型的創(chuàng)建和渲染，具體技術(shù)細(xì)節(jié)大家可以參考threejs官網(wǎng)教程。這個(gè)文件的代碼是Jerry從我的同事Wen Aviva的代碼復(fù)制而成，做了極少量的修改。

*

插播一條八卦

Aviva是SAP成都研究院C4C開發(fā)團(tuán)隊(duì)一位具有女王級地位的程序媛，有圖為證：

今年3月份，SAP C4C全球開發(fā)部門搞了一個(gè)內(nèi)部編程馬拉松大賽。SAP成都和美國，印度的其他C4C開發(fā)團(tuán)隊(duì)全部參加了這次比賽。每個(gè)參賽隊(duì)伍組隊(duì)完成后，需要給比賽開發(fā)的作品取個(gè)名字。成都一位組員提出了取名"Hi Aviva!", 為的是向Aviva致敬，該提議獲得了組內(nèi)全票通過。最后這個(gè)小組的作品獲得了二等獎(jiǎng)，因此Aviva的名字又出現(xiàn)在了公司portal和內(nèi)網(wǎng)頁面上。

為什么Aviva在組內(nèi)享有這種女王級的地位？因?yàn)榧夹g(shù)棧全面，在工作中能自如地運(yùn)用C++，Java和JavaScript完成標(biāo)準(zhǔn)開發(fā)和原型開發(fā)任務(wù)，經(jīng)常能幫團(tuán)隊(duì)解決一些很難的技術(shù)問題，而且學(xué)習(xí)新技術(shù)速度特別快。Jerry在SAP成都研究院工作11年，和很多程序媛共事過，Aviva的技術(shù)能力給我留下非常深刻的印象，另一位是Mao Annie。

Jerry非常佩服這兩位程序媛，能夠把自己的技術(shù)修煉到如此程度。

Aviva以前的微信頭像是一位坐在電腦面前編程的程序媛的卡通圖像。最近換了。

八卦插播結(jié)束。

*

如果大家不想自己動手，可以直接打開下面這個(gè)url，查看這個(gè)旋轉(zhuǎn)的3D足球的效果。

http://i042416.github.io/Fior...

請注意，因?yàn)檫@個(gè)足球的3D素材文件數(shù)量比較多，需等待它們?nèi)砍晒臑g覽器加載后，才能看到最終效果。

另外，在這個(gè)原型里，這些素材文件都是直接維護(hù)在BSP應(yīng)用里的。如果做成標(biāo)準(zhǔn)解決方案，則應(yīng)維護(hù)在CRM產(chǎn)品頁面的“附件”區(qū)域，或是維護(hù)在ERP對應(yīng)的物料主數(shù)據(jù)應(yīng)用里。

3D模型的旋轉(zhuǎn)效果通過了大部分現(xiàn)代瀏覽器支持的原生API requestAnimationFrame來實(shí)現(xiàn)。傳一個(gè)render函數(shù)進(jìn)去，默認(rèn)情況下每秒鐘會被調(diào)用60次，每次函數(shù)調(diào)用里對模型的X和Y坐標(biāo)做微調(diào)，以造成旋轉(zhuǎn)的視覺效果。

2. 剩下的開發(fā)全部是傳統(tǒng)的CRM WebClient UI開發(fā)了。

對UI組件PRD01OV做增強(qiáng)，添加一個(gè)新的Component usage，消費(fèi)組件GSURLPOPUP，這個(gè)組件作為顯示3D模型的頁面容器。

在產(chǎn)品主數(shù)據(jù)的UI工具欄上增加一個(gè)新的按鈕：

實(shí)現(xiàn)該按鈕的點(diǎn)擊響應(yīng)處理：

點(diǎn)擊之后，在GSURLPOPUP里顯示我們第一步做好的BSP應(yīng)用，在該應(yīng)用里用threejs渲染出3D模型：

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

感謝閱讀。

要獲取更多Jerry的原創(chuàng)技術(shù)文章，請關(guān)注公眾號"汪子熙"或者掃描下面二維碼: