HTML5结合互联网+ 实现的3D隧道(附代码)

编程之家收集整理的这篇文章主要介绍了HTML5结合互联网+ 实现的3D隧道(附代码)编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

这篇文章给大家介绍内容是关于HTML5结合互联网+ 实现的3D隧道(附代码) ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

目前,物资采购和人力成本是隧道业发展的两大瓶颈。比如依靠民间借贷,融资成本很高;采购价格不透明,没有增值税发票;还有项目管控和供应链管理问题。成本在不断上升,利润在不断下降,隧道产业的“互联网+”迫在眉睫。隧道业的机械化程度高,机械制造和采购成本非常大,此外,隧道业的发展还面临建筑市场的严峻考验。“互联网+”提供大数据、信息流,为传统隧道企业由机械化向数字化挺进提供了机遇,隧道产业的建设工程需要持续的技术支持,也需要经验分享,如果可以借助互联网整理和分享相关经验,将为隧道产业发展带来智慧动力。

通过视频监控图像与语音录像系统,就能随时掌握各工点的施工情况,及时解决施工遇到的问题,从而提高管理效率;在比较特殊的地段,比如大山沟里,点多线长,交通不便,施工组织管理难度大,在传统的施工过程中,基本靠人来回穿梭于各工点之间或电话沟通,检查、监督施工,往往需要很多人参与管理,但仍然管不好,经常出现信息不对称,管理不到位等问题,基于“互联网+”的视频监控图像与语音录像系统应运而生。

代码生成

场景搭建

