在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的原创技术文章，请关注公众号"汪子熙"或者扫描下面二维码: