随着全球企业数字化转型的深入发展，在前端 portal 通过 3D 效果展示企业产品不再是传统 2C 企业的专利。在面向 2B 领域的企业管理软件实施过程中，也逐渐出现了企业门户网站使用 3D 渲染技术的需求。

Right Hemisphere 曾经是一家专业的企业级 2D/3D 模型浏览及转换的软件供应商。后来，Right Hemisphere 被 SAP 收购，解决方案也更名为 SAP Visual Enterprise。

收购之后，SAP 推出了一系列和 Visual Enterprise Viewer 的集成解决方案。以 SAP CRM 为例，在 CRM WebClient UI 产品主数据的页面工具栏上新增了一个按钮 "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 Visual Enterprise Viewer 的介绍，请参阅这个链接：

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

从以上描述有些读者或许注意到了，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 解决方案一样，并且还多了一个动态旋转的效果，使用户能够全方位地观察到该足球每一个部位。

正如文章标题所示，这个解决方案里 3D 显示的技术实现采取的是纯 JavaScript 编程。奥妙就在 threejs，这是一个跨浏览器的 JavaScript 库和应用程序编程接口 (API)，用于使用 WebGL 在 Web 浏览器中创建和显示动画 3D 计算机图形。

对 threejs 的实现细节感兴趣的朋友们，可以访问它的官网链接：

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

在 threejs 的官网能找到很多用 threejs 开发而成的酷炫效果和使用教程。

下面是我做的原型主要的开发步骤，感兴趣的读者朋友们可以在自己的 CRM 系统试试。

1. 在事物码 SE80 里开发一个 BSP 应用，该应用负责使用 threejs API 基于已有的 3D 模型素材文件渲染出一个不断旋转的 3D 足球。

主要的核心逻辑位于上图 BSP 应用的 objLoader.js 内部。而上图的 .obj, 则是足球的 3D 模型素材文件，其他 png 结尾的图片文件，为该足球的纹理文件。

在 objLoader.js 里，首先使用 threejs 提供的 API THREE.FileLoader 分别加载上述提到的 3D 足球模型和纹理文件：

使用 threejs 提供的 parse API 将加载到内存中的模型和纹理等素材资源，解析成为 threejs 能够识别的数据结构，将其返回到 THREE.Group 容器中从而完成渲染。

选中 BSP 应用的 index.htm, 从右键菜单里选择"test", 在弹出的浏览器窗口内您会看到一个旋转的 3D 足球。

该文件内的逻辑为使用 threejs API 进行 3D 模型的创建和渲染。

请注意，因为这个足球的 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 模型：

效果如下：

总结

本文介绍了一种不通过 SAP Visual Enterprise 而仍然能够在 CRM WebClient UI 里显示 3D 模型的纯 JavaScript 解决方案，能够最大程度充分利用企业已有的 3D 模型资源。期望对正在使用 SAP CRM 同时又有物料主数据 3D 显示需求的企业有所启发。