在SAP UI中使用纯JavaScript显示产品主数据的3D模型视图-阿里云开发者社区

开发者社区> jerrywangsap> 正文

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Discord 公司如何使用 Cassandra 存储上亿条线上数据
Discord 是一款国外的类似 YY 的语音聊天软件。Discord 语音聊天软件及我们的 UGC 内容的增长速度比想象中要快得多。随着越来越多用户的加入,带来了更多聊天消息。2016 年 7 月,每天大约有 4 千万条消息;2016 年 12 月,每天超过亿条。
4293 0
javascript:使用document.getElementById读取数据为空分析
  今天写个网页,想在页面加载onLoad时,动态显示由后台其他程序传来的数据时,用document.getElementById获取控件对象总是为空。但是检查了这个id确实是存在的。在网上查阅一番后才知道了其中的原因。
886 0
Droid@screen:在PC屏幕上显示Android手机屏幕
这里介绍一款工具——Droid@screen,用来获取手机屏幕,显示在PC屏幕上。它集截图、录像等多种功能于一体。 安装   1.    下载地址:http://droid-at-screen.org/download.html,下载后是一个jar包,放到某个目录就可以。
779 0
WPF:使用Json.NET在TreeView中树形显示JSON数据
原文  WPF:使用Json.NET在TreeView中树形显示JSON数据 据 读者可以参考这个开源的可以树形显示XML和JSON的工具: Mgen Object 603:XML/JSON树形显示小工具 或者一个更大的开源工程(构建和分析HTTP并支持XML及JSON的树形显示): Mgen Bluckbadda   效果如下: (每一个项目中的左侧黑字是数据的值,右侧灰字是数据的类型。
1660 0
安卓开发ScrollView嵌套ListView只显示一行
在用列表控件做一个“更多功能”的界面的时候 1 2 7 8 12 13 17 18 23 27 28 33 37 38 39 原本用ScrollView嵌套...
937 0
如何打破边界,接入各家云,使用阿里云的数据产品作游戏数据分析?
背景:       某某游戏公司的业务逻辑图,其实可以从中发现这基本上跟大多数的游戏公司一样,通过阿里云作数据分析,其他云作数据接入。原因在于阿里云的数据产品比较贴合使用习惯、全面丰富的良好产品体验。       但是,接入的通路问题,采集问题,甚至集成问题,都是困扰一大部分用户的。这篇文章,就是希望打开这方面的脑洞。细化到网络层面,
843 0
+关注
2627
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载