共计 3103 个字符，预计需要花费 8 分钟才能阅读完成。
前言
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
