基于 HTML5 WebGL 的 3D 智慧隧道漫游巡检

栏目: Html5 · 发布时间: 5年前

内容简介:这次为大家展示的是通过HT for Web 灵活的图型化编辑工具打造的智慧隧道监控系统。通过 HTML5 技术实现了桌面和移动端的跨平台性,同时现实了可视化运维。这次主要跟大家分享里面的漫游巡检功能,完美进行第一人称视角体验整体结构环境,酷似游戏一样给人一种真实的感受,比平面更加直观,随意游离与虚拟和现实之间。

前言

这次为大家展示的是通过HT for Web 灵活的图型化编辑 工具 打造的智慧隧道监控系统。通过 HTML5 技术实现了桌面和移动端的跨平台性,同时现实了可视化运维。

基于 HTML5 WebGL 的 3D 智慧隧道漫游巡检

这次主要跟大家分享里面的漫游巡检功能,完美进行第一人称视角体验整体结构环境,酷似游戏一样给人一种真实的感受,比平面更加直观,随意游离与虚拟和现实之间。

代码实现

整个场景是由 3D 组件搭建而成的,需要大量的代码,为了简化,我用 HT 封装的 ht.JSONSerializer 来将场景序列化为一个 json 文件。在代码中,再通过 DataModel 数据模型反序列化,就是将 json 格式转化为对象并添加到数据模型中。可参考序列化手册。

我已经搭建好了场景,但是其中包含重要的一点就是我们在构建过程中一定要制作一条线来作为路径基础,这个我们稍后用到。

首先我们先记录一下整体场景的初始视角,以便于我们在结束漫游后可以恢复视角:

var dm = new ht.DataModel();
var g3d = new ht.graph3d.Graph3dView(dm)
var aEye = ht.Default.clone(g3d.getEye())
var aCenter = ht.Default.clone(g3d.getCenter())复制代码

为了避免在漫游的过程中在视角运动上出现 bug 我们先将交互器关掉。3D 交互器是什么呢?默认 Graph3dView 提供的是围绕 Graph3dView#getCenter() 中心点旋转的操作模式,这种模式下进行 Drag 操作时会改变 Graph3dView#getEye() 的眼睛观察点位置,鼠标滚轮或触屏 pinch 缩放的效果,实质上也是改变 eye 的位置,使其更接近或者远离 center 中心位置,最终达到视觉缩放或者走近和远离物体的效果。因为在进入漫游时不允许其它操作来干涉进行,所以要先处理掉:

g3d.setInteractors(null)复制代码

要移动,肯定要走我们在场景中画的隐藏的线来做路径:

var point1 = path.getPoints().toArray()[0]
var point2 = path.getPoints().toArray()[3]复制代码

通过控制路径中前后两点来设置 3D 场景中的 eye 和 center,这样就能营造出第一人称视角效果:

var distanceX = (point1.x - point2.x)
var distanceY = (point1.y - point2.y)
// 两点之间的距离通过三角形勾股定理计算
var distance = Math.sqrt(distanceX * distanceX + distanceY * distanceY)
// 眼睛的位置
g3d.setEye([point2.x, 800, point2.y])
// "我"的位置
g3d.setCenter([point1.x, 800, point1.y])复制代码

基于 HTML5 WebGL 的 3D 智慧隧道漫游巡检

这里我们将用到一个 walk 方法,它能够同时改变 eye 和 center 的位置,也就是 eye 和 center 在两点建立的矢量方向上同时移动相同的偏移量。第一个参数为偏移的矢量长度值,结束时恢复交互器并清空动画:

var anim = g3d.walk(distance, {
    frames:700,
    finishFunc: function () {
        g3d.setEye(aEye)
        g3d.setCenter(aCenter)
        g3d.setInteractors([
            mapInteractor
        ])
        anim = null
    }
}, true)复制代码

之前关闭交互器还有一个原因就是在漫游过程中我们还要有相关操作,先监听鼠标滚轮事件,通过滚动来改变速度,向上加速,向下减速:

g3d.getView().addEventListener('mousewheel', function (e) {
    if (anim) {
        let detail = 0
        if (!e) e = g3d.getView().e
        if (e.wheelDelta) {
            detail = e.wheelDelta/120
        } else if (e.detail) {
            detail = -e.detail/3
        }
        if (detail) // 改变速度
            if (detail < 0) { // 向下滚动
                if (anim.frames < 2000) {
                    anim.frames += 50
                }
            } else { // 向上滚动
                if (anim.frames > 100) {
                    anim.frames -= 50
                }
            }
    }
})复制代码

再监听点击事件来实现暂停、继续和退出:

g3d.getView().addEventListener('mousedown', function (e) {
    if (anim) {
        if (e.button === 0) { // 左键暂停
            anim.pause()
        }else if (e.button === 2){ // 右键继续
            anim.resume()
        }else if(e.button === 1){ // 中键退出
            anim.stop()
            anim = null
        }
    }
})复制代码

至此,漫游功能的实现代码解释完毕,很短的代码量,却做出了这么大的工程!

总结

同样也有很多包含这个功能模块的例子,都有着不错的效果:

机房( www.hightopo.com/demo/room-w…

基于 HTML5 WebGL 的 3D 智慧隧道漫游巡检

地铁站( www.hightopo.com/demo/ht-sub… )等等都是很好的。

基于 HTML5 WebGL 的 3D 智慧隧道漫游巡检

从工业互联网到产业互联网,越来越多的智能化监控系统,运维系统,收费管理系统等其他业务系统应接不暇的出现,这些都是跟我们生活紧密相连的,都可以用信息化的方式来表达,HT 的轻量化与之相结合更好的展现出数据可视化的优势。比如我们这次介绍的关于隧道的就是明显的例子,还有桥梁公路,高铁动车,乃至交通运输领域,都被广泛应用着。随着时代的进步和前端 HTML5、WebGL、WebVR 等技术的成熟,相信 Web 承担越来越重度的渲染呈现应用是不可逆的趋势!


以上所述就是小编给大家介绍的《基于 HTML5 WebGL 的 3D 智慧隧道漫游巡检》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

长尾理论2.0

长尾理论2.0

安德森 / 乔江涛、石晓燕 / 中信出版社 / 2009-5 / 42.00元

《长尾理论2.0》是克里斯·安德森对所有问题最明确的回答。在此书中,他详细阐释了长尾的精华所在,揭示了长尾现象是如何从工业资本主义原动力——规模经济与范围经济——的矛盾中产生出来的。长尾现象虽然是明显的互联网现象,但其商务逻辑本身,却是从工业经济中自然而然“长”出来的,网络只是把酝酿了几十年的供应链革命的诸多要素简单地结合在一起了。同时,长尾理论转化为行动,最有力、最可操作的就是营销长尾,通过口碑......一起来看看 《长尾理论2.0》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

html转js在线工具
html转js在线工具

html转js在线工具