随着全球企业数字化转型的深入开展，在前端通过3D效果展示企业产品已不再是传统2C企业的专利门户网站。企业管理软件在2B领域落地的过程中，也有企业门户使用3D渲染技术的需求。RightHemisphere曾是一家专业的企业级2D/3D模型查看和转换软件提供商。后来，RightHemisphere被SAP收购，解决方案更名为SAPVisualEnterprise。收购后，SAP推出了一系列与VisualEnterpriseViewer的集成解决方案。以SAPCRM为例，在CRMWebClientUI产品主数据的页面工具栏中增加了一个按钮“VisualEnterpriseViewer”。点击后会弹出一个弹窗，使用浏览器中的ActiveX调用本地安装的Viewer应用，显示产品主数据的3D视图。本产品3D模型展示功能在CRM领域的目的是为了充分利用企业现有3D模型的素材文件（通常由公司专门的工程/设计部门或外包部分通过专门的3D建模软件制作）.CRM销售、服务和营销场景还可以为用户提供360度的产品视图。例如，对于复杂的大型机械，3D模型显示故障零件，或者作为帮助文档的补充向用户展示产品的组装步骤，或者在3D中展示所有可选备件。服务流程，给用户更好的视觉体验等等。这个基于SAPVisualEnterpriseViewer的3D显示解决方案的技术实现是基于WebClientUI框架的增强，即引入了一个新的标签veviewerIsland来封装通过ActiveX启动本地安装的Viewer应用程序的逻辑。关于SAPVisualEnterpriseViewer的更多信息，请参考这个链接：https://help.sap.com/viewer/p...从上面的描述中，有些读者可能已经注意到ActiveX也是一个老掉牙的技术了.本文重点介绍另一种使用纯JavaScript编程在CRMWebClientUI中以3D形式显示产品主数据的解决方案。对于用户来说，使用该方案不需要在客户端安装任何3D显示软件，只需要一个支持WebGL的现代浏览器。所谓WebGL，WebGraphicsLibrary的缩写，是一组JavaScriptAPI，用于在任何兼容的网络浏览器中渲染交互式2D和3D图形，而无需使用插件。WebGL与其他网络标准完全集成，允许GPU加速使用物理和图像处理和效果作为网页画布。WebGL元素可以与其他HTML元素混合，并与页面或页面背景的其他部分相结合。我做了一个简单的原型并将它的视频放在以下网站上：https://www.youtube.com/watch...（因为这个视频是在我的内部系统上录制的，显示了3D弹出窗口的地址栏-模型的up窗口显示的是内部系统的url，为了不泄露，我在视频中把弹窗的顶部剪掉了）当点击工具栏上的3D按钮时，一个新的弹窗窗口出现，效果和使用SAPVisualEnterpriseViewer解决方案一样，多了一个动态旋转效果，让用户可以全方位观察足球的每一部分。正如文章标题所示，本方案中3D显示的技术实现是纯JavaScript编程。秘密在于threejs，一个跨浏览器的JavaScript库和应用程序编程接口(API)，用于使用WebGL在Web浏览器中创建和显示动画3D计算机图形。对threejs的实现细节感兴趣的朋友可以访问它的官网链接：https://threejs.org/docs/inde...在threejs的官网上可以找到很多炫酷的效果和用threejs开发的应用教程.以下是我制作的原型的主要开发步骤。有兴趣的读者可以在自己的CRM系统中试一试。在交易代码SE80中开发一个BSP应用程序，负责使用threejsAPI在已有的3D模型材质文件的基础上渲染一个不断旋转的3D足球。主要核心逻辑位于上图中BSP应用的objLoader.js内部。上图中的.obj为足球的3D模型材质文件，其他以png结尾的图片文件为足球的贴图文件。在objLoader.js中，首先使用threejs提供的APITHREE.FileLoader分别加载上面提到的3D足球模型和贴图文件：使用threejs提供的parseAPI将加载到内存中的模型、贴图等材质资源解析成threejs可识别的数据结构，返回给THREE.Group容器完成渲染。选择BSP应用程序的index.htm，在右键菜单中选择“测试”，在弹出的浏览器窗口中会看到一个旋转的3D足球。此文件中的逻辑是使用threejsAPI来创建和渲染3D模型。请注意，由于这个足球的3D素材文件较多，需要等待浏览器全部加载成功后才能看到最终效果。另外，在这个原型中，这些素材文件是直接在BSP应用程序中维护的。如果做成标准方案，应该维护在CRM产品页面的“附件”区域，或者在ERP对应的物料主数据应用中。3D模型的旋转效果是通过大多数现代浏览器都支持的原生APIrequestAnimationFrame来实现的。传入一个render函数，默认每秒调用60次，每次函数调用都会对模型的X、Y坐标进行微调，营造出旋转的视觉效果。其余的开发在CRMWebClientUI中进行。增强UI组件PRD01OV，增加一个新的Componentusage，消费组件GSURLPOPUP，该组件用作显示3D模型的页面容器。在产品主数据的UI工具栏上新增一个按钮：实现按钮的点击响应处理：点击后，GSURLPOUP中会显示我们第一步完成的BSP应用，并用threejs渲染3D模型在本应用中：效果如下：总结本文介绍一种纯JavaScript方案，在没有SAPVisualEnterprise的情况下，依然可以在CRMWebClientUI中显示3D模型，可以最大程度的利用企业现有的3D模型资源程度。期望从使用SAPCRM并需要物料主数据3D显示的公司中得到启发。
