前言

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

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

代码实现

整个场景是由 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])复制代码

这里我们将用到一个 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 = 0if (!e) e = g3d.getView().eif (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…）

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

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

转载于:https://juejin.im/post/5cfd9b50e51d451061721098

基于 HTML5 WebGL 的 3D 智慧隧道漫游巡检相关推荐

c#web页面显示弹窗_基于 HTML5 WebGL 的 3D 风机 Web 组态工业互联网应用
前言在目前大数据时代背景之下,数据可视化的需求也变得越来越庞大,在数据可视化的背景之下,通过智能机器间的链接并最终将人机链接,结合软件和大数据分析的工业互联网也将变得越来越容易实现! 国家也敏锐意识 ...
html5 光影效果,基于 HTML5 WebGL 的 3D 场景中的灯光效果
原标题:基于 HTML5 WebGL 的 3D 场景中的灯光效果构建 3D 的场景除了创建模型,对模型设置颜色和贴图外,还需要有灯光的效果才能更逼真的反映真实世界的场景.这个例子我觉得既美观又代表性 ...
基于 HTML5 WebGL 的 3D 服务器与客户端的通信
这个例子的初衷是模拟服务器与客户端的通信,我把整个需求简化变成了今天的这个例子.3D 机房方面的模拟一般都是需要鹰眼来辅助的,这样找产品以及整个空间的概括会比较明确,在这个例子中我也加了,这篇文章就算 ...
基于 HTML5 WebGL 的 3D 渲染引擎构建工厂运作系统
前言今天为大家带来一个很酷的作品,依然运用了强大的 HT for Web 的 3D 图形组件,动作流畅性能好,大家可以先来欣赏一下效果! 点我进入! 整体风格为科技金属风,制作精良,由于上传 gif ...
基于 HTML5 WebGL 的 3D 机房
前言用 WebGL 渲染的 3D 机房现在也不是什么新鲜事儿了,这篇文章的主要目的是说明一下,3D 机房中的 eye 和 center 的问题,刚好在项目中用上了,好生思考了一番,最终觉得这个例子最 ...
基于 HTML5 WebGL 的 3D 水泥工厂生产线
前言今天为大家带来一个很酷的作品,依然运用了强大的 HT for Web 的 3D 图形组件,动作流畅性能好,大家可以先来欣赏一下效果! 点我进入! 整体风格为科技金属风,制作精良,由于上传 gif ...
基于HTML5 WebGL实现3D飞机叶轮旋转
在上一篇<基于HT for Web矢量实现2D叶轮旋转>中讲述了叶轮旋转在2D拓扑上的应用,今天我们就来讲讲叶轮旋转在3D上的应用. 在3D拓扑上可以创建各种各样的图元,在HT for W ...
基于 HTML5 WebGL 的 3D 仓储管理系统
仓储管理系统(WMS)是一个实时的计算机软件系统,它能够按照运作的业务规则和运算法则,对信息.资源.行为.存货和分销运作进行更完美地管理,使其最大化满足有效产出和精确性的要求.从财务软件.进销存软件C ...
基于 HTML5 WebGL 的 3D 棉花加工监控系统
前言现在的棉花加工行业还停留在传统的反应式维护模式当中,当棉花加下厂的设备突然出现故障时,控制程序需要更换.这种情况下,首先需要客户向设备生产厂家请求派出技术人员进行维护,然后生产厂家才能根据情况再 ...

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

前言

代码实现

总结

基于 HTML5 WebGL 的 3D 智慧隧道漫游巡检相关推荐

最新文章

热门文章