前言

2015年5月，国务院正式印发《中国制造2025》，部署全面推进实施制造强国战略。与之对应的，有一个人们更熟悉的名字，即“工业4.0”。“工业4.0”主要分为“智能工厂”、“智能生产”和“智能物流”三大主题。以“智能生产”为例，它充分利用物联网、云计算和人工智能等技术，将生产设备、无线信号连接和传感器集成到一个生态系统中。这个生态系统可以监督整个生产线流程并自主决策。本项目聚焦的是汽车制造行业，利用 HT for Web 实现汽车生产流水线的 3D 可视化。 通过该项目，可以使汽车生产流程更加透明，管理更加精细化、高效化，带动汽车制造的智能化。

项目预览

图扑重卡组装车间：https://hightopo.com/demo2/truck/

HT for Web 的汽车生产流水线三维动画，仿真度高，根据设备实际尺寸等比缩小，利用鸟瞰镜头、特写镜头、跟踪镜头等方式，将生产线整体、局部与工艺流程完美展示。针对不同生产线设计不同的方案脚本，个性化内容定制，更契合企业形象。

界面加载效果预览

载入动画

页面初始化时，画面视角放在远处，然后通过动画将视角由远及近拉到生产线工位1的位置。在整个动画过程中，首先可以预览到生产线的全局，最后画面具体到初始工位上。

控制面板

该项目分为控制面板（2D）和生产线（3D）两部分。其中控制面板（2D）主要包含以下几部分：

1）科技环：如果仔细观察图1，在页面初始化时，有一个透明圆环做90度旋转。我们称之为科技环，其主要作用是用来提升渲染效果的。

2）流程控制按钮：我们在左上角放置了几个流程控制按钮。包括“运行”/“暂停”、播放速度控制，以及“拆分”/“合并”按钮。它们的实现方式会在后文详细阐述。

3）背景切换按钮：该项目提供了深浅两种色系选择。通过点击右上角的“切换背景”按钮，可以实现在深浅两种色系之间切换。其中浅色系效果如图3。

4）进度条：底部显示整个装配流程的进度，随着装配流程的进行，该进度条会逐渐填满。

图2

 图3

实现价值 

HT for Web 的汽车生产流水线3D可视化方案，完美模拟了生产线工作流程，再现了生产线制造过程，将庞大的生产线设备变成可随身携带的视频内容，满足了随时随地展示生产线的要求，使生产线的演示说明更加简便，降低汽车生产制造企业运营的成本，企业顺应数字化时代发展，在行业竞争中更具活力。

汽车生产流水线三维动画可帮助企业解决以下问题：

1）设备展示不受时空限制，为身处异地的客户提供便利，体现企业服务意识。

2）全方位无死角展示设备，客户可以更彻底的了解产品，成交率大大提高。

3）帮助业务人员销售设备，缩短沟通时间，使业务人员能够更有针对性的进行销售。

汽车生产流水线三维动画可应用于：业务人员辅助工具、网站产品宣传片、企业宣传片、设备改进、新设备投放、设备研发设计、展会、工艺演示、专利申请。

动画分析

我们将整个卡车组装生产线分成了12个工位，每个工位负责装配一部分零件，从而逐步实现从单个车架到整车的完整装配流程。由于该项目场景复杂，用到的设备也很多，如何让它们按照我们的想法实现整个动画？其中几处关键点的思路如下：

1、整体动画流程控制

通过仔细分析我们发现该生产流程中存在着大量的异步操作，比如需要先完成工位1的操作才能进入到工位2，要先装配座椅，然后才能装配车门。由此我们自然的想到了 javascript 与异步操作相关的两个关键字 async 和 await 。利用他们，可以让我们实现对整个动画流程的精准把控。

2、运行/暂停

