用 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/...

招聘預覽

入場

點擊

選擇

查看

投遞

設計師

設計師是咱們系統的顏面，他(她)決定了你是否有興趣和動力繼續瀏覽下去，固然好的設計也須要良好的用戶體驗，這二者是不可或缺的。該系統的 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 篇 ，相信在你看完這些優秀的案例效果以後會抱着一腔熱血加入咱們的公司，讓咱們一塊兒爲推動國內工業互聯網發展出份薄力。

下面附上一張移動端運行結果：