基於 HTML5 WebGL 的 3D 渲染引擎構建工廠運作系統

前言

今天為大家帶來一個很酷的作品，依然運用了強大的 HT for Web 的 3D 圖形元件，動作流暢效能好，大家可以先來欣賞一下效果！

點我進入！

整體風格為科技金屬風，製作精良，由於上傳 gif 大小有限制，所以務必開啟連結檢視細節演示！

程式碼實現

做完場景後，首先我們要對它進行一些基本的設定，如：

// 設定 camera 的位置
gv.setEye([457, 9047, 434])
// 設定中心點位置
gv.setCenter([-4, -1, 0])
// 設定遠端距離
gv.setFar(500000)

設定後可以讓場景在反序列化後能夠顯示出我們想要的展示角度，設定遠端位置能夠避免造成場景顯示不完全等問題。

進入動畫

為了使其看起來有一個進入的過程，我們給場景增加一個入場的動畫來增色：

ht.Default.startAnim({
    duration: 3000, // 動畫週期毫秒數，預設採用`ht.Default.animDuration`
    action: function (v) { // action 函式必須提供，實現動畫過程中的屬性變化。
        gv.setEye([gv.getEye()[0] + (1117 - gv.getEye()[0]) * (v / 5), gv.getEye()[1] + (450 - gv.getEye()[1]) * (v / 5), gv.getEye()[2] + (1139 - gv.getEye()[2]) * (v / 5)])
    },
    finishFunc: function () { // 動畫結束後呼叫的函式。
        gv.scene = {
            eye: ht.Default.clone(gv.getEye()),
            center: ht.Default.clone(gv.getCenter()),
            far: ht.Default.clone(gv.getFar()),
            near: ht.Default.clone(gv.getNear())
        }
    }
})

這個動畫我們的思路是通過改變 camera 的位置來的實現，使用動畫函式我們可以在指定的時間週期內完成動畫，可理解為將某些屬性由起始值逐漸變到目標值的過程。通過在 action 函式中我們對 carmera 進行細緻地調整，就可以實現完美的入場效果了。finishFunc 函式中我們做了一個複製的操作，目的是要記住這個位置，以便於我們後面的功能實現，這個稍後會提到。

視角控制

對了，我們還要對整個場景的視角及範圍做限制：

var mapInteractor = new ht.graph3d.MapInteractor(gv)
gv.setInteractors([
    mapInteractor
])
gv.mp(function (e) {
    if (e.property === "eye") {
        if (gv.getEye()[0] > 3500) {
            gv.getEye()[0] = 3500
        }
        if (gv.getEye()[0] < -3500) {
            gv.getEye()[0] = -3500
        }
        if (gv.getEye()[1] > 9000) {
            gv.getEye()[1] = 9000
        }
        if (gv.getEye()[2] > 3500) {
            gv.getEye()[2] = 3500
        }
        if (gv.getEye()[2] < -3500) {
            gv.getEye()[2] = -3500
        }
    }
})

這樣可以限制翻轉到場景底面，然後再對 eye 做限制防止在拉遠的時候超出天空球包裹的範圍。

接下來我們要加一個場景視角復位的功能：

gv.mi(function (e) {
    if (e.kind === 'doubleClickBackground') {
        gv.moveCamera(gv.scene.eye, gv.scene.center, true)
    }
    ...
})

事件監聽一下，在雙擊的時候通過 moveCamera() 來移動中心點的位置，座標就是我們在入場動畫的操作中記錄的位置。

為了加強效能及便利性，我們在點選事件中再新增一個控制皮膚開關的的邏輯，這樣可以簡約化顯示：

if (e.kind === 'clickData') {
   if (e.data.getTag() === '按鈕') {
        var status = dm.getDataByTag('皮膚1').s('3d.visible')
        for (var i = 1; i <= 10; i++) {
            dm.getDataByTag('皮膚' + i).s('3d.visible', !status)
        }
    }
}

通過對 2D 皮膚的屬性改變來實現如下效果：

皮膚數值的變化也通過繫結的屬性來修改，為了做演示，我用一些隨機數來代替，這裡就不多說了。

動畫實現

然後我們要把管道的流動、履帶的執行、迴轉窯的運動以及磨輪轉動等動畫先實現出來：