首先创建 3D 场景,HT(http://hightopo.com) 有 3D 组件,可以直接通过 new ht.graph3d.Graph3dVIEw 3D 组件(https://hightopo.com/guIDe/gu...)来创建一个实例,然后通过 getVIEw() 函数获取组件的底层 p,既然是 p,那位置显示控制就容易得多了:

dm = new ht.DataModel();// 数据容器,可以将显示在界面上的所有数据通过 dataModel.add 存储在数据容器中
g3d = new ht.graph3d.Graph3dVIEw(dm);// 3D 组件
g3d.addTodoM();// 将 3D 组件的底层 p 添加到 body 中

HT 的组件一般都会嵌入 borderpane、SplitVIEw 和 TabVIEw 等容器中使用,而最外层的 HT 组件则需要用户手工将 getVIEw() 返回的底层 p元素添加页面的 DOM 元素中,这里需要注意的是,当父容器大小变化时,如果父容器borderpane 和 SplitVIEw 等这些HT预定义的容器组件,则HT的容器会自动递归调用孩子组件 invalIDate 函数通知更新。但如果父容器是原生的 HTML 元素, 则HT组件无法获知需要更新,因此最外层的 HT 组件一般需要监听 window 的窗口大小变化事件,调用最外层组件 invalIDate 函数进行更新

为了最外层组件加载填充满窗口的方便性,HT 的所有组件都有 addTodoM 函数,其实现逻辑如下,其中 iv 是 invalIDate 的简写:

addTodoM = function(){   
    var self = this,
        vIEw = self.getVIEw(),// 获取组件的底层 p
        style = vIEw.style;
    document.body.appendChild(vIEw);// 将组件的底层 p 添加进 body 中           
    style.left = '0';// HT 组件设置 position 样式属性为 absolute 绝对定位方式
    style.right = '0';
    style.top = '0';
    style.bottom = '0';      
    window.addEventListener('resize', function () { self.iv(); }, false);            
}

场景序列化

最让我开心的应该是我的开发基本上跟设计部分完全分离了,因为 HT 可以通过 ht.Default.xhrLoad 函数直接加载 Json 文件的场景,这样我跟设计师就是双进程了,非常开心呢~加载场景有三个步骤,如下:

ht.Default.xhrLoad('scenes/隧道.Json', function(text){// 加载 Json 场景
    var Json = ht.Default.parse(text);// 转义 Json 文件
    dm.deserialize(Json);// 将 Json 内容反序列化到场景中
    // 可以在这个里面任意操作 datamodel 数据容器中的数据了
}

2638241182-5b5535bfe12c4_articlex.png

动画

我在场景中添加了一些功能包括前面提到过的一些动画操作,HT 封装好的 dataModel.addScheduleTask(task) 通过操作数据容器 dataModel 来控制加载动画https://hightopo.com/guIDe/gu...),动画部分在参数 task 中声明,task 为 Json 对象,可指定如下属性

  • interval:间隔毫秒数,认值为 10

  • enabled:是否启用开关,认为 true

  • action:间隔动作函数,该函数必须设置

我的动画一共三个,两个隧道中各有一个风扇、一个风向仪以及一个卷闸门。设置这三个图元变化即可,我在 Json 中分别将这三个图元的 tag 设置为 feng、feng2 以及 door,在代码中我就可以直接调用这三个图元的 tag 属性

var task = {
    action: function(data){
        if(!data.getTag()) return;
        var tag = data.getTag();// 获取图元的 tag 属性
    if(tag === 'feng'){
        data.r3(0, (data.r3()[1]+Math.PI/12), 0);// r3 为 3d 中的旋转,这里 y 轴在原来的基础上再旋转 Math.PI/12 角度
    }else if(tag === 'feng2'){
        data.r3(0, 0, data.r3()[2]+Math.PI/12);
    }else if(tag === 'door'){
            if(data.getTall() > 0){// 获取图元的 tall 属性,高度
                data.setTall(data.getTall()-20);// 设置高度为当前高度减去20
            }
        }
    }
}
dm.addScheduleTask(task);// 在数据容器 dataModel 中添加调度任务

接着是创建 form 表单,在表单上添加一些信息,比如交通灯的切换等等,场景显示的右上角的 form 表单我们这里不做解释,内容跟点击交通灯出现的 form 表单差不多,所以我们主要说明一下点击交通灯时出现的表单:

1754837488-5b5535dbe3be4_articlex.gif

表单中重复的部分比较多,我挑出三个部分来解释一下:文本部分、“当前状态”显示的图标以及下面“修改状态”中的图标点击选择部分:

form.addRow([// addRow 添加一行 我这个部分是添加一个标题
    {
        element: '交通灯控制',// 这一行第一部分的显示文本
        align: 'center',// 文本对齐方式
        color: 'rgb(0,210,187)',// 文本颜色
        Font: 'bold 16px arial, sans-serif'// 文本字体
    }
], [0.1]);// 记得要设置这行的宽度
form.addRow([ // 这行中有两个部分,一个“设备描述”,一个 文本“0”,所以要设置两个宽度宽度要放在一个数组中      
    '设备描述:',// 第一部分
    {// 第二部分
        element: '0',
        color: 'rgb(0,210,187)'
    }
],[80, 0.1], 34);// addRow 函数第二个参数宽度设置,将上面内容宽度依次放进这个数组中。第三个参数为高度
form.addRow([     
    '当前状态:',
    {// 也可以将数组中的某个部分设置为空字符串,占据一些宽度,这样比例比较好调
        element: ''
    },
    {
        ID: '105',// ID唯一标示属性,可通过formPane.getItemByID(ID)获取添加到对应的item对象
        button: {/ /按钮设置了该属性后HT将根据属性自动构建ht.Widget.button对象,并保存在element属性上
            icon: 'symbols/隧道用图标/light.Json',// 按钮上的显示图标
            background: 'rgba(0,7,26,0.60)',// 按钮背景
            bordercolor: 'rgb(0, 7, 26)',// 按钮边框颜色
            clickable: false// 是否可点击
        }
    }
],[80, 0.1, 84], 30);
form.addRow([// 如果和上面一行的距离差别与其它行间距不同,可以通过增加一行空行,设置高度即可                    
    '',
    {
        element: ''
    }
], [200, 0.1], 10);
form.addRow([                    
    '修改状态:',
    {
        element: ''
    },
    {
        button: {
            icon: 'symbols/隧道用图标/light.Json',// 设置按钮的图标
            background: 'rgba(0,7,26,0.60)',
            bordercolor: 'rgb(0, 7, 26)',
            groupID: 'btn',// 通过getGroupID和setGroupID获取设置组编号,属于同组的togglable按钮具有互斥功能。后面的三个按钮也是设置了同一个 groupID
            onClicked: function(e){// 点击后的回调函数
                btnClick('light'); 
            }
        }
    }
],[80, 0.1, 84], 30);

这个 form 表单的背景只是设置了一张图片而已:

background: url('assets/控制.png') no-repeat;

上面还有一个部分没有提及,就是点击按钮调用的 btnClick 函数

function btnClick(imagename){
    if(flag === 1){// 做的判断是根据3d的事件来处理的,等下会提
        dm.getDataByTag('light').s({// 通过getDataByTag获取节点,设置节点的style样式
            'back.image': 'symbols/隧道用图标/'+imagename+'.Json',// 设置图元的背面图片
            'front.image': 'symbols/隧道用图标/'+imagename+'.Json'// 设置图元你的前面图片
        });
    }else if(flag === 2){
        dm.getDataByTag('light1').s({
            'back.image': 'symbols/隧道用图标/'+imagename+'.Json',
            'front.image': 'symbols/隧道用图标/'+imagename+'.Json'
        });
    }else{}
    form.getVIEwByID(105).setIcon('symbols/隧道用图标/'+imagename+'.Json');// 设置ID为105的item内容显示的图标为form表单上点击的交通灯的按钮的图标
}

最后就是点击事件了,点击交通灯会直接切换交通灯的颜色(实际上是切换模型的贴图):

929565280-5b55361072ecc_articlex.png

g3d.mi(function(e){// addInteractorListener 函数 监听场景中的事件
    if(e.kind === 'clickData') {
        if (e.data.getTag() === 'jam') { createDialog(e.data); }
        else if (e.data.getTag() === 'light') {// 如果图元是背面的隧道的灯
            var frontimage = e.data.s('front.image');
            var imagename = frontimage.slice(frontimage.lastIndexOf('/')+1, frontimage.lastIndexOf('.'));
            btnClick('light', imagename);
        }
        else if (e.data.getTag() === 'light1'){// 正面的隧道的灯
            var frontimage = e.data.s('front.image');
            var imagename = frontimage.slice(frontimage.lastIndexOf('/')+1, frontimage.lastIndexOf('.'));
            btnClick('light1', imagename);
        }
    }
});

互联网+的概念在新兴产业上能够很好地运营,同时在传统行业中利用得当同样能够产生非常大的效益,比如智慧城市建设,智慧能源管理,智慧工厂,甚至是地铁监管等等都可以结合互联网+的模式来运作,在一定程度上节省了非常多的人力和时间成本。

247121857-5b55361dde6aa_articlex.png


3553906322-5b5536287bf76_articlex.png


3641558473-5b5536379a476_articlex.gif


相关推荐:

HTML5互联网:地铁行业新模式

解锁查看全部内容

付费后查看完整内容
限时 微信扫码支付 ¥9.9 19.9

总结

以上是编程之家为你收集整理的HTML5结合互联网+ 实现的3D隧道(附代码)全部内容,希望文章能够帮你解决HTML5结合互联网+ 实现的3D隧道(附代码)所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。

HTML5相关文章

网上看到一片好文,转载保留 高性能 CSS3 动画 尽可能的让动画元素不在文档流中,以减少重排 position: fixed; position: absolute; 尽可能多的
//anchorpoints:贝塞尔基点 //pointsAmount:生成的点数 //return 路径点的Array function CreateBezierPoints(anchorpoint
h5的28个新特性的详细介绍
分享一个用h5制作的网页版扫雷游戏实例代码
H5 的复制操作实例代码
分享一个vue全局配置的实例代码
分享几个html5冷门小知识
html5web存储实例代码
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注