前言大多数工业机械产品体积庞大，运输成本高。在参加行业展会或向海外客户销售时，如果没有实物展示，仅靠静态简单的图片手册介绍是不可能的。让客户对产品有全面的了解，不仅员工做起来麻烦，客户看也费劲。如果可以在Web上进行3D设备展示，销售人员可以随时向客户介绍演示，而无需考虑平台。还可以不受现实条件限制，演示设备拆装过程，展示产品内部结构和动态运行效果，让客户更直观地了解产品的组成部分，更准确、全面地了解产品的功能和特点。大大降低了通讯成本。为了解决这些行业痛点，本文使用Hightopo的HTforWeb产品实现了一个发动机设备3D可视化案例。系统预览预览地址：基于HTML5WebGL的引擎3D可视化系统（http://www.hightopo.com/demo/engine/）引擎模型由设计师通过3dsMax搭建，然后导出obj和mtl文件。解析HT中的obj和mtl文件，生成3D场景下可用的模型（参考obj手册《通过JSON加载》章节），因为每个部分需要单独操作，所以将设备模型拆分成多个obj文件导入。2D面板部分由HTvector绘制，我们需要创建ht.graph.GraphView和ht.graph3d.Graph3dView来呈现2D和3D内容。相关代码如下：varg2d=newht.graph.GraphView();varg3d=newht.graph3d.Graph3dView();//给body添加3D组件g3d.addToDOM();//添加2D组件在3D组件的根div下，g2d.addToDOM(g3d.getView());函数实现设备拆卸动画。当我们点击“Expand”按钮的时候，为每个动画设置不同的延迟，让动画错开来达到更好的性能。视觉效果可以更好地连接2D绘图和3D场景。如果我们的每一个动画都是匀速运行的话，难免会显得有些单调。所以我给不同的动画添加了不同的Easing函数。Easing函数通过定义不同曲线的数据公式来描述每帧回调时需要改变的图形参数属性范围，从而达到统一，先快后慢，先慢后快，甚至各种超过开始值和结束值然后慢慢恢复的动画特效。下面再举一个例子，帮助我们更直观的体验不同Easing函数的效果：《From Easing》。比如在图的中央，按照零件的顺序拆卸旋转放大的圆环。我为它设置了Easing.backBoth缓动效果。代码如下：//环形动画animCenter(data){ht.Default.startAnim({duration:4500,//设置缓动函数easing:E??asing.backBoth,//延迟动画执行一秒delay:1000,action:function(v,t){//修改图元的缩放值data.setScale(1+v*0.9,1+v*0.9);//修改图元的旋转角度data.setRotation(Math.PI*v);},});}//缓动函数Easing.easeOutStrong=function(t){varBACK_CONST=1.70158;如果((t*=2)<1){返回.5*(t*t*(((BACK_CONST*=(1.525))+1)*t-BACK_CONST));}返回.5*((t-=2)*t*(((BACK_CONST*=(1.525))+1)*t+BACK_CONST)+2);};装备部件的拆卸动画是通过改变节点的坐标和旋转角度来实现的，代码如下：//targetP3为拆卸坐标，p3为当前坐标varp3=node.p3();varoffset=[targetP3[0]-p3[0],targetP3[1]-p3[1],targetP3[2]-p3[2]];//targetR3为反汇编后的旋转角度，r3为当前旋转角度varr3=node.r3();varoffset=[targetR3[0]-r3[0],targetR3[1]-r3[1],targetR3[2]-r3[2]];//拆解动画ht.Default.startAnim({duration:2000,//设置缓动函数easing:E??asing.easeOutStrong,delay:1000,action:function(v,t){//修改节点坐标node.p3(p3[0]+offset[0]*v,p3[1]+offset[1]*v,p3[2]+offset[2]*v);//修改节点旋转角度node.r3(r3[0]+offset[0]*v,r3[1]+offset[1]*v,r3[2]+offset[2]*v);},});//缓动函数Easing.easeOutStrong=function(t){return1-(--t)*t*t*t;};绘图的两边也有面板，可以通过设置裁剪方向和裁剪比例来隐藏面板。代码如下：//设置图元的裁剪方向为从右到左node.s('clip.direction','left');//裁剪动画ht.Default.startAnim({duration:1800,easing:Easing.easeOutStrong,action:function(v,t){//修改图元的裁剪比例node.s('clip.percentage',1-v);}});//缓动函数Easing.easeOutStrong=function(t){return1-(--t)*t*t*t;};设备内部运行的动画接下来我们实现透视变化动画来观察设备不同部分的结构。3D场景中的视角是由Graph3dView提供的center（目标点坐标）和eye（相机坐标）两个参数决定的，所以视角动画只需要动态改变这两个参数即可。这里使用HT提供的moveCamera方法来实现。代码如下：g3d.moveCamera([-466,93,-280],[40,-40,-40],{duration:2500,easing:function(t){return1-(--t)*t*t*t;},});装置中的一些小零件是附着在大零件上的，它会跟随大零件的运动和转动，比如这个液压杆。当我们要实现小零件的运动动画时，修改坐标比较麻烦，所以我们采用修改锚点的方式来实现。锚点影响锚点也是旋转和缩放的中心点。这里通过修改液压杆的Y轴锚点来实现动画，效果如下：相关代码如下：ht.Default.startAnim({duration:800,action:function(v,t){//修改节点Y轴锚点node.setAnchor3d(0.5,v,0.5);},};点击流动按钮后，我们可以看到液体在管道中流动的动画。要实现流动效果，首先我们需要一个双面连续的贴图（可以从左到右或者上下无缝连接的贴图），然后我们用代码驱动UV向正方向偏移一个象限U轴的值，无限次重复这个动作。效果如下：代码如下：ht.Default.startAnim({duration:2000,action:function(v,t){//修改贴图uv值node.s('shape3d.uv.offset',[v,0]);},};设备恢复动画的鼠标入效果为了通过外壳清楚的观察设备的内部结构，当鼠标悬停在组件上时，我调整了外壳的透明度model并设置模型高亮模式，相关代码如下：//设置高亮颜色ht.Style['highlight.color']='rgba(255,255,255,0.6)';//设置当前高亮模式g3d.setHighlightMode('mouseover');//节点启用高亮效果data.s('highlight.visible',true);//节点设置为可交互data.s('interactive',true);//之后节点是交互的，它不会阻止场景上的默认交互行为data.s('preventDefaultWhenInteractive',false);//监听交互事件g3d.mi(function(e){//鼠标移动事件if(e.kind==='onEnter'){//节点开启透明data.s('shape3d.transparent',true);//设置节点透明度data.s('shape3d.opacity',0.25);}//鼠标离开事件if(e.kind==='onLeave'){data.s('shape3d.transparent',false);}});SceneAngleLimitation最后我们限制整个场景的视角范围，代码如下：//设置最大角度ht.Default.graph3dViewMaxPhi=Math.PI/2;//设置最小角度ht.Default.graph3dViewMinPhi=Math.PI/4;总结通过案例我们可以感受到，与传统方式相比，设备立体展示的表现形式更加灵活，效果更加直观生动。对于外向型企业，生动的演示动画可以让外商更快地了解产品的工作原理和优势，避免因语言错误造成的误解。与普通工业动画相比，Web可视化系统内容更丰富，自由度更高，后续需求变更也更容易。为了灵活性和更低的成本。本文使用的设备模型是设计者虚构的核动力发动机，更注重模型的展示效果。如果应用到实际产品中，还可以做出更加逼真的设备拆解过程。通过在线3D产品操作演练，对员工进行产品组装、拆卸、维护等方面的培训。有兴趣的可以参考我们的另一个案例?。