function flow(name1, name2) {
    for (var i = 1; i <= 6; i++) {
        // uv 偏移
        if (name2) {
            dm.getDataByTag(name2 + i).s('shape3d.uv.offset', [dm.getDataByTag(name2 + i).s('shape3d.uv.offset')[0] + 0.005, dm.getDataByTag(name2 + i).s('shape3d.uv.offset')[1]])
        }
        // 設預設值
        else {
            dm.getDataByTag(name1 + i).s('shape3d.uv.offset', [0,0])
        }
    }
}
// 儲料罐
function tank(name, num, v) {
    for (var i = 1; i <= 8; i++) {
        dm.getDataByTag(name + i).setScaleTall(dm.getDataByTag(name + i).getScaleTall() + (num[i - 1] - dm.getDataByTag(name + i).getScaleTall()) * v)
    }
}
// 滾輪
function roller(name) {
    for (var i = 1; i <= 12; i++) {
        if (i % 2 === 0) {
            value = -0.1
        }
        else {
            value = 0.1
        }
        if (i <= 8) {
            dm.getDataByTag(name + i).r3(dm.getDataByTag(name + i).r3()[0], dm.getDataByTag(name + i).r3()[1] + value, dm.getDataByTag(name + i).r3()[2])
        }
        else {
            dm.getDataByTag(name + i).r3(dm.getDataByTag(name + i).r3()[0] + value, dm.getDataByTag(name + i).r3()[1], dm.getDataByTag(name + i).r3()[2])
        }
    }
}
anim()
function anim() {
    var num = []
    for (var i = 1; i <= 8; i++) {
        num.push(Math.random() * 6)
    }
    ht.Default.startAnim({
        duration: 1000,
        action: function (v, t) {
            dm.getDataByTag('流動2').r3(dm.getDataByTag('流動2').r3()[0] - 0.1, dm.getDataByTag('流動2').r3()[1], dm.getDataByTag('流動2').r3()[2])
            flow('流動', '流動')
            tank('儲料罐', num, v)
            roller('滾輪')
        },
        finishFunc: function () {
            anim()
        }
    })
}

我把他們統一放在一個動畫函式中迴圈播放，都是一些比較簡單的動畫，通過使高度、角度等屬性的變化來實現相應的動畫效果，如程式碼所示不一一細述。這裡我稍微說一下關於這個管道和履帶流動的實現思路，我是利用了調整 UV 貼圖來完成的。

什麼是 UV ？通俗的講，UV 就是把三維立體模型的外表面剝離下來，展開鋪平成二維平面狀態，以便進行貼圖繪製，就如同香菸盒上的包裝圖案其實是在紙盒片狀態下印刷完成的一樣。

首先我們需要繪製一張二方連續貼圖（左右或上下可以無縫銜接的貼圖），並且依照場景中管道和傳送帶流動的方向，將 UV 展成長條狀，與貼圖相匹配。


然後我們在通過程式碼驅動 UV 向 U 軸的正值方向偏移一個象限，並無限迴圈這一動作。回到三維場景中，你就會神奇的發現，管道和傳送帶在不間斷的流動著！

最後我們來完成卡車的執行動畫，整體流程先設計好：

