基于 HTML5 WebGL 的 3D 渲染引擎构建工厂运作系统

图扑软件_Hightopo
2,517 阅读6分钟

前言

今天为大家带来一个很酷的作品，依然运用了强大的 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 ) 领域。希望看了我的这篇文章，大家能有所启发，挑战更多的不可能！

avatar
文章
阅读
粉丝
相关推荐
WebGL高质量实时角色渲染
3.5k阅读
 · 
25点赞
尝试实现了国外大佬用Web做出来跨窗口渲染动画效果
55k阅读
 · 
792点赞
leaferjs，全新的 Canvas 渲染引擎
18k阅读
 · 
298点赞
我的WebGL 动态3D环状图
6.0k阅读
 · 
42点赞
基于 ChatGPT 和 React 搭建 JSON 转 TS 的 Web 应用
254k阅读
 · 
214点赞
内卷年代，是该学学WebGL了
70k阅读
 · 
497点赞
年后被吊打的第一面
252k阅读
 · 
3.3k点赞
两行CSS让页面提升了近7倍渲染性能！
111k阅读
 · 
1.9k点赞
零基础玩转 WebGL - 快速上手
12k阅读
 · 
219点赞
PixiJS - 最快、最灵活的 2D WebGL 渲染引擎
3.4k阅读
 · 
20点赞

友情链接：