共计 2533 个字符，预计需要花费 7 分钟才能阅读完成。
随着寰球企业数字化转型的深刻倒退，在前端 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…
从以上形容有些读者或者留神到了，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…
(因为这个视频是在我的外部零碎上录的，在显示 3D 模型的弹出窗口的地址栏里显示了外部零碎的 url，为了不透露进去，我在视频里把弹出窗口的顶部截掉了）
当工具栏上的 3D 按钮点击之后，呈现一个新的弹出窗口，成果和应用 SAP Visual Enterprise Viewer 解决方案一样，并且还多了一个动静旋转的成果，使用户可能全方位地察看到该足球每一个部位。
正如文章题目所示，这个解决方案里 3D 显示的技术实现采取的是纯 JavaScript 编程。奥秘就在 threejs，这是一个跨浏览器的 JavaScript 库和应用程序编程接口 (API)，用于应用 WebGL 在 Web 浏览器中创立和显示动画 3D 计算机图形。
对 threejs 的实现细节感兴趣的敌人们，能够拜访它的官网链接：
https://threejs.org/docs/inde…
在 threejs 的官网能找到很多用 threejs 开发而成的酷炫成果和应用教程。
上面是我做的原型次要的开发步骤，感兴趣的读者敌人们能够在本人的 CRM 零碎试试。
- 在事物码 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 坐标做微调，以造成旋转的视觉效果。
- 剩下的开发在 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 显示需要的企业有所启发。