var truck1 = dm.getDataByTag('卡車1')
var truck2 = dm.getDataByTag('卡車2')
var truck3 = dm.getDataByTag('卡車3')
var cargo1 = dm.getDataByTag('貨鬥1')
var cargo2 = dm.getDataByTag('貨鬥2')
var coal = dm.getDataByTag('貨1')
var limestone = dm.getDataByTag('貨2')
var panel1 = dm.getDataByTag('皮膚8')
var panel2 = dm.getDataByTag('皮膚9')
anim1()
// 出發
function anim1() {
    ht.Default.startAnim({
        duration: 4000,
        easing: function (t) { return (t *= 2) < 1 ? 0.5 * t * t : 0.5 * (1 - (--t) * (t - 2)) },
        action: function (v, t) {
            truck1.p3(truck1.p3()[0], truck1.p3()[1], truck1.p3()[2] + (700 - truck1.p3()[2]) * (v / 10))
            truck2.p3(truck2.p3()[0], truck2.p3()[1], truck2.p3()[2] + (700 - truck2.p3()[2]) * (v / 5))
            truck3.p3(truck3.p3()[0] + (300 - truck3.p3()[0]) * (v / 20), truck3.p3()[1], truck3.p3()[2])
        },
        finishFunc: function () {
            anim2()
        }
    })
}
// 掉頭
function anim2() {
    ht.Default.startAnim({
        duration: 1000,
        action: function (v, t) {
            truck1.r3(truck1.r3()[0], truck1.r3()[1] + (180 * Math.PI / 180 - truck1.r3()[1]) * v, truck1.r3()[2])
            truck2.r3(truck2.r3()[0], truck2.r3()[1] + (180 * Math.PI / 180 - truck2.r3()[1]) * v, truck2.r3()[2])
            truck3.r3(truck3.r3()[0], truck3.r3()[1] + (-90 * Math.PI / 180 - truck3.r3()[1]) *  v, truck3.r3()[2])
        },
        finishFunc: function () {
            anim3()
        }
    })
}
// 卸貨
function anim3() {
    ht.Default.startAnim({
        duration: 2000,
        action: function (v, t) {
            cargo1.r3(cargo1.r3()[0] + (70 * Math.PI / 180 - cargo1.r3()[0]) * v, cargo1.r3()[1],  cargo1.r3()[2])
            cargo2.r3(cargo2.r3()[0] + (70 * Math.PI / 180 - cargo2.r3()[0]) * v, cargo2.r3()[1],  cargo2.r3()[2])
            panel1.a('進度值', panel1.a('進度值') + (0 - panel1.a('進度值')) * v)
            panel2.a('進度值', panel2.a('進度值') + (0 - panel2.a('進度值')) * v)
            panel1.a('重量', panel1.a('進度值').toFixed(1))
            panel2.a('重量', panel2.a('進度值').toFixed(1))
        },
        finishFunc: function () {
            coal.s('3d.visible', false)
            limestone.s('3d.visible', false)
            anim4()
        }
    })
}
// 卸貨
function anim4() {
    ht.Default.startAnim({
        duration: 2000,
        action: function (v, t) {
            cargo1.r3(cargo1.r3()[0] + (0 * Math.PI / 180 - cargo1.r3()[0]) * v, cargo1.r3()[1],  cargo1.r3()[2])
            cargo2.r3(cargo2.r3()[0] + (0 * Math.PI / 180 - cargo2.r3()[0]) * v, cargo2.r3()[1],  cargo2.r3()[2])
        },
        finishFunc: function () {
            anim5()
        }
    })
}
// 返回
function anim5() {
    ht.Default.startAnim({
        duration: 4000,
        easing: function (t) { return (t *= 2) < 1 ? 0.5 * t * t : 0.5 * (1 - (--t) * (t - 2)) },
        action: function (v, t) {
            truck1.p3(truck1.p3()[0], truck1.p3()[1], truck1.p3()[2] + (1180 - truck1.p3()[2]) * (v / 10))
            truck2.p3(truck2.p3()[0], truck2.p3()[1], truck2.p3()[2] + (1180 - truck2.p3()[2]) * (v / 5))
            truck3.p3(truck3.p3()[0] + (1180 - truck3.p3()[0]) * (v / 20), truck3.p3()[1], truck3.p3()[2])
        },
        finishFunc: function () {
            anim6()
        }
    })
}
// 掉頭
function anim6() {
    ht.Default.startAnim({
        duration: 1000,
        action: function (v, t) {
            truck1.r3(truck1.r3()[0], truck1.r3()[1] + (0 * Math.PI / 180 - truck1.r3()[1]) * v, truck1.r3()[2])
            truck2.r3(truck2.r3()[0], truck2.r3()[1] + (0 * Math.PI / 180 - truck2.r3()[1]) * v, truck2.r3()[2])
            truck3.r3(truck3.r3()[0], truck3.r3()[1] + (90 * Math.PI / 180 - truck3.r3()[1]) * v, truck3.r3()[2])
        },
        finishFunc: function () {
            panel1.a('進度值', 1)
            panel2.a('進度值', 1)
            panel1.a('重量', 10)
            panel2.a('重量', 10)
            coal.s('3d.visible', true)
            limestone.s('3d.visible', true)
            anim1()
        }
    })
}

這個是我實現卡車的整個運作流程的完整程式碼，分別由幾段動畫協調組合而成，只要搞清楚順序以及每一個動作實現的邏輯並不難辦到，無非就是方向、角度和距離的一些計算，還有皮膚進度條同步的設定。

經過我們的努力後，一個炫酷專業的工廠流程系統的演示我們就完成了！

總結

在網際網路+ 概念飛速發展的今天，有太多的領域在等待著我們去挖掘，HT for Web 非常適用於各種的智慧建築，監控系統以及電力、燃氣等工業自動化 ( HMI / SCADA ) 領域。希望看了我的這篇部落格，大家能有所啟發，挑戰更多的不可能！