HTML如何实现3 d隧道

　　介绍

小编给大家分享一下的HTML如何实现3 d隧道,希望大家阅读完这篇文章后大所收获、下面让我们一起去探讨吧!

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

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

首先创建三维场景,HT (http://hightopo.com)有3 d组件,可以直接通过新的ht.graph4d。Graph4dView 3 d组件(https://hightopo.com/guide/gu..)来创建一个实例,然后通过getView()函数获取组件的底层p,既然是p,那位置显示控制就容易得多了:

dm=new ht.DataModel();//数据容器,可以将显示在界面上的所有数据通过dataModel。添加存储在数据容器中 　　g3d=new ht.graph4d.Graph4dView (dm);//3 d组件 　　g3d.addToDOM();//将3 d组件的底层p添加到身体中

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

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

addToDOM=function () { 　　var自我=, 　　视图=self.getView()//获取组件的底层p 　　风格=view.style; 　　document.body.appendChild(视图);//将组件的底层p添加进身体中 　　风格。左=& # 39;0 & # 39;;//HT组件默认设置位置样式属性为绝对绝对定位方式 　　风格。正确的=& # 39;0 & # 39;; 　　风格。顶级=& # 39;0 & # 39;; 　　风格。=& # 39;0 & # 39;; 　　window.addEventListener(& # 39;调整# 39;,函数(){self.iv ();},假); 　　}

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

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

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

<李>

间隔:间隔毫秒数,默认值为10

<李>

启用:是否启用开关,默认为真正的

<李>

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

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

={var任务 　　行动:功能(数据){ 　　如果(! data.getTag())返回; 　　var=data.getTag标记();//获取图元的标签属性 　　如果标签===& # 39;冯# 39;){ 　　数据。r3 (0, (data.r3 () [1] + Math.PI/12), 0);//r3为3 d中的旋转,这里y轴在原来的基础上再旋转数学。π/12角度 　　}else if(标签===& # 39;feng2& # 39;) { 　　数据。r3 (0, 0, data.r3 () [2] + Math.PI/12); 　　}else if(标签===& # 39;门# 39;){ 　　如果(data.getTall()在0){//获取图元的高属性,高度 　　data.setTall (data.getTall() -20);//设置高度为当前高度减20去 　　} 　　} 　　} 　　} 　　dm.addScheduleTask(任务);//在数据容器模型中添加调度任务

HTML如何实现3 d隧道