前言招聘是一个公司非常重要的一个环节。一是影响公司未来的发展趋势。其次，为公司注入新鲜血液，使公司更具活力。.当然，在工业互联网和物联网背景下诞生的HT，也需要注入新鲜血液，进一步提升公司的技术和能力。本文不会像传统的招聘文案那样简单罗列一系列职位和一系列福利诱惑你加入，而是通过如何使用HT完成2D结合3D招聘DEMO，让你体验我们的设计美学能力、技术诱惑你加入的能力。由于本文来自HT的前端工程师，希望通过对本DEMO中涉及的一些交互和动画的讲解，让大家提前了解HT的一些基础知识，从而对HT有一个简单的整体认识HT。本文开发的招聘DEMO主要涉及三个职位：2D设计师、3D设计师和前端工程师。2D设计师主要负责两侧UI面板的设计，3D设计师主要负责3D场景中模型的搭建，模型的拼装等，前端工程师是主要负责将设计师构建的2D和3D部分结合起来，并加入交互和炫酷的动画，所以设计能力在这里不可忽视。如果没有优秀的设计，只有前端工程师完成这个DEMO，肯定掉了不止一个档次。因此，我司主要招聘2D设计师、3D设计师和前端工程师。如果你喜欢设计和前端，我们诚挚地邀请你考虑加入我们Hightopo的大家庭。我们不限制学历、性别和年龄，你只需要潜力和激情。当您对系统开发所需的角色有了大致的了解后，您可以点击以下链接查看设计师和程序员共同努力的成果：使用HTML5打造诚意满满的23D招聘稿http://www.hightopo.com/demo/...招聘预览，点击选择查看投放。设计师是我们系统的代言人。他（她）决定你是否有兴趣和动力继续浏览。当然，好的设计还需要好的用户体验，两者缺一不可。系统的二次元设计主要包括左侧两个面板的设计，以及点击帖子后看到的弹窗中的地图、卡通和按钮的设计。2D设计部分主要是通过designer绘制2D面板，比如designer可以使用市面上主流的工具Sketch，它是一款轻量级易用的矢量设计工具。我们的2D也是一个向量，有放大不失真的效果。当然也可以使用AI等其他设计工具进行设计。你在上面看到的图扑标志、渐变按钮、设计师图标、网站工程师图标等都可以通过编辑工具绘制出来。绘制完成后，可以使用可视化工具暴露出来的调整面板，填写颜色、位置、大小等信息进行修改。3D设计师可以使用目前主流的3dsMAX或Maya工具进行建模。这两款工具功能比较齐全，易学易用，生产效率高。本次招聘DEMO的3D场景主要包括飞机模型，两个卡通人物，一个旋转的半圆，以及一些装饰品。可以用主流的建模工具搭建模型部分，然后导出obj和mtl文件，放到我们的3D场景后，我们可以给模型添加交互，修改着色等一系列附加操作。比较简单的，比如旋转半圆，可以用我们提供的专用绘图工具来画。程序员上面说了，我们公司主要需要前端程序员，让设计师设计的静止不动的场景活起来，或者加交互，或者加动画，让场景看起来更酷。当然，如果需要和后台连接，就需要通过Ajax或者Socket从后台获取数据，然后填充到我们的前端页面中。比如当我们需要制作如下图的大屏时：我们可以看到这是一架无人机相关参数的大屏显示右边有三个表格。这三张表的数据都要通过后台推送到前台，然后前台通过代码实时刷新表的内容来展示。当然我们的大屏也可以嵌入第三方图表，比如ECharts、Highcharts等第三方图表。例如下面大屏是一个嵌入了Echarts图表的DEMO：下面讲解招聘DEMO的交互和动画的实现：场景动画分为飞机进场、转盘旋转、信封桶上升,并且设计文本淡出。正在移动的飞机是从屏幕右上角到视野左侧。场景中飞机是一个单独的节点，飞机上的转盘、卡通人物、装饰品等也是一个单独的节点，但是它们有一个共同的特点就是都吸附到飞机的节点上，因为吸附后，飞行器的运动也会带动所有吸附它的节点运动。HT中吸附节点的代码是node1.setHost(node2)，意思是节点node1吸附在node2上，所以我们只需要不断设置飞机在场景中的位置就可以移动进去了。下面是参考伪代码：//ht.Math是ht中封装的一个数学方法类Vector3，表示一个三维向量constVector3=ht.Math.Vector3;constmoveAirplane=(airplane,from,to,finishFunc=()=>{})=>{//startV3飞机运动的起始位置//endV3飞机运动的结束位置conststartV3=newVector3(from),endV3=newVector3(to);//ht.Default.startAnim是ht中封装的动画调度ht.Default。startAnim({duration:2000,easing:(t)=>t,finishFunc:finishFunc,action:(v,t)=>{//v的值会在2000ms内从0变为1//实时计算从startV3开始到endV3两点之间的位置点，然后动态设置到节点airplane.p3(newVector3().lerpVectors(startV3,endV3,v).toArray());}});};上面调用的ht.Default.startAnim可以参考HTforWeb入门手册，大致了解一下HT的机制接下来是转盘的转动。转盘上有几个不同的节点，同样吸附在转盘上。此时，附在转盘上的其他节点也会随着转盘的转动而转动。以下为参考伪代码：//1degreeconstDR=Math.PI/180;constrotatePanel=(panel,from,to,finishFunc=()=>{})=>{//起始角度conststartDegree=from*DR;//结束角度constendDegree=to*DR;//角度差constDEEP=endDegree-startDegree;//和上面一样开始动画ht.Default.startAnim({duration:2000,easing:(t)=>t,finishFunc:finishFunc,action:(v,t)=>{//设置转盘面板的角度在实时通过setRotationY方法panel.setRotationY(startDegree+DEEP*v);}});};之后，信箱向上移动。同样，信箱上有两个椭圆卡通人物和一些装饰品也必须贴在信箱上，信箱的移动也会带动吸收它的节点同时向上移动。以下是参考伪代码：constmoveLetterbox=(letterbox,from,to,finishFunc=()=>{})=>{constDEEP=to-from;ht.Default.startAnim({duration:2000,easing:(t)=>t,finishFunc:finishFunc,action:(v,t)=>{//使用setElevation设置信标在垂直方向的位置即时的letterbox.setElevation(from+DEEP*v);}});};最后，有一个改变设计文本透明度的动画。这部分可以参考HTforWebstyle手册。样式手册包含了HT可以设置的大部分样式，其中属性shape3d.opacity是设置节点的透明度。当然，如果想让shape3d.opacity生效，还必须设置shape3d.transparent，使当前节点透明。以下是透明度变化的伪代码：constopacityTransform=(node,from,to,finishFunc=()=>{})=>{constDEEP=to-from;ht.Default.startAnim({duration:2000,easing:(t)=>t,finishFunc:finishFunc,action:(v,t)=>{//通过node.s设置节点样式属性，关键是属性名，值为属性值node.s('shape3d.opacity',from+DEEP*v);}});}当我们打开页面后，发现右边的场景会有上下呼吸的效果。这部分效果是通过定期修改眼睛在3D场景中的位置来模拟的。3D中眼睛和中心的具体概念可以参考HTforWeb3D手册，这部分参考代码如下：constcameraShake=(g3d)=>{//获取当前视角const[x,y,z]=g3d.getEye();//视角的浮动距离constmoveDistance=10;//视角的浮动速度constspeed=1;//视角的浮动方向letdirection=-1;//当前视角的浮动距离letcurrentMoveDistance=0;window.cameraShakeInterval=setInterval(()=>{//增加当前视角的浮动距离moveStep+=speed*direction;//设置当前视角g3d.setEye([x,y+currentMoveDistance,z]);//如果当前视角浮动距离的绝对值大于视角浮动距离，改变浮动方向if(Math.abs(currentMoveDistance)>=moveDistance)direction=-direction;},100);};通过以上五个简单的动画，我们可以了解使用代码驱动节点移动的相关内容。无非就是调度，然后实时驱动节点的位置，或者节点的其他属性让它移动。所以如果你掌握了HT的基本核心概念，你就会制作出各种炫酷的动画，让你在HT的知识体系中漫游。当然，我上面说的只是一些介绍动画和一些基本概念。如果您对HT非常感兴趣，欢迎加入我们，点击上方DEMO链接，选择相应城市，然后将简历发送至相应邮箱，我们会及时回复。Recruitment我们团队对2019年的产出进行了总结，包括视觉案例集和一些行业概括，大家可以查看和分享2019年上百个HT工业互联网2D3D可视化应用案例，相信看完这些优秀的案例效果，你将满怀热情地加入我们公司。让我们共同努力，推动国内工业互联网的发展。附上移动端运行结果：