我们通过一个标志位 isRunning 来标识动画的运行状态。在异步操作过程中，如果要实现对生产流程各个阶段的“运行”/“暂停”控制功能，我们将各个装配步骤尽可能的进行拆分，然后通过在每一个步骤执行之前，对 isRunning 进行循环判断来决定动画的状态。具体来说，系统在执行每一步操作之前，会 await 一个 Promise 。在这个 Promise 中，会检查 isRunning 的状态。如果当前进入到暂停状态，则通过 setInterval 定期检查 isRunning ，同时后续动画将会在此等待。直到系统变成运行状态，该 Promise 才会清除上面的定期任务并且通过 resolve() 返回，从而使得后续动画继续进行。

3、速度控制

除了运行暂停，项目中还提供了速度控制功能。分别为正常速度，2倍速和4倍速。这一部分的实现原理比较简单。即只需要在每一个动画实现时，将运行时间都乘以一个变量。该变量在正常运行时为1。如果是2倍速和4倍速，其值分别对应1/2和1/4。需要注意的是，鉴于 javascript 的任务处理方式，我们切换速度后，当前已经在执行的动画不会受到影响，其后面动画才会体现出速度的变化。

4、机械手

该项目中一个比较复杂又经常用到的设备就是机械手。场景中的机械手又分为不同的类型，如有的是抓手，有的是吸盘。同时，由于每个机械手都拥有多个运动臂和多个运动轴，如何实现其正确联动是整个项目中较为复杂的一个问题。

以图8中机械臂3为例，该机械臂的位置和角度受到机械臂2摆动的影响。因此，要使其随着机械臂2运动，首先需要将机械臂3吸附到机械臂2上。这样，机械臂2的任何运动都会带动机械臂3做同样的运动。

另外，我们观察机械臂3，其应当是围绕着右侧与机械臂2的结合处运动。而对于一个模型，在我们的场景中，其运动的基准点是自己的锚点。因此，我们还需要把机械臂3的锚点放到其运动轴的位置。这样调整之后，我们任意调整机械臂3在X轴方向上的运动角度，其都将围绕自己的运动轴旋转。如图9。

图8

图9

5、汽车零件装配精度

对于每一个要装配的零件，想要通过机械臂将其放到精确的既定位置是非常困难的。任何一个零件装配错位，都会影响最终的显示效果。工位越靠前，影响也越大。以前后悬架为例。如果这两者摆放错位，后续工位依附于他们的其他零件（如轮胎，发动机，传动轴等）也会跟着出现错位。这样最终组装出来的卡车就会失真。

为了解决这个问题，我们使用了两套零组件。其中一套零组件以组装完的形式，由设计师调整到正确位置。另一套散放到各个工位。初始化时，隐藏装配完成的零件，然后在动画执行的过程中，逐渐将每一个零件显示出来。这样就保证了最终拼装完成的卡车各个零组件处于正确的位置。

6、拆分/合并

1）确定所有要拆分的部件。

2）确定每个部件拆分时的平移方向。

3）确定每个部件拆分时要运行的距离。为了拆分后的效果，每个部件应当单独设定。

4）确定每个部件执行拆分动作时的持续时间。这里我们统一使用500ms。

以上信息确认完成之后，在点击拆分按钮时，只需要遍历各个部件，使用方法ht.Default.startAnim() 完成拆分动画。

在执行合并操作时，只需要修改平移方向并重复上述动画，其他参数不变。

总结

本项目以动画的方式向人们展示了一辆卡车的典型组装过程。重点分析了在动画实现过程中的几处关键点。该动画不仅可以用在汽车生产领域，其同样适用于其他行业的生产流水线。作为“智慧工厂”或“智能制造”领域的一环，生产可视化在里面占有重要角色。本项目所有效果均采用 HT 提供的 api 进行代码开发。感兴趣的小伙伴也可以上官网查询更多案例。

2019 我们也更新了数百个工业互联网 2D/3D 可视化案例集，在这里你能发现许多新奇的实例，也能发掘出不一样的工业互联网：https://mp.weixin.qq.com/s/ZbhB6LO2kBRPrRIfHlKGQA

同时，你也可以查看更多案例及效果：https://www.hightopo.com/demos/index.html