基於 HTML5 結合網際網路 的 3D 隧道

2022-08-05 19:00:17 字數 3121 閱讀 8874

目前,物資採購和人力成本是隧道業發展的兩大瓶頸。比如依靠民間借貸,融資成本很高;採購**不透明,沒有增值稅發票;還有專案管控和**鏈管理的問題。成本在不斷上公升,利潤在不斷下降,隧道產業的「網際網路+」迫在眉睫。隧道業的機械化程度高,機械製造和採購成本非常大,此外,隧道業的發展還面臨建築市場的嚴峻考驗。「網際網路+」提供大資料、資訊流,為傳統隧道企業由機械化向數位化挺進提供了機遇,隧道產業的建設工程需要持續的技術支援,也需要經驗分享,如果可以借助網際網路整理和分享相關經驗,將為隧道產業發展帶來智慧型動力。

首先建立 3d 場景,ht( 有 3d 元件,可以直接通過 new ht.graph3d.graph3dview 3d 元件(來建立乙個例項,然後通過 getview() 函式獲取元件的底層 div,既然是 div,那位置顯示控制就容易得多了:

dm = new ht.datamodel();// 資料容器,可以將顯示在介面上的所有資料通過 datamodel.add 儲存在資料容器中

g3d = new ht.graph3d.graph3dview(dm);// 3d 元件

g3d.addtodom();// 將 3d 元件的底層 div 新增到 body 中

ht 的元件一般都會嵌入 borderpane、splitview 和 tabview 等容器中使用,而最外層的 ht 元件則需要使用者手工將 getview() 返回的底層 div元素新增到頁面的 dom 元素中,這裡需要注意的是,當父容器大小變化時,如果父容器是 borderpane 和 splitview 等這些ht預定義的容器元件,則ht的容器會自動遞迴呼叫孩子元件 invalidate 函式通知更新。但如果父容器是原生的 html 元素, 則ht元件無法獲知需要更新,因此最外層的 ht 元件一般需要監聽 window 的視窗大小變化事件,呼叫最外層元件 invalidate 函式進行更新。

為了最外層元件載入填充滿視窗的方便性,ht 的所有元件都有 addtodom 函式,其實現邏輯如下,其中 iv 是 invalidate 的簡寫:

addtodom = function(), false);            

}

最讓我開心的應該是我的開發基本上跟設計部分完全分離了,因為 ht 可以通過 ht.default.xhrload 函式直接載入 json 檔案的場景,這樣我跟設計師就是雙程序了,非常開心呢~載入場景有三個步驟,如下:

ht.default.xhrload('scenes/隧道.json', function(text)
我在場景中新增了一些功能,包括前面提到過的一些動畫操作,ht 封裝好的 datamodel.addscheduletask(task) 通過運算元據容器 datamodel 來控制載入動畫(,動畫部分在引數 task 中宣告,task 為 json 物件,可指定如下屬性:

我的動畫一共三個,兩個隧道中各有乙個風扇、乙個風向儀以及乙個捲閘門。設定這三個圖元變化即可,我在 json 中分別將這三個圖元的 tag 設定為 feng、feng2 以及 door,在**中我就可以直接呼叫這三個圖元的 tag 屬性:

var task = else if(tag === 'feng2')else if(tag === 'door')}}

}dm.addscheduletask(task);// 在資料容器 datamodel 中新增排程任務

接著是建立 form 表單,在表單上新增一些資訊,比如交通燈的切換等等,場景預設顯示的右上角的 form 表單我們這裡不做解釋,內容跟點選交通燈出現的 form 表單差不多,所以我們主要說明一下點選交通燈時出現的表單:

表單中重複的部分比較多,我挑出三個部分來解釋一下:文字部分、「當前狀態」顯示的圖示以及下面「修改狀態」中的圖示點選選擇部分:

form.addrow([// addrow 新增一行 我這個部分是新增乙個標題

], [0.1]);// 記得要設定這行的寬度

form.addrow([ // 這行中有兩個部分,乙個「裝置描述」,乙個 文字「0」,所以要設定兩個寬度,寬度要放在乙個陣列中

'裝置描述:',// 第一部分

],[80, 0.1], 34);// addrow 函式第二個引數為寬度設定,將上面內容的寬度依次放進這個陣列中。第三個引數為高度

form.addrow([

'當前狀態:',,}

],[80, 0.1, 84], 30);

form.addrow([// 如果和上面一行的距離差別與其它行間距不同,可以通過增加一行空行,設定高度即可

'',], [200, 0.1], 10);

form.addrow([

'修改狀態:',,}

}],[80, 0.1, 84], 30);

background: url('assets/控制.png') no-repeat;
上面還有乙個部分沒有提及,就是點選按鈕後呼叫的 btnclick 函式:

function btnclick(imagename));

}else if(flag === 2));

}else{}

form.getviewbyid(105).seticon('symbols/隧道用圖示/'+imagename+'.json');// 設定id為105的item內容顯示的圖示為form表單上點選的交通燈的按鈕的圖示

}

最後就是點選事件了,點選交通燈會直接切換交通燈的顏色(實際上是切換模型的貼圖):

g3d.mi(function(e)

else if (e.data.gettag() === 'light')

else if (e.data.gettag() === 'light1')

}});

網際網路+的概念在新興產業上能夠很好地運營,同時在傳統行業中利用得當同樣能夠產生非常大的效益,比如智慧型城市建設,智慧型能源管理,智慧型工廠,甚至是地鐵監管等等都可以結合網際網路+的模式來運作,在一定程度上節省了非常多的人力和時間成本。

本文**於:猿2048

基於 html5 結合網際網路+ 的 3d 隧道

適合用HTML5開發的網際網路產品

哪些網際網路產品適合用html5開發?1 搜尋產品除此之外,由於html5技術本質上是增強了web頁面在移動裝置上的使用者體驗,並增強了web頁面可以實現的功能和效果,所以搜尋本身這一行為就適合html5。因為使用者常常需要在不同的平台及介面上使用搜尋引擎。手機 平板電腦 pc甚至是遊戲機。逐一平台...

網際網路與網際網路的區別

網際網路的英文單詞是 internet,網際網路的英文單詞是 internet。在英語中,專有名詞首字母都是大寫,用於特指某一事物。大寫的 internet 是作為乙個專有名詞出現的,所指的是由阿帕網發展而來的現如今全球最大的計算機網路,稱之為網際網路。小寫 internet 是作為乙個普通單詞出現...

HTML 5主宰網際網路未來 ,這點不要質疑

在作業系統層面,儘管目前ios和android佔據主導地位,基於html 5的開放性os尚處於初次嘗試階段,不過歷史早已證明,在以開放自由精神主導的網際網路,沒有壁壘是不可攻破的,諸如微軟 intel等曾經的寡頭已經走下神壇,而新的壟斷者將面臨著同樣的挑戰,未來的作業系統,必將會是開放且極富個性化的...