用 HTML5 造个有诚意的 23D 招聘稿

前言

招聘对于一个公司来讲是至关重要的一个环节，首先它影响着公司将来发展的趋势，其次它为公司注入新鲜血液，使公司更具备活力。固然在工业互联网，物联网大背景下诞生的 HT 也是须要注入新鲜的血液来进一步提高公司的技术和能力。本文不会像传统的招聘文案简单的列举一系列的岗位，一系列的福利来诱惑大家的加入，而是会经过如何使用 HT 完成一个 2D 结合 3D 的招聘 DEMO 来让大家体会到咱们的设计审美能力，技术能力从而来诱惑大家的加入。由于这篇文章来自一位 HT 的前端工程师，因此但愿经过讲解这个 DEMO 所涉及的一些交互，动画来让你提早了解 HT 的部分基础知识，从而对 HT 有一个简单的总体认识。

本文所开发的招聘 DEMO 主要涉及 2D 设计师，3D 设计师以及前端工程师这三个岗位。2D 设计师主要负责两侧 UI 面板的设计，3D 设计师主要负责 3D 场景中模型的搭建，模型的组装等，前端工程师主要负责将设计师搭建完成的 2D 以及 3D 部分进行结合，而且加上交互和炫酷的动画，因此设计的能力在这里是不容忽视的，若是没有优秀的设计，只有前端工程师完成这个 DEMO 的话那确定是降低了不止一个档次。所以咱们公司招聘的人员主要有 2D 设计师，3D 设计师以及前端工程师这三个角色，若是你热爱设计，热爱前端，咱们真诚邀请你考虑加入咱们 Hightopo 你们庭，咱们不限制学历、性别和年龄，只须要你具备潜力和激情。

当你大体了解完开发该系统所需的角色时，你能够点击下面的连接查看由设计师和程序员共同努力的结果：

用 HTML5 造个有诚意的 23D 招聘稿 http://www.hightopo.com/demo/ht-job/

招聘预览

入场

点击

选择

查看

投递

设计师

设计师是咱们系统的颜面，他(她)决定了你是否有兴趣和动力继续浏览下去，固然好的设计也须要良好的用户体验，这二者是不可或缺的。该系统的 2D 设计主要有左侧的两个面板设计，以及点击投递以后你所看到的弹窗内的地图，卡通和按钮的设计，2D 设计部分主要经过设计师绘制 2D 面板，例如设计师可使用如今市面主流的工具 Sketch，它是一款轻量，易用的矢量设计工具，咱们的 2D 也是矢量，具备放大不失真的效果，固然也可使用 AI 等其它设计工具进行设计。

上面你所看到的图扑 logo，渐变按钮，设计师 icon，网站工程师 icon 等等你均可以经过编辑工具进行绘制，绘制完以后能够经过可视化工具暴漏的调整面板进行填充色，位置，大小等信息的修改。

3D 设计师可使用如今主流的 3ds MAX 或者 Maya 工具来进行建模，这两款工具相对来讲功能完善，易学易用，制做效率较高。这个招聘 DEMO 的 3D 场景主要包括飞机的模型，两个卡通人物，一个转动的半圆，以及部分的装饰品，模型部分你能够经过主流的建模工具进行搭建，以后导出 obj 和 mtl 文件就能够放入咱们的 3D 场景，放入以后咱们就能够给模型添加交互，修改染色等一系列额外的操做。像比较简单的例如转动的半圆，能够用咱们提供的专门绘制工具进行绘制。

程序员

咱们公司如上所讲的主要须要前端程序员来将设计师设计出来的一动不动的场景活起来，或增长交互，或增长动画，使场景看起来更加的炫酷。固然若是须要与后台进行对接，则须要经过 Ajax 或者 Socket 来从后台获取数据，以后填充到咱们前端的页面，例如当咱们须要作以下图的大屏时：

咱们能够看到这是一个无人机相关参数的大屏展现，右侧有三个表格，这三个表格的数据确定是经过后台推送到前台，以后前台经过代码实时刷新表格的内容来进行展现。

固然咱们大屏也能够嵌入第三方的图表，例如 ECharts，Highcharts 等等第三方的图表，以下面大屏就是嵌入 Echarts 图表的一个 DEMO :

下面讲解该招聘 DEMO 部分交互与动画的实现：

该 DEMO 入场动画分为飞机移入，转盘旋转，信封桶上移，Design 文字淡出，其中飞机移入是从屏幕的右上角飞入到视野左侧，在场景中，飞机是一个单独的节点，飞机上的转盘，卡通人物，装饰品等等也都是单独的一个节点，可是他们有共同的特征就是都是吸附在飞机这个节点上，由于吸附以后，飞机的移动也会带动全部吸附它的节点移动，在 HT 中吸附节点的代码为 node1.setHost(node2) ，表明 node1 这个节点吸附在 node2 这个节点上，因此咱们飞机的移入只须要不断设置飞机在场景中的位置便可，以下为参考伪代码：

// ht.Math 是 ht 中封装的数学方法类 Vector3 表明三维的向量
const Vector3 = ht.Math.Vector3;
const moveAirplane = (airplane, from, to, finishFunc = () => {}) => {
     // startV3 飞机移动的起始位置
     // endV3 飞机移动的终止位置
    const startV3 = new Vector3(from),
          endV3 = new Vector3(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 飞机这个节点上
            airplane.p3(new Vector3().lerpVectors(startV3, endV3, v).toArray());
        }
    });
};

上面所调用的 ht.Default.startAnim 可参考 HT for Web 入门手册 ，能够大致了解下 HT 的机制。

接下来是转盘的旋转，转盘上也有几个不一样的节点，同理也是吸附在转盘上面，此时转盘转动吸附在转盘上面的其它节点也会跟着转动，以下为参考伪代码：

// 1 度的弧度值
const DR = Math.PI / 180;
const rotatePanel = (panel, from, to, finishFunc = () => {}) => {
     // 起始角度
    const startDegree = from * DR;
     // 终止角度
    const endDegree = to * DR;
     // 角度差
    const DEEP = endDegree - startDegree;
     // 同上启动动画
    ht.Default.startAnim({
        duration: 2000,
        easing: (t) => t,
        finishFunc: finishFunc,
        action: (v, t) => {
             // 经过 setRotationY 方法实时设置转盘 panel 的角度
            panel.setRotationY(startDegree + DEEP * v);
        }
    });
};

以后是信筒的向上移动，同理信筒上面有两个椭圆的卡通人物和一些装饰品也都要吸附在信筒上面，以后信筒向上移动也会带动吸附它的节点同时向上移动，以下为参考伪代码：

const moveLetterbox = (letterbox, from, to, finishFunc = () => {}) => {
    const DEEP = to - from;
    ht.Default.startAnim({
        duration: 2000,
        easing: (t) => t,
        finishFunc: finishFunc,
        action: (v, t) => {
             // 经过 setElevation 来实时设置信筒在垂直方向的位置
            letterbox.setElevation(from + DEEP * v);
        }
    });
};

最后是一个 Design 文字透明度的变化动画，该部分能够参考 HT for Web 风格手册 该风格手册里面有 HT 能够设置的节点的大部分风格，其中 shape3d.opacity 这个属性就是设置节点的透明度，固然若是要让 shape3d.opacity 生效，也要同时设置 shape3d.transparent 来让当前节点开启透明，以下为透明度变化参考伪代码：

const opacityTransform = (node, from, to, finishFunc = () => {}) => {
    const DEEP = to - from;
    ht.Default.startAnim({
        duration: 2000,
        easing: (t) => t,
        finishFunc: finishFunc,
        action: (v, t) => {
             // 经过 node.s 设置节点 style 属性，key 为属性名，value 为属性值
            node.s('shape3d.opacity', from + DEEP * v);
        }
    });
}

当咱们打开页面以后咱们发现右侧场景会有相似呼吸的效果上下浮动，这部分效果是经过有规律的修改 3D 场景的 eye 眼睛的位置来模拟实现的，具体 eye 眼睛和 center 中心在 3D 中的概念能够参考 HT for Web 3D 手册 ，该部分的参考代码以下：

const cameraShake = (g3d) = >{
     // 获取当前视角
    const [x, y, z] = g3d.getEye();
     // 视角浮动距离
    const moveDistance = 10;
     // 视角浮动速度
    const speed = 1;
     // 视角浮动方向
    let direction = -1;
     // 当前视角浮动距离
    let currentMoveDistance = 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 连接，选择对应的城市，而后发送本身的简历到对应的邮箱，咱们会及时的回复。

诚聘

咱们团队在 2019 年对产出的效果进行了一个总结，包括可视化的案例集和行业的一些概括总结，具体能够查看 分享数百个 HT 工业互联网 2D 3D 可视化应用案例之 2019 篇 ，相信在你看完这些优秀的案例效果以后会抱着一腔热血加入咱们的公司，让咱们一块儿为推动国内工业互联网发展出份薄力。

下面附上一张移动端运行结果：