基于BIM的PC斜拉橋信息管理平臺構建研究

發布時間：2023-07-06 10:23

摘要 I

Abstract II

1緒論 1

1.1選題背景及意義 1

1.1.1選題背景 1

1.1.2選題意義 2

1.2國內外研究現狀 3

1.2.1BIM 技術國外研究現狀 3

1.2.2BIM技術國內研究現狀 3

1.2.3WebGL可視化技術國內外研究現狀 4

1.3本文研究內容與技術路線 5

1.3.1研究內容 5

1.3.2技術路線 6

2相關技術介紹 7

2.1Revit二次開發技術介紹 7

2.1.1AutodeskRevit 軟件 7

2.1.2Revit二次開發技術 7

2.2WebGL技術介紹 8

2.2.1WebGL 技術 8

2.2.2Three.js 圖形引擎 8

2.3前端開發技術及框架介紹 8

2.4后端開發技術及框架介紹 9

2.4.1JavaEE 介紹 9

2.4.2后端開發框架 10

2.4.3MySQL數據庫介紹 11

2.5本章小結 11

3斜拉橋參數化模型建立與構件編碼 12

3.1BIM信息模型分類與編碼標準研究 12

3.1.1信息模型分類體系 12

3.1.2信息模型編碼體系 13

3.1.3橋梁工程BIM模型信息分類與編碼應用 15

3.2Revit 軟件參數化 18

3.2.1參數化概述 18

3.2.2傳統參數化建模過程 18

3.3Dynamo 參數化 18

3.3.1Dynamo 概述 18

3.3.2Dynamo 參數化 21

3.4基于 Revit+Dynamo 的斜拉橋參數化模型建立 21

3.4.1工程背景 21

3.4.2下部結構參數化建模 21

3.4.3上部結構參數化建模 23

3.4.4斜拉橋參數化構件編碼 30

3.4.5全橋 BIM 模型建立 32

3.5本章小結 32

4斜拉橋 BIM 模型信息轉換與模型可視化研究 33

4.1BIM 模型信息導出插件設計 33

4.1.1橋梁 BIM 模型信息構成 33

4.1.2Revit API 34

4.1.3基于Revit二次開發提取模型信息 35

4.2BIM模型信息的JSON格式化表達 39

4.3基于Three.js技術實現模型網頁端重建 41

4.3.1Three.js 技術特點 41

4.3.2模型網頁端渲染 41

4.4BIM 模型與網頁端交互 44

4.4.1模型基本交互 44

4.4.2模型拾取狀態變更 45

4.4.3模型屬性信息查看 46

4.5本章小結 48

5BIM+Web 斜拉橋信息管理平臺構建研究 49

5.1平臺架構設計 49

5.2BIM+Web平臺項目搭建 49

5.2.1平臺項目創建 50

5.2.2SpringBoot 框架整合 51

5.3平臺功能開發研究 52

5.3.1登錄用戶管理 52

5.3.2模型信息文件上傳 54

5.3.3平臺可視化模型交互功能測試 57

5.3.4模型信息管理 58

5.3.5檢測信息管理 61

5.4平臺開發相關技術代碼 63

5.4.1平臺登錄頁面相關代碼 63

5.4.2平臺橋梁檢測信息上傳頁面相關代碼 65

5.5本章小結 68

6總結與展望 69

6.1主要工作總結 69

6.2展望 70

致謝 71

參考文獻 72

1緒論

1.1選題背景及意義

1.1.1 選題背景

BIM(Building Information Modeling)又被稱為建筑信息模型。它是一種將工程建設信息與三維模型進行綁定，將三維數字化技術作為研究基礎，從而形成的一種工程數據模型。近年來，BIM技術發展尤其迅速，BIM技術作為一種重要技術手段已經由最初的建筑行業發展應用到橋梁行業，推動橋梁行業技術化發展，產業化變革［1］。

對于 BIM 技術來說，其最大的價值應集中于信息二字。在實際工程活動中，有著多個階段，譬如：設計階段，施工階段，運維階段等，而在每個階段中都遵循著不同的數據模型標準，這將使得各個階段間的數據交互變得十分困難，給數據存儲以及后續數據管理帶來諸多的不便。BIM作為一個全新的平臺，能包含工程項目不同階段全部的參數信息，有效避免信息孤島和信息斷層現象，使工程設計效率和品質得到全面提高［2］。對于當前橋梁工程建設來說，BIM技術及信息化應用并不是很成熟，橋梁工程的設計主要由二維圖紙來實現，由于橋梁結構的復雜性，結構多樣性，以及施工周期較長，這使得只使用二維圖紙來指導施工變得較為困難，一些精細部件的設計及某些細節有時可能會由于工程施工人員的疏忽而造成不必要的麻煩I3】。BIM技術的到來使得當前存在的問題有了跨越式的進展。但是，當前BIM技術也存在其局限性，盡管當前可以通過BIM 三維模型指導施工，但對于一個工程人員來講，面對這樣一種全新技術，一個嶄新的設計平臺難免會有一種陌生感，因而探求將構建的橋梁三維信息模型進行可視化平臺直觀展示，并且基于其攜帶的信息進行標準統一化的管理成為了目前首要解決的問題。

基于BIM的可視化信息管理平臺是BIM技術在項目工程管理中發展出來的一種產物［4］,在過去，可視化管理平臺一般是基于C/S (一種基于客戶端與服務器之間的交互結構)，宏觀上來說，由于C/S架構出現較早，其內部技術完整且較為成熟、安全性可以得到輕松保證，另外 C/S 架構界面與操作功能豐富，且只需要一層交互，因此響應速度較快。但C/S結構所能適應的范圍卻非常有限，一般來說只能運用于局域網中。同時，C/S結構所面向的用戶群比較固定，用戶需要安裝相應程序才可使用，導致許多不可知的用戶將無法使用該結構所開發程序，尚且當使用C/S結構所開發的程序需要進行升級時，其維護費用較高，不適宜當前階段對于新興平臺的開發研究。為了解決C/S架構可視化系統所存在的問題并滿足建筑行業多專業及多參與方間的信息流動及數據共享更快、更便捷的新需求［5］, B/S結構出現了。B/S是一種基于瀏覽器與服務器之間的交互結構，與傳統的C/S結構相比較，B/S結構有了突破性的改變。B/S結構無需安裝，只需擁有Web瀏覽器即可實現多用戶交互操作。BIM可視化管理平臺的發展趨勢也必將從C/S結構向 B/S 結構逐步轉變。本文以此大環境作為背景進行內容研究，采用 C/S 架構技術，結合 WebGL、前端HTML, Javascript技術及后端開發框架等實現基于BIM的橋梁可視化信息管理平臺的構建研究，使得用戶只需借助瀏覽器，便可隨時隨地訪問可視化信息管理平臺，對于BIM模型的完整語義性和數據互操性也得到保證［6］［7］。

1.1.2選題意義

數字技術進入建筑行業已近半個世紀， BIM 這一名詞也開始被人們所熟知認可，成為行業中無法替代的存在。BIM伴隨著互聯網技術的不斷發展也逐漸走向成熟，當前的 BIM技術對于行業中目前存在的信息傳遞問題也得到了對應的解決，能夠保證傳遞過程信息的完整性，實現信息全過程充分共享，為工程指導與決策提供了有效的根據。

當前我國的BIM技術被集中應用在5D施工模擬、工程算量、方案比選等方面，但 BIM 應用遭遇發展瓶頸，各專業之間缺乏信息共享和系統工作的機制，信息孤島無法徹底解決，且BIM在模型可視化，模型信息管理方面仍需要不斷改進與完善。因此，BIM 模型跨平臺信息傳遞、模型跨平臺交互成為當前BIM技術熱門發展方向［8］。

但 BIM 技術在模型可視化方面仍處在一個初級階段，仍然存在著許多未知的困難。針對BIM模型跨平臺信息傳遞，首先要明白其信息傳遞的意義，以及為什么要傳遞信息，怎樣進行信息傳遞等問題。伴隨著BIM技術逐漸走向成熟，國內BIM相關政策標準也逐漸增多，各行各業對于BIM構件分類與信息編碼也同樣展開了各項研究，針對于橋梁工程BIM模型進行信息分類與構件編碼研究，對實現不同專業之間信息的互通共享與交互有著重要意義，同樣也為橋梁工程全過程中數據的存儲，管理呈現出一種全新的方式。行業中有效可行的數據標準與規范是使得整個橋梁工程過程中信息進行傳遞與轉換的保障，對BIM信息存儲標準進行研究，同時采取合理的技術管理方式，研究適用于整個橋梁工程的一套數據分類編碼標準，將為多專業間的數據信息共享和傳輸提供豐厚的經驗，對橋梁工程BIM發展應用起到關鍵性的推動作用。另外，由于橋梁所承受動荷載不斷變化、橋梁受力較為復雜，結構上異形構件較多，且結構數據不斷豐富變多，信息模型中各種各樣與圖形顯示相關或不相關的信息和與模型顯示需求有關或無關的構件嚴重增加了模型的體量。如何有效降低模型數據量使模型實現實時可視化成為難點。同時，用于建筑信息模型三維顯示的軟件或系統平臺也受帶寬及網絡傳輸影響，難以再支持大體量模型的加載渲染I9】。因此研究基于BIM與WebGL框架的模型數據可視化方法是具有理論意義和現實價值的。

1.2國內外研究現狀

1.2.1BIM 技術國外研究現狀

BIM 技術起源于美國，經過多年的發展，目前在國外基礎設施、數據標準、行業規范等多方面都已經發展較為成熟。

韓國政府針對公共部門項目，由公共采購部門頒布《設施管理BIM應用指南》，對在工程設計、施工、管養等實現BIM技術應用的階段進行統一化的指導［1°］［11］。

Fu等［12］對IFC查看器進行研究，通過二次開發技術，研究開發一種針對于數據存儲及表達標準規范化的集成交互環境，對信息進行檢索并準確傳遞給決策人員。

Kereshmeh等對如何以JSON格式序列化實現IFC標準進行了研究，介紹了 IFC標準的JSON實現需求、ifcJSONSchema及其數據內容。提出了一種以JSON格式編碼IFC 規范的方法。根據該方法可以設計IFC格式到JSON格式的轉換機制Ml。

Xu Z等對IFC標準及WebGL模型可視化技術進行了深入研究，提出一種三維模型在網頁端重新進行顯示的方式。該方法將IFC文本轉換為目標文件（OBJ）隨后在WebGL 中進行OBJ編譯，完成模型的渲染。OBJ文件只包含了模型幾何信息，渲染出來的模型不夠數字化、信息化［14］。

Costa［15］對裝配式建筑中BIM技術的應用進行了研究，將建筑部件信息依據需求不同進行劃分，從而實現BIM技術與數據連接間進行有效融合，為后續研究提供借鑒。

LiuX提出了一種基于Web3D的輕量化解決辦法，該輕量化解決方案，解決了數據網絡傳輸負載過大的問題，對于網絡帶寬和瀏覽器資源有限情況下BIM數據的冗余，語義和參數化問題也同樣進行了改善，提高渲染大型BIM場景的效率［16］。

Jae-Hun Kim 等基于 BIM 技術，利用 Revit 軟件實現了對橋墩參數化模型的建立，同時對三維模型幾何信息進行分析，構建了相應數據庫用于數據信息交換，并提出在四維模擬中三維信息模型的應用［17］。

1.2.2BIM技術國內研究現狀

伴隨著BIM技術的不斷發展，近年來我國也作出了相應的響應，各省市、各部門相繼制定發行BIM相關政策，采取相關應用標準，積極推動BIM技術的應用。與此同時，國內學者也展開了針對于BIM技術開發與應用的研究熱潮。

楊黨輝等對BIM建模軟件與結構分析軟件間的數據轉換進行研究，通過使用Revit API，借鑒IFC標準，同時借助Excel的方式對數據交換進行測試，結果顯示，在進行結構計算時，IFC標準格式并不適用，利用RevitAPI開發實現數據轉換有著不穩定因素的存在，同時在利用Excle文件導出數據方面，軟件的支持性也存在差別。最終得出了應根據結構體系與模型復雜程度靈活選用幾種方法的結論［18］。

黃強［19］對當前國內BIM技術應用進行了分析，提出各企業承擔不同功能軟件開發工作并編制相應的“P-BIM軟件功能及信息交換標準”將加快實現中國BIM落地。

杜政［20］通過對使用IFC標準和WebGL技術的水利工程BIM輕量級應用的研究，針對水利工程中BIM技術應用信息數據格式不一、數據傳輸慢、對硬件要求高的問題，提出了水利工程中BIM數據標準化、輕量級和可視化的基本思路，最終實現了水利工程中多數據源、多平臺、大場景的BIM數據共享和交互，促進了 BIM技術在水利工程中的發展。

吉方慧等［21 ］在當前BIM技術綠色建筑評價平臺基礎上，針對BIM軟件與綠色建筑信息軟件互操作性不足的問題，開發Revit與斯維爾分析軟件的交互接口，實現數據信息的成功交互，將BIM技術信息的完備性、一致性、關聯性充分進行表達，最終將匹配的項目參數與斯維爾分析軟件相結合，實現建筑信息的集成和共享，提高項目所有參與者的綠色建筑評價分析效率。

朱海林等基于WebGL技術探究Revit建立的橋梁模型在Web端的顯示的一般流程, 先將三維模型導出為FBX文件，然后利用3D Max軟件轉為OBJ文件，利用Three.js 引擎自帶的 OBJLoad.js 加載到瀏覽器端實現渲染［22］。

陳遠等對編程語言解析BIM模型進行了研究，利用開源的JAVA插件，解析基于IFC 的BIM模型,生成相對應的IFC實體類，提出了一種JAVA類與IFC實體的轉換機制，該轉換機制將IFC實體轉換為了 JAVA類［23］。

鄧達，鄭一峰等，研究了傳統施工監控中的不足，基于BIM技術和Web技術開發了大跨徑連續剛構橋BIM管控平臺［24］。

1.2.3 WebGL可視化技術國內外研究現狀

近年來，在國家政策標準的大力支持下，BIM技術得到快速的發展，隨著建筑業“互聯網+”概念的引入，大數據、物聯網和云計算技術與BIM技術深度融合的相關研究也風靡而至［25］。在眾多研究領域中，其中發展和變化最快的就是Web應用的發展，基于 BIM的Web端模型可視化也因此成為了當今網絡技術的研究熱點。研究模型在Web端的可視化與網頁交互性對于性能要求越來越高，WebGL技術的的出現使得這一問題得到有效解決, 為瀏覽器的三維圖形交互、渲染帶來福音［26］。

這些年國內外很多研究人員結合計算機圖形學研究在Web端如何高效地顯示由專業建模軟件建立的三維模型方面已經有了大量的成果［27］［28］。

張溫利用BIM模型二三維一體化、多源工程數據異構的優勢，結合WebGL技術改善BIM技術在管廊運維階段的應用現狀，應用Web技術高自由度的開發優勢，融合B/S 架構深度學習技術、數據庫技術等實現以BIM模型為基礎兼具跨平臺、可視化、智能化、信息化的管廊運維管理系統［29］。

徐照等提出一種基于WebGL和IFC標準的BIM模型可視化分析方法，對Web端進行模型可視化時BIM模型矢量數據缺失的問題得到了有效解決［30］。

趙菲等開發設計針對于古建筑的BIM輕量化系統，同時采取Revit二次開發技術，將RVT格式轉換為JSON格式，通過WebGL技術進行重構和渲染［31］。

Saska Ales 等對基于 WebGL 的開源框架 ccNetViz 進行研究，證明其擁有自定義和分析的功能，能夠統計節點信息，實現模型動態導入，是一個高速輕量的JavaScript庫, 可以用于體量較大的模型可視化［32］。

Gracia和Bayo［33］研發了一種關于鋼連接節點協作分析的網頁端應用程序。在程序研發中，使用互聯網相關的尖端技術去解決結構分析軟件中結構評估、可視化和交互等基本問題。成果表明：結構分析程序中的三維可視化問題可以使用HTML5標準內 WebGL API 進行解決。

Miao, Ru等提出了一種基于數據壓縮、數據流、虛擬紋理和WebGL的輕量級可視化高質量3D對象的體系結構。使用該方法能夠有效提高場景加載速度，同時能夠使原始場景中的視覺保真度不會丟失，為后續模型可視化研究提供參考［34］。

1.3本文研究內容與技術路線

1.3.1 研究內容

本文以實際工程中斜拉橋作為論文研究對象，以BIM技術為基礎構建斜拉橋三維信息模型。采用Revit二次開發技術開發模型信息導出插件，使用WebGL第三方引擎框架Three.js技術，研究一種橋梁三維模型在Web端瀏覽器上實現可視化操作的方法。

基于以上可視化頁面，本文還將進行深入探索，利用計算機編程語言，采用合適技術框架，開發實現一種基于BIM+JavaEE的斜拉橋信息管理平臺，并對平臺部分功能進行開發，為BIM技術的信息化發展及模型信息可視化管理提供一點個人見解與思路。

本文主要研究內容如下：

(1)第一章：緒論。介紹了當前BIM技術發展的環境時代背景，總結當前BIM技術信息化發展面臨的問題與挑戰，引用國內外學者當前對于BIM技術的研究現狀，同時介紹了當前WebGL可視化技術國內外研究現狀。最后詳細闡述本文的研究內容與研究技術路線。

(2)第二章：相關技術介紹。對本文研究將要使用到的一些技術及框架進行詳細的介紹，對比多種技術選取最有效最合適的技術開展相關研究。

（3）第三章：斜拉橋信息模型建立與構件編碼。采用Revit軟件對斜拉橋進行參數化建立橋梁模型，同時對Revit自帶可視化插件Dynamo進行研究，編寫節點功能代碼, 提高橋梁三維建模的效率。另外分析國內外當前建筑信息模型分類及編碼標準，總結一種適用于橋梁工程的構件分類與編碼標準，對斜拉橋各構件進行編碼，便于后期構件信息的統一化傳輸與管理。

（4）第四章：斜拉橋BIM模型信息轉換與模型可視化研究。利用RevitAPI實現對 Revit軟件的二次開發操作，使用C#語言編寫橋梁模型信息導出插件，對斜拉橋三維模型及其構件信息實現插件化導出。最后基于Three.js可視化技術進行開發，將導出的模型信息文件在Web端頁面進行展示，同時對模型與網頁一些基本交互功能進行研究。

（5）第五章：BIM+Web斜拉橋信息管理平臺構建研究。基于前后端技術搭建斜拉橋信息管理平臺項目，將模型信息上傳到后端數據庫，實現網頁端在線信息的查看與管理。對模型可視化頁面交互進行相應功能測試，另外對橋梁部分檢測信息的平臺端保存與查看功能也做了相應開發。

（6）第六章：總結與展望。對本文研究內容進行總結，指出目前研究內容的不足，以及對未來 BIM 信息化的深入研究進行展望。

1.3.2技術路線

本文研究技術路線如下頁圖 1.1 所示。

圖 1.1 本文研究技術路線圖

2相關技術介紹

2.1Revit二次開發技術介紹

2.1.1AutodeskRevit 軟件

Revit從2002年開始就進入國內市場，歷經多年的發展，可以說是國內目前BIM軟件中的主流。傳統方法，從方案、展示到施工圖會涉及到SU、VRay、PS、CAD、Ecotect 等軟件，每個軟件只能處理獨立階段，分工復雜且容易出錯。而Revit本身就是一個數據庫，所生成的Rvt文件包含了所有模型、圖紙、分析數據，乃至渲染、展示等完整信息。總的來說，一個軟件，集齊全部。

Revit的優勢在于：

（1）可獨立展示所有圖紙

（2）具備完整的信息庫

（3）便于修改，極大提高效率。

Revit 軟件正一步步走向成熟，相比眾多三維建模軟件遙遙領先。

2.1.2Revit二次開發技術

所謂Revit二次開發，即為用戶通過使用Revit軟件所提供的眾多API，實現對用戶需求的開發，從而實現相應的功能。利用Revit二次開發技術，首先，可以滿足對Revit 真正意義上的操縱，這些操縱包括Revit軟件中一些常用的操作命令，比如對于三維模型的增，刪，改，查操作。在不利用二次開發技術之前，Revit中想要實現這些操作，就必須通過手動點擊Revit軟件中所自帶的按鈕工具來完成上述操作，在面對一些復雜功能，繁瑣操作時，自帶功能無法輕易解決這些問題，用戶即使有想象力也無法進行發揮。其次，使用Revit二次開發可以避免重復操作。在面對一些大型項目建模時，批量操作的使用就會變得非常多，如：批量修改族，對族進行批量布置等。利用Revit二次開發設計相關批量操作插件，將大大提升建模效率。再次，Revit二次開發可按一定順序，條件，循環，自動化的完成設定的流程。最后，Revit二次開發同樣也可打通程序壁壘，實現數據信息間的互相聯通。在Revit軟件中，數據的缺失，數據信息適用性問題一直存在，在Revit中實現Excel導入導出，或是導出模型到其他軟件進行結構計算，亦或是將Revit中信息與數據庫進行交互，采用Revit軟件現有功能實現也會很困難。使用RevitAPI對Revit進行二次開發操作，實現Revit中數據與外部其他程序對接，將數據信息互通，防止信息閉塞，符合交互需求。本文通過研究RevitAPI對Revit軟件實現二次開發，采用計算機編程語言C#進行插件開發，研發一種模型信息提取插件，通過Revit中相關操作調用插件，將BIM模型信息成功導出為一種網頁端渲染技術所能識別的 gltf 文件格式，為橋梁三維模型在網頁端實現可視化奠定基礎。

2.2WebGL 技術介紹

2.2.1WebGL 技術

WebGL是一種通過將OpenGL ES2.0綁定至JavaScript API而形成的適用于web開發的 3D 繪圖標準，屬于一種 JavaScript API[35][36]oWebGL 利用 HTML5Canvas,結合 Java Script語言和瀏覽器對三維圖形進行繪制渲染[切。WebGL通過引入一個與OpenGL ES 2.0非常一致的API來做到在任何兼容的Web瀏覽器中渲染高性能的交互式3D和2D 圖形，該API可以在HTML5 <canvas>元素中使用。這種一致性使API可以利用用戶設備提供的硬件圖形加速[38]。借助WebGL技術，開發人員可通計算機顯卡將三維模型成功展示到瀏覽器中，同時，WebGL技術標準提供了許多便于用戶開發操作的API，用戶不需要使用專用的網頁渲染插件即可實現相關操作，該標準在復雜三維結構網站頁面設計及一些3D的網頁游戲開發中經常被使用。

2.2.2Three.js 圖形引擎

Three.js是一種3D引擎，運行在瀏覽器中，屬于WebGL框架引擎。Three.js的歷史幾乎和WebGL 一樣長，早在2010年7月7日，Three.js就支持WebGL渲染了，那個時候WebGL規范還在草案中，要等到2011年3月才正式發布，所以提到WebGL就會不由自主的想到Three.js，它大概是第一個支持WebGL的引擎。

Three.js內部封裝了許多日常常用的功能API，這些API中包含了 3D圖像編程所需要的對象工具，這些工具對象使用方法簡便易懂，對初學者十分友好。在開發過程中，為了增強開發的性能，Three.js還提供了許多針對于圖形引擎的高級技巧與方法，這就使得整個創建三維場景的過程變得更加快捷高效。

2.3前端開發技術及框架介紹

通常來說，Web前端技術，簡稱為前端，指通過HTML，CSS及JavaScript以及這些技術衍生出來的各種技術、框架、解決方案，來實現互聯網產品的用戶界面交互。下面將介紹一下本文信息管理平臺所用到的一些前端技術。

HTML 是一種超文本標記語言，它是通過使用標記來描述文檔結構和表現形式的一種語言，它不止包括文本，還可以包含圖片，鏈接，音樂，甚至程序等非文字元素，通過瀏覽器進行解析，然后把結果顯示在網頁上，是網頁構成的基礎，所有網頁的設計都離不開HTML。HTML通過HTML文檔來表述網頁，Web瀏覽器的作用是讀取HTML 文檔，并以網頁的形式顯示出它們。瀏覽器不會顯示HTML標簽，而是使用標簽來解釋頁面的內容［39］。

CSS是在HTML的結構上進行裝潢，能夠對頁面的規劃、字體、色彩、布景和別的結果實現更加準確的掌握。利用CSS可以實現對平臺頁面樣式，字體顏色等的控制，修飾網頁使呈現出更加滿意的頁面效果。

Ajax是用于客戶端創建異步Web應用的一組相關的Web開發技術。Ajax不同于C 語言，C#等編程語言，它是一種實現方法，一種在服務器中請求后端數據的方式，它可以通過調用該方法，在當前頁面中不進行刷新頁面操作就可以實現獲取后端數據的操作，從而對整個頁面進行更新。

Bootstrap，擁有簡單、直觀、強悍的特點，作為一款前端頁面開發框架深受人們的喜愛。另外Bootstrap中還提供了許多預定義的模板及UI組件供開發者使用，使得整個開發過程高效快捷。本文所研究的信息管理平臺前端頁面基于此框架進行快速開發，采用框架提供的多種樣式與表單，按鈕，表格等版式，提升頁面的開發效率。

2.4后端開發技術及框架介紹

2.4.1JavaEE 介紹

JavaEE［40］， Java 平臺企業版(Java Platform Enterprise Edition)，是 Sun 公司為企業級應用推出的標準平臺，用來開發B/S架構軟件JavaEE的誕生在一定程度上可以有效解決客戶端臃腫龐大，擴展性差等弊端。JavaEE只是一組接口和規范，提供了面向開發者的public API，它是在JavaSE的基礎之上形成的一種規范。除此之外還有為移動端開發而產生的JavaME，但目前應用不算廣泛。JavaEE, JavaSE，JavaME三者的關系圖如下圖2.1所示：

JavaEE中包括以下三層架構：Web視圖展示層，Service業務層，Dao持久層，各個層級有著各自不同的作用，各層級間相互聯系，密不可分。三層架構間的關系及各功能的作用可以用如下關系圖2.2來表現。

圖 2.2 JavaEE 三層架構展示

2.4.2 后端開發框架

（ 1 ） Spring 框架

Spring框架的誕生使得整個JavaWeb端應用開發過程變得更加高效快捷，Spring框架包含許多依賴注入和開箱即用的模塊，如:Spring JDBC、Spring MVC> Spring Security> Spring AOP> Spring ORM> Spring Test，采用這些模塊可以大大的縮短應用開發時間, 提高應用整體開發效率。采用 Spring 框架中 JDBCTemplate 模塊進行配置，可以代替在早期JavaWeb開發階段，使用大量代碼將信息插入到數據源的操作，僅需要簡單的配置幾行代碼就可以完成同樣工作。Spring框架本質為一個容器，容器中可以存放許多java 中的對象以及一些第三方框架。同時，Spring框架也為不同框架之間建立連接關系，它是一種可以運用于Java SE/EE中的輕量級開源框架，它的出現給企業應用程序開發產生深遠的意義。

（ 2） Springboot 框架

SpringBoot并不是Spring框架基礎之上的提升，SpringBoot的出現使得Spring框架的使用變得更加快捷與方便。SpringBoot框架中包含了許多常用第三方庫配置，并且做到這些第三方庫零配置即可進行使用，極大提升Spring開發者的體驗，讓開發者能夠更加專注于業務邏輯的編寫。

Spring Boot具備以下特點：

1、能夠創建獨立的 Spring 應用。

2、嵌入式服務器，對于服務器本身也不需要進行單獨的配置。

3、提供了 Starter從而不需要再對maven進行配置操作。

4、對于Spring應用實現了自動化配置。

5、不會生成代碼同時也不需要對XML文件進行配置。

2.4.3 MySQL數據庫介紹

數據庫在平臺系統功能實現過程中，扮演者非常中的角色，數據庫的相關設計將對整個平臺系統的運行效率造成直接影響阿購昭。MySQL作為當前眾多Web應用中數據庫應用軟件之一，是當前開發者使用最多的關系數據庫管理系統。MySQL由瑞典 MySQL AB公司開發，目前屬于Oracle公司。它是一種關聯數據庫管理系統，通過建立、使用和維護數據庫，對數據庫進行統一管理和控制，以保證數據庫的安全性和完整性。用戶通過數據庫管理系統訪問數據庫中表內的數據。

MySQL數據庫具備以下優點：

(1)MySQL是免費的，用戶不需要支付任何費用即可進行使用。

(2)MySQL相較于其他數據庫系統而言，結構簡易且性能極高，在設置與管理方面，其復雜度相對較低，很少出現宕機的狀況。

(3)MySQL可移植性強，它可以支持多種操作系統，并且提供了多種API接口，在不同操作系統中，可使用多種開發語言進行有關操作。

(4)MySQL對于使用數據庫的用戶數來說沒有限制，多用戶可同時操作同一個數據庫。通過在頁面中設置一些數據庫訪問的操作從而實現對MySQL數據庫的交互時訪問。

(5)MySQL是基于網絡化的，在互聯網上的任何地方都可以對數據庫進行隨時訪問，這也就使得用戶可以共享操作數據庫。MySQL還能對用戶進行訪問控制，將數據庫中的信息進行權限設置，對用戶操作查看操作進行管理。

2.5本章小結

本章對本文研究過程中所用到的一些框架技術做了簡要的介紹。一方面對目前三維建模軟件中較為熱門軟件Revit進行了簡要的描述，針對Revit二次開發技術進行了詳細的闡述，后續將借助Revit二次開發技術開發橋梁模型信息導出插件；另一方面，在橋梁三維模型Web端可視化方面，對3D繪圖標準WebGL技術進行了闡述，深入介紹了基于WebGL技術的框架引擎Three.js，為后續模型在Web端進行可視化做鋪墊。最后，針對橋梁模型信息管理平臺構建開發所用到的前后端技術及平臺信息管理使用到的后端數據庫進行了對比與選擇，為后續平臺的開發奠定基礎。

3斜拉橋參數化模型建立與構件編碼

3.1BIM 信息模型分類與編碼標準研究

伴隨著BIM技術的不斷成熟，國內在建筑行業中的BIM標準，BIM政策等都已較為完善，國內建筑分類編碼框架標準主要以ISO12006-2為主［44］。OminiClass作為建筑行業的一種分類系統，在該系統下包括有15張面分類表，而每張表的構成基礎又是通過相對應的分類系統來作為表格基礎。因此在建筑行業中通常采用OminiClass分類編碼體系。Revit作為BIM體系普及率較高的軟件，軟件自身默認攜帶OmniClass標準中的 23 表，同時 Revit 軟件中還支持英國的 Uniclass 標準。但相對于當前許多應用管理需求， Revit自帶的ID都無法進行對應。因此建立一套適合于自身項目的分類編碼體系成為目前推動BIM技術進一步發展的重要問題。

3.1.1信息模型分類體系

對于信息分類目前有兩種常用的分類方法：線分類法和面分類法。

（1）線分類法：又稱為樹狀結構分類法，即從整體看結構分層呈現為一種樹杈型的分支結構，將所要進行分類的結構、事物按照規定的特征，屬性進行分層，相鄰層之間都應存在固定邏輯關系，不同層級間應為隸屬關系，而相同層之間都為同一特征屬性并列排布。線分類法的層級結構關系如下 3.1 圖所示。

圖 3.1 線分類法層級關系圖

（2）面分類法：面分類法通常也被叫做平行分類法，按照構件本身固有的屬性或

特征，將它們劃分為相互之間沒有隸屬關系的面，每個面都包含一組類目。使用時，根據分類需要將不同類目的“面”進行組合，形成一個復合類目。具體面分類方法示例可見下圖 3.2。

圖 3.2 面分類法示例圖

對比以上兩種分類方法，宏觀來看，雖然兩種分類方法都有著其各自的優勢：線分類方法上下層之間邏輯性強，但隨著所要分類事物特征的增多，想要按照每層一種特征屬性排列，并且特征之間邏輯合理性，線分類方法就會變得十分復雜；對比面分類方法，雖然不同的“面”之間沒有邏輯附屬關系，但由于各個“面”中數目的增多，在編碼時，一些毫無意義的組合會導致空間浪費，不能夠充分利用編碼空間。鑒于此，目前大多數分類體系都采用兩種分類方式組合的方法，即混合分類法。上文所介紹到的 OmniClass 分類編碼體系，采用的即為混合分類法。利用面分類方法對15張表進行劃分，形成的每張表都代表著一個獨立的體系。在每個體系中又繼續通過線分類方法進行深層次劃分，最終將分類表劃分成了能夠表達特定信息的單張表，同樣可對不同的分類表進行組合從而表達更為復雜的信息。

3.1.2 信息模型編碼體系

編碼的含義可以理解為：為了在計算機中簡化所要表達的信息，使用某些標準規范或是一些特定結構的符號為事物添加一些特殊的標識，同時借助計算機強大的存儲、運算能力，對于標識的信息進行方便快捷的存儲、檢索和調用。編碼的目的就是在于為計算機中的數據與實際處理信息之間建立聯系。反映在Revit中即為對象屬性中包含所標識的編碼信息。

編碼方法與信息分類方法相對應，形成以下三種對應的編碼體系：

( 1 )層次碼——線分類法

層次碼是相對于線分類方法而進行編碼的一種方式，層次碼將所有分類對象按照類別進行清晰的劃分，分類對象之間擁有者極高的從屬關系，不同層次之間層次碼不同，層次碼決定該分層所表達的含義。

通常根據項目規模和應用要求可制定 4~8 級的編碼級別，每級別用固定位數的數字或字母表示，不足位數需要用 0補齊。級別之間用點分隔，并且為了滿足編碼唯一性需要，通常規定或增加最后一級的編碼為序號碼，但并非強制項，該序號碼主要為了分辨編碼級別相同的同種構件有多個。采用上述線分類法中的層級關系圖進行編碼如下圖

3.3所示。

圖 3.3 層次碼編碼圖

如上圖中編碼方式所示，第四層二號橋墩的層次碼表示為01.01.01.002。可見層次碼編碼，結構簡單，容量大，便于計算機求和匯總。但層次碼有著其不足之處，當劃分的層次較多的時候，層次碼會變得十分冗長，對于想要修改某一處的層次碼，相關聯的其他層次也會受到影響，操作較為復雜。

( 2)組合碼——面分類法

組合碼概念同樣是基于面分類方法而言的，它由兩個或兩個以上完整的、獨立的代碼組成，使用范圍較廣。組合碼有多種組合方式，當面分類法中不同的面的類目組合在一起時常常采用“/”，“+”，“<”，“>”來進行連接。對于單個面中的多個類目進行連接時，常采用“/”連接。對于多個面，面與面之間的類目組合用“+”連接。“>” 和“<”的用法，通常用于表示分類對象間的隸屬或主次關系［45］。

對面分類法中的實例進行簡要的編碼如下頁圖 3.4所示。

圖 3.4 組合碼編碼圖

由以上組合編碼圖中可以看出，組合碼A>L+02表示為某公路橋-梁式橋-主梁結構，開口方向表示側重強調該橋形式為公路橋。

（3）復合碼——混合分類法

基于混合分類法而形成的一種全新的編碼方式—復合編碼成為目前應用較為廣泛的一種編碼方式，本文對復合編碼進行研究，基于OmniClass編碼方式，根據橋梁工程特點，研究初步形成一套適用于橋梁工程的編碼結構體系，為BIM信息模型的傳遞提供依據。

3.1.3橋梁工程BIM模型信息分類與編碼應用

本文通過研究分析各方面分類標準，利用“混合分類法+復合編碼”方式，同時借助ISO12006-2框架，將橋梁工程按照不同特征和屬性進行分類形成下表3.1,表3.2 兩張表。同時采用層級分類的方法將橋梁工程中部件以元素形式不同進行了劃分并編碼，得到下圖 3.5。

表 3.1 按橋梁功能分類表

組合碼第一層第二層

01.01 橋梁工程

01.01.01+A 公路橋

01.01.02+B 鐵路橋

01.01.03+C 公鐵兩用橋

01.01.04+D 其他橋

組合碼第一層第二層

02.01 橋梁工程

02.01.01+L 梁橋

02.01.02+G 拱橋

02.01.03+GG 剛構橋

02.01.04+XL 斜拉橋

02.01.05+XS 懸索橋

02.01.06+H 涵洞

02.01.07+K 框構橋

圖 3.5 按橋梁元素分類圖

綜合以上所研究的分類與編碼標準，采用復合編碼方式將三張圖表結合起來，同時基于Revit軟件中OmniClass標準所采用的標準格式,最終形成一套適用于Revit中對橋梁工程構件族進行編碼的 OmniClass 標準規范如下頁表 3.3 所示。（注：表 3.3 只展示了針對于斜拉橋部分的編碼情況）。

從表中可以看出，不同橋梁構件編碼都不相同，將模型構件編碼保存到橋梁三維模型信息中，對構件進行唯一標識。與此同時橋梁模型附加的結構化信息及非結構化信息就可無損傳遞給各個部門組織及項目階段，同時在各項目階段，技術人員依照給定的分類及編碼規則就可以接受設計階段傳遞的BIM模型，并提取模型上附加的屬性信息［46］。

復合碼第1層第2層第3層第4層第5層

0102.01 橋梁工程

0102.01.01+A 公路橋

0102.01.01+A.01+L 梁橋

0102.01.01+A.02+G 拱橋

0102.01.01+A.03+GG 剛構橋

0102.01.01+A.04+XL 斜拉橋

0102.01.01+A.04+XL.01 上部結構

0102.01.01+A.04+XL.01.01 主梁

0102.01.01+A.04+XL.01.02 索塔

0102.01.01+A.04+XL.01.03 拉索

0102.01.01+A.04+XL.01.04 支座

0102.01.01+A.04+XL.02 下部結構

0102.01.01+A.04+XL.02.01 橋墩

0102.01.01+A.04+XL.02.02 橋臺

0102.01.01+A.04+XL.02.03 墩臺基礎

0102.01.01+A.04+XL.03 橋面系

0102.01.01+A.04+XL.03.01 橋面鋪裝

0102.01.01+A.04+XL.03.02 伸縮縫

0102.01.01+A.04+XL.03.03 人行道

0102.01.01+A.04+XL.03.04 欄桿、扶手

0102.01.01+A.04+XL.04 附屬結構

0102.01.01+A.04+XL.04.01 檢查平臺

0102.01.01+A.04+XL.04.02 檢查梯

0102.01.01+A.05+XS 懸索橋

0102.01.01+A.06+H 涵洞

0102.01.01+A.07+K 框構橋

0102.01.02+B 鐵路橋

0102.01.03+C 公鐵兩用橋

0102.01.04+D 其他橋

3.2Revit 軟件參數化

3.2.1 參數化概述

參數化從字面來看，是指用戶通過設計構件長寬高等其他各項參數，從而達到利用所給參數輕松實現修改控制圖元及模型形狀規格的目的。參數化作為 Revit 軟件的一大特色，它的主要功能表現在參數化方式修改引擎和參數化方式建筑圖元。在 Revit 軟件下的各項工具中，絕大多數都是采用參數化的建模方式來構建整個三維模型，參數化建模因此也成為了實現BIM技術的重要方式。Revit中通過為構件族尺寸綁定相應關聯參數從而實現快速修改構件的目的。這些關聯關系一部分關系由軟件系統自身默認，而一部分則是建模人員視需要所賦予的，定義這些關系的數值或特性，就稱為參數，所以這種操作也被稱為參數化的操作。任何時候想要去更改一個項目模型中的任何組件，Revit 的參數設變引擎就會對整個項目模型中發生的變更做出一個自動協調。

3.2.2 傳統參數化建模過程

在傳統建模方式下， Revit 軟件中進行參數化建模主要依賴于 Revit 族來進行， Revit 中的構件、圖元對應的都是Revit族中各式各樣的族實例。通過對所創建的族實例進行編輯并添加所需參數從而控制模型構件，最后在項目中拼裝各個參數化后的族實例，從而實現模型的參數化創建。

以下對參數化族的建立過程做簡要的闡述。

（1）選擇合適的族樣板文件，輪廓族制作時可選用公制輪廓樣板，箱梁族繪制時選用公制結構框架-梁和支撐樣板，其他族制作可選用公制常規模型樣板文件。

（2）導入所要制作族的輪廓。

（3）在輪廓線上選取需要參數化控制的點繪制參照平面，然后開始注釋。

（4）通過 Revit 中拉伸，放樣，放樣融合等操作創建模型構件實體。

（5）點擊尺寸線，點擊標簽，選擇添加參數，依次添加所需參數。通過修改參數，使得整個參數化模型隨著參數的改變而改變。

3.3Dynamo 參數化

3.3.1Dynamo 概述

Dynamo是一款基于Revit中參數化設計而進行簡化操作的可視化編程工具，對于傳統意義中Revit族參數化創建功能進行了加強，能夠在使用少量代碼或是不需要編寫任何代碼的情況下即可完成對應用程序的設計，極大提高參數化設計的效率，相對于沒

有任何編程基礎的設計人員來講也是十分友好的。基于Dynamo工具，用戶可以簡單地連接預定義功能模塊，輕松創建自己的算法和工具，同時也可以直接利用Dynamo中已經封裝好的節點，或者直接代碼編寫相應Dynamo程序，從而實現自己想要的功能，這樣使得設計建模階段節省許多時間。

（一） Dynamo組成要素

Dynamo 作為一種在 Revit 軟件中進行可視化編程的插件［47］，主要有以下三個重要的組成要素；

①節點：節點作為Dynamo中最為基本的要素，在Dynamo程序編寫中，每個節點代表不同的對象或函數，不同節點之間相互關聯，最終通過一定邏輯關系形成完整代碼程序。 Dynamo 中常用到的節點如下圖 3.6中所示。

②連接線：連接線是各節點間數據進行連接的媒介，它是用來添加處理數據或創建幾何圖形的說明。同時在操作中與連接線相對應的箭頭則表示數據操作的順序，數據流動的方向。

③節點庫：節點庫即為包含各個節點的功能列表展示，Dynamo中共有十大類型功能節點，如下頁圖 3.7所示，每個功能節點中會封裝許多與功能節點相關的節點，并提供中文注釋與說明，方便用戶查看，另外，Dynamo中還為用戶提供自定義節點庫的功能，將相同操作的功能進行代碼封裝，直接點擊調用，節省了大量時間且提高操作效率。

（二） Dynamo播放器

Dynamo 播放器是 Dynamo 的自動執行器，當用戶完成 DYN 程序的編寫后，便可以在不打開 Dynamo 界面的情況下直接自動執行 DYN 文件，實現插件式運行。另外， Dynamo 播放器還提供腳本輸入的功能，用戶在編寫程序的同時，可以為節點綁定信息，設置該節點的狀態為用戶輸入或用戶輸出，當用Dynamo播放器打開編寫的程序時，點擊編輯輸入按鈕，程序中為用戶輸入的節點將顯示在播放器頁面中，供用戶便捷快速輸入數據，省去了重復打開Dynamo腳本編輯的時間，進一步提高設計階段效率。

下圖 3.8 為 Dynamo 與外部 Excle 交互的源程序與 Dynamo 播放器運行頁面圖。

3.3.2Dynamo 參數化

Dynamo作為Revit中一款可視化操作插件，在其操作頁面節點功能中輸入各項參數，同時對各項參數節點進行邏輯關系綁定，使整個程序能夠按照指定的運行流程進行綁定。但由于Dynamo的建模與拓展能力較差，因此將Dynamo附托于Revit軟件，二者共同進行參數化實現是當前最好的方式。

當 Dynamo 與 Revit 進行交互時， Dynamo 顯示區與 Revit 項目樣板的原點在同一位置， Revit 中的信息可被 Dynamo 進行數據驅動從而改變［48］。 Dynamo 中的節點按照與 Revit相關性被分為有關聯節點與非關聯節點。有關聯的節點在構建過程中會產生相鏈接的數據庫，并直接傳輸連接至Revit本身的數據庫。相比之下非關聯的節點較為獨立, 且不會直接將數據傳輸到 Revit 中。實現 Dynamo 的參數化，首先必須要利用關聯節點對Revit中信息進行提取，通過非關聯節點實現內部邏輯程序化操作，最終形成Dynamo 模型同時利用關聯節點編輯相關程序流進行數據驅動最終得到Revit中的模型。

基于 Revit 軟件合理地使用 Dynamo 可視化插件，一方面可完善增強 Revit 的功能，另外一方面通過Dynamo程序可以提升作業效率，簡化許多機械重復化的工作，進而提高了 Revit的使用效率，使得設計階段參數化設計更加方便快捷。

3.4基于 Revit+Dynamo 的斜拉橋參數化模型建立

3.4.1 工程背景

某PC斜拉橋橋長300m,橋面寬27.5m,主梁采用單箱三室箱梁，主橋為雙塔式，大橋采用一聯(21.2+136+81.2) m部分斜拉橋方案。如下圖3.9所示。

圖 3.9 斜拉橋立面圖

3.4.2 下部結構參數化建模

橋梁下部結構建模主要包括橋墩，承臺，樁基三個部分的建模。由于下部結構構造簡單，故在參數化建模時選用Revit中族的參數化形式進行建模操作。

（一）橋墩參數化建模

①橋墩輪廓族制作

在進行橋墩參數化建模時選用公制輪廓族樣板文件來建立。在族樣板文件中導入所繪制橋墩對應的 CAD 圖紙，通過拾取線命令將橋墩輪廓進行繪制，對橋墩中所需要進行參數化控制的地方添加尺寸標注并給族參數進行命名。下圖3.10為斜拉橋2#橋墩輪廓族及其參數化的展示。

②橋墩參數化模型

基于已制作完成的橋墩輪廓族，在Revit中新建族，選擇基于面的公制常規模型進行橋墩參數化模型的繪制。將輪廓族載入到當前族文件中，繪制所需的參照平面，通過放樣命令，選擇要繪制的路徑，選擇輪廓為所載入的橋墩輪廓族，點擊確認生成橋墩模型。最后將輪廓族中的參數與橋墩模型參數進行關聯，從而使得在實際項目中能夠實現參數化控制橋墩模型。最終橋墩參數化模型如下圖 3.11，圖 3.12 所示。

（二）承臺和樁基承臺和樁基的參數化建模均參照上述橋墩建模的步驟，選擇基于面的公制常規模型族樣板文件進行繪制，最終得到承臺與樁基的三維模型如下圖 3.13。

圖 3.13 承臺樁基三維模型

3.4.3 上部結構參數化建模斜拉橋上部結構組成主要包括主梁，橋塔以及拉索三部分，考慮到三部分結構都較為復雜，在參數化建模時考慮使用不同的建模方法，最后將三部分進行拼裝，從而提高上部結構參數化建模的效率。

（一）橋塔參數化建模橋塔參數化建模方式依舊參照上述橋墩參數化建模的方式進行，通過在基于面的公

制常規模型樣板文件中導入橋塔CAD圖紙，利用Revit中拉伸命令，拾取橋塔外輪廓部分，點擊完成并修改橋塔厚度，最終完成斜拉橋橋塔部分模型的建立，最終橋塔模型圖如下頁圖 3.14 所示。

（二）橋塔部分相關組件建模橋塔相關組件的建模包括橋梁索塔錨墊板，塔頂鞍座錨固構件，索梁錨結構三者的

建模。相關部件的最終模型如下頁圖3.15， 3.16， 3.17所示。

（三）斜拉索建模斜拉索作為斜拉橋上部結構中重要組成部分，工程實際中斜拉索的分布并非為直線

狀態，由于本章節所介紹三維建模并未涉及精細化，在建模時將斜拉索部分簡化為圓柱體來模擬拉索建模。在斜拉索建模時采用Revit中自帶的內建模型進行建模，通過拉伸

命令，繪制拉索放樣路徑以及拉索輪廓，點擊完成實現對斜拉索的建模。部分斜拉索模型如下圖 3.18 所示。

圖 3.14 橋塔模型圖 3.15 橋塔錨墊板模型

圖 3.16 塔頂鞍座錨固構件模型

圖 3.17 索梁錨結構模型

圖 3.18 斜拉索三維模型

（四）主梁 Revit+Dynamo 參數化建模該斜拉橋主梁采用單箱三室箱梁，由于箱梁結構復雜，數量較多，且各部分箱梁尺寸大小不一，在構建箱梁參數化模型時，使用Revit中參數化族的構建方式較為復雜。在建立主梁三維模型時，采用基于Revit+Dynamo的方式，通過編寫Dyanmo程序，實現主梁輪廓族的快速創建及主梁參數化模型的快速拼裝，提高橋梁參數化建模的效率。

①提取箱梁截面數據該斜拉橋箱梁截面采用單箱三室結構，截面較為復雜， 0#段箱梁如下圖3.19所示。

圖 3.19 主梁 0# 端箱梁截面構造圖

將箱梁截面數據在Excle文件中進行整理，得到箱梁截面外輪廓、內輪廓邊室、內輪廓中室各點參數見下表 3.4，表 3.5，表 3.6。

表 3.4 箱梁截面外輪廓各節點參數（部分）

截面 1 外輪廓點 1 2 3 4 5 6 7

x(mm) 0 1250 14441 14441 9941 9169 0

y(mm) 0 0 -263.82 -423.82 -673.82 -2600 -2600

截面 2 外輪廓點 1 2 3 4 5 6 7

x(mm) 0 1250 13960 13960 9460 8686 0

y(mm) 0 0 -254.2 -414.2 -664.2 -2600 -2600

截面 3 外輪廓點 1 2 3 4 5 6 7

x(mm) 0 1250 13798 13798 9298 8522 0

y(mm) 0 0 -250.96 -410.96 -660.96 -2600 -2600

截面 4 外輪廓點 1 2 3 4 5 6 7

x(mm) 0 1250 13750 13750 9250 8474 0

y(mm) 0 0 -250 -410 -660 -2600 -2600

截面 5 外輪廓點 1 2 3 4 5 6 7

x(mm) 0 1250 13750 13750 9250 8474 0

y(mm) 0 0 -250 -410 -660 -2600 -2600

表 3.5 箱梁截面內輪廓邊室各節點參數（部分）

截面1

邊室輪 1 2 3 4 5 6 7 8 9 10

廓點 x(mm) 0 0 0 0 0 0 0 0 0 0

y(mm) 0 0 0 0 0 0 0 0 0 0

截面 2 邊室輪 1 2 3 4 5 6 7 8 9 10

廓點 x(mm) 1791 2791 6735 7935 8435 7901 6901 1991 1791 1791

y(mm) -550 -250 -250 -450 -750 -2150 -2350 -2350 -2150 -550

截面 3 邊室輪 1 2 3 4 5 6 7 8 9 10

廓點 x(mm) 1445 2445 6831 8031 8531 7215 7015 1645 1445 1445

y(mm) -550 -250 -250 -450 -750 -2150 -1900 -1900 -2150 -550

截面 4 邊室輪 1 2 3 4 5 6 7 8 9 10

廓點 x(mm) 1100 2100 6486 7686 8186 7290 7090 1300 1100 1100

y(mm) -550 -250 -250 -450 -750 -2150 -1900 -1900 -2150 -550

截面 5 邊室輪 1 2 3 4 5 6 7 8 9 10

廓點 x(mm) 1100 2100 6486 7686 8186 7290 7090 1300 1100 1100

y(mm) -550 -250 -250 -450 -750 -2150 -1900 -1900 -2150 -550

表 3.6 箱梁截面內輪廓中室各節點參數（部分）

截面1

中室輪 1 2 3 4 5 6

廓點 x(mm) 0 0 0 0 0 0

y(mm) 0 0 0 0 0 0

截面 2 中室輪 1 2 3 4 5 6

廓點 x(mm) 0 631 731 731 531 0

y(mm) -500 -500 -600 -2150 -2350 -2350

截面 3 中室輪 1 2 3 4 5 6

廓點 x(mm) 0 665 765 765 565 0

y(mm) -500 -500 -600 -2150 -2350 -2350

截面 4 中室輪 1 2 3 4 5 6

廓點 x(mm) 0 700 800 800 600 0

y(mm) -500 -500 -600 -2150 -2350 -2350

截面 5 中室輪 1 2 3 4 5 6

廓點 x(mm) 0 700 800 800 600 0

y(mm) -500 -500 -600 -2150 -2350 -2350

②Revit+Dynamo生成箱梁輪廓族

利用 Dynamo 中能夠讀取外部 Excle 文件的功能，通過 Dynamo 中節點功能，對所要識別的參數進行命名和設置，從而快速讀取上述Excle文件中的箱梁截面輪廓參數。 Dynamo 中讀取 Excle 表格的節點塊如下頁圖 3.20 所示。

對于導入成功的 Excle 文件，使用 Dynamo 中 Code 節點編寫節點塊讀取箱梁相應輪廓各點參數。利用PolyCurve.ByPoints節點通過點創建多重曲線,最后通過DetailCurve. ByCurve節點功能根據所輸入的曲線輸出Revit中的詳圖線，實現箱梁截面族輪廓的快速生成。 Dynamo 中生成外輪廓族的節點如下圖 3.21 所示。

基于上述Dynamo中快速生成外輪廓族的方法，利用Dyanmo播放器可視化便捷操作的特點，只需選擇不同輪廓族所對應dyn文件，即可實現截面輪廓族的快速創建。利

用 Dynamo 播放器分別創建箱梁邊室輪廓族，中室輪廓族如下圖 3.22，圖 3.23 所示（以截面18-3B為例）。

③箱梁節段快速布置

采用上述方法快速生成箱梁各節段輪廓族，在 Revit 中對生成的箱梁截面輪廓族進行各項參數的賦予，使各輪廓族實現參數化控制。新建項目，選擇公制結構框架-梁和支撐樣板文件，載入上述操作所自動生成的輪廓族，通過放樣，空心放樣融合等操作進行箱梁節段的繪制。

在箱梁節段繪制完成后，新建項目文件，將所有箱梁族進行載入，通過在當前項目中使用 Dynamo 程序編寫節點功能，主要采用 StructuralFramingType 節點進行箱梁節段快速定位功能的編寫。最終使用 Dynamo 插件實現箱梁節段快速定位布置如下圖 3.24 所示。

最終，借助 Dynamo 播放器的特點，對箱梁節段快速布置形成最終斜拉橋上部結構箱梁 1/2 節段如下圖 3.25 所示。

3.4.4 斜拉橋參數化構件編碼

對于已創建完成的斜拉橋參數化構件，需要對構件進行編碼，使得各構件具有唯一標識，最終形成完整的三維信息模型。傳輸過程中各階段依賴相同的分類編碼標準，對唯一標識進行識別，提取信息模型中所需的各項屬性，真正實現橋梁模型信息化。

采用上述表 3.3 以斜拉橋為例橋梁復合編碼表對橋梁構件進行編碼。首先利用表中編碼規則對 Revit 中的 OmniClassTaxonomy 文本文檔進行重寫編寫，編寫后在 Revit 中點擊構件屬性 OmniClass 屬性即可查看編碼表如下圖 3.26 所示，橋梁構件以 0#段箱梁構件編碼為例的橋梁屬性前后對照圖如下圖 3.27 所示。

圖 3.27 0#段箱梁構件編碼前后對照表

3.4.5 全橋 BIM 模型建立

基于以上介紹方法，在 Revit 中對所生成的橋梁參數化構件進行定位并放置，同時對模型構件逐個進行編碼，最終形成斜拉橋全橋的參數信息化模型如下圖 3.28 所示。

類®I性

1 «預覽(P) 1 確定取消

圖 3.28 斜拉橋全橋信息模型

3.5本章小結

本章中首先對當前所存在的構件信息分類與編碼標準進行了研究，總結形成一套適用于橋梁工程BIM信息模型分類與編碼的標準，之后利用Revit軟件參數化建族的方式對實際項目斜拉橋部分結構進行參數化族的構建，同時對Revit中可視化插件Dynamo 進行了研究，利用其優勢對節點功能進行開發，完成對于箱梁族輪廓的可視化快速創建，并實現斜拉橋箱梁節段快速定位及放置。最終為橋梁 BIM 模型構件賦予編碼信息，使其在模型信息傳遞過程中獲得唯一標識，充分展現了 BIM模型構件的信息化。

4斜拉橋 BIM 模型信息轉換與模型可視化研究

本章將在第3章中所完成的橋梁三維信息模型的基礎上進行進一步研究，基于Revit 二次開發方法，對模型數據轉換進行探索，開發模型信息導出插件。同時對轉換后模型文件在 Web 端重構方法進行研究，實現模型 Web 端可視化并對基本交互功能進行探索。

4.1BIM 模型信息導出插件設計

4.1.1橋梁BIM模型信息構成

基于上一章內容中所完成的橋梁三維信息模型，需要對Revit中模型信息進行分析，對信息結構進行分類，這樣將有助于在開發信息提取插件時，對模型結構有一個充分的了解，從而提高開發效率。

通過BIM軟件建立的三維信息模型不是獨立的，模型中除了包含基本的幾何信息外還有材料的物理信息，運營階段的功能信息等，所以BIM模型可以看作為一個整體化和系統化的大型數據庫，囊括了建設項目所有的基本信息，同時該數據庫也能夠實現信息互動，在BIM三維設計中，Revit軟件可以整合多項信息模塊，實現信息和圖元的相互轉換，Revit軟件包含五種主要的圖元要素，包括主體圖元、構建圖元、視圖圖元、基準圖元和注釋圖元［49］。以上述5種圖元要素為載體，可將Revit軟件中橋梁BIM模型信息構成用下圖 4.1 來表示。

圖4.1橋梁BIM模型信息構成

本文在提取模型信息時，除對上述橋梁BIM模型圖元進行提取外，模型中的參數化構件所包含的各項三維幾何信息、材料信息以及各構件所使用的材質信息也需要進行提取，將這個模型所必要信息進行結合后，即可在web端實現信息模型的重建嵐。橋梁 BIM模型中所需要提取的模型信息主要包括下表4.1所示的幾項內容。

表4.1橋梁模型信息提取內容

內容提取信息

常規主體、立面、體積、圖像、明細表標高

主梁 ElementId、結構、材質、尺寸標注、標識數據

橋墩 ElementId、約束、材質、尺寸標注、標識數據

橋塔 ElementId、約束、材質、尺寸標注、標識數據

拉索 ElementId、約束、材質、尺寸標注、標識數據

4.1.2RevitAPI

RevitAPI中給用戶提供了大量的命名空間、類庫與方法屬性等，可以方便開發者在程序開發時進行調用。在Revit中手動可以操作的命令，API中都會找到相應的方法命令。目前RevitAPI的功能已經十分強大，用戶不僅能夠對軟件已有的功能進行開發，同時可以對Revit缺失的功能進行補充。

Revit API中擁有眾多的類結構，比如應用類和文檔類。Application應用類是一個 Revit應用，該應用類訪問選項、文件及一些其它范圍內的數據并進行設置操作。

Document文檔類用于表示打開的Autodesk Revit工程。另外Element元素在Revit中也起到至關重要的作用，如族、族類型、族實例等等都屬于元素。Revit中大多數類都是繼承自元素。三者之間的關系圖可用下圖 4.2 來表示。

4.1.3基于Revit二次開發提取模型信息

本文基于 Revit API 對 Revit 軟件進行二次開發，開發工具使用 Visual Studio 2019，同時采用計算機語言C#作為開發語言，實現Revit中模型信息導出插件的開發。

二次開發過程如下：

第一步：開發環境的配置

(1)計算機中安裝 Revit2018，Visual Studio 2019 軟件。

( 2)配置 Add-In Manager

Add-In Manager 為一種外部插件，依據 Revit 所提供的接口，讓程序能夠加載自定義的代碼片段從而完成某種功能。若想使用外部插件，首先需要安裝Revit SDK2018，安裝后SDK中包含REVIT SDK文件和Add-In Manager。復制SDK文件下的Add-In Manager 目錄下的 AddInManager.dll 和 Autodesk.AddInManager.addin 文件到 C:\Program Data\Autodesk\Revit\Addins\2018 中，更改 Autodesk.AddInManager.addin 文件中標簽中的內容，路徑改為SDK的實際安裝路徑，然后保存。最終插件在Revit軟件中的獲取方

式如下圖4.3所示。

Add-In Manager (Manual Mode, Faceless)

Add-In Manager (Readonly Mode)

圖 4.3 外部插件 Add-In Manager

第二步：借助c#開發語言編寫模型信息導出插件。

(1)啟動 Visual Studio 2019 編程軟件。

(2)新建類庫項目，對其進行相應的命名。

(3)為項目文檔增添接口引用， RevitAPl.dIl、RevitAPIUI.dll。

(4)修改自動生成的類command.cs中的內容，在類中需要添加如下相關引用。 using Autodesk.Revit.Attributes;

using Autodesk.Revit.DB;

using Autodesk.Revit.UI;

using System.IO;

using System.Windows.Forms;

與此同時通過 RevitAPI 實現外部 IExternalCommand 接口，在接口中調用 Execute

執行函數，執行用戶所自定義的模型信息提取方法。最終將提取的模型信息保存為gltf 格式文件，實現插件的順利運行。插件代碼執行具體過程如下圖 4.4所示。

圖 4.4 插件代碼執行過程

（5）編寫代碼。

根據所需要實現的功能，借助Revit API中豐富的類、方法、屬性，自定義導出類, 完成相應功能代碼的編寫。自定義導出類時通過繼承IExportContext接口，對接口中的方法進行重寫，具體的方法重寫過程如下所示。

①Start方法作為插件功能代碼的入口，對場景進行創建，并在場景中新建相關節點數組，便于后續模型節點的遍歷與保存。

public bool Start(){ _transformStack.Push(Transform.Identity); RootDatas = new ObjectData();

//創建場景

glTFScene defaultScene =newglTFScene(); defaultScene.nodes.Add(0);

Scenes.Add(defaultScene);

//創建節點

rootNode = new glTFNode(); rootNode.name = "rootNode"; rootNode.children = new List<int>();

Nodes.AddOrUpdateCurrent("rootNode", rootNode); return true;

}

②調用OnElementBegin方法，遍歷Revit中每一個元素Id，提取元素Id所對應的節點信息與幾何信息，最終調用 OnElementEnd 方法，完成對三維模型中所有元素信息的獲取。

//元素節點信息獲取關鍵步驟如下所示。

public RenderNodeAction OnElementBegin(ElementId elementId){ Element e = doc.GetElement(elementId);

//創建新節點 glTFNode newNode = new glTFNode();

//獲取元素名并賦值給新節點

newNode.name = e.Category.Name + e.Name; //為新節點創建其他屬性 glTFExtras extras = new glTFExtras();

//獲取 ElementID 添加為新節點其他屬性 extras.ElementId = e.Id.ToString();

//獲取唯一 ID 添加為新節點其他屬性 extras.UniqueId = e.UniqueId;

//獲取元素剩余屬性 extras.Properties =Util.GetElementProperties(e, true); newNode.extras = extras;

//獲取構件的任意兩個點

GetPoints(currentElem); currentData.ElementLocation = EdgesPoints; currentDatas.AddOrUpdateCurrent(currentElem.Id.ToString(), currentData);

} //元素幾何信息獲取關鍵步驟如下。

public void GetPoints(Element element){

List<string> points = new List<string>();

Options options = new Options();

GeometryElement geometry = element.get_Geometry(options); GeometryInstance geoInstance = obj as GeometryInstance; GeometryElement geoElement = geoInstance.GetInstanceGeometry(); foreach (GeometryObject obj in geoElement){ Solid solid = obj as Solid;

DownEdge(solid);

}

③調用 OnMaterial 方法，獲取模型材質信息。材質信息獲取關鍵步驟如下。

public void OnMaterial(MaterialNode mn){

string name;

string uniqueId;

ElementId id = mn.MaterialId;

//創建 gltf 材質

glTFMaterial gl_mat = new glTFMaterial();

gl_mat.name = matName;

//將當前元素 Id 與材質添加到對應對應屬性中 Materials.AddOrUpdateCurrent(uniqueId, gl_mat);

}

(6)代碼編寫完成后，將插件程序重新生成后綴為.dII的文件。將完整的.dII文件地址復制粘貼到Revit文件中。在Revit中通過外部AddIn-Manager功能運行編寫完成的插件，插件運行如下圖 4.5 所示。

圖 4.5 插件運行示意圖

4.2BIM模型信息的JSON格式化表達

本章第一節在模型信息導出插件開發過程中，采用了當前較為主流的一種全新圖形語言傳輸格式：gltf格式。這種跨平臺格式目前已成為Web上的3D對象標準。在沒有 gltf格式的時候，在Web端處理一個三維信息模型，通常要花費非常多的時間。而使用 gltf格式后，在將三維模型信息導出時可以將模型信息轉化為與gltf格式相對應的文件信息，從而加工成為gltf格式文件。這樣在Web端渲染時，只需相應程序支持gltf格式文件加載即可順利的實現模型信息的Web端展示。

glTF格式文件內部信息采用JSON格式存儲。這一文件描述了整個3D場景的內容。它包含了對場景結構進行描述的場景圖。場景中的3D對象通過場景結點引用網格進行定義。場景對象以數組的形式存儲在JSON文件中，可以通過對應的數組來索引訪問。基于此，所有模型在采用開發的導出插件進行導出時，會將模型構件信息以JSON格式存儲于JSON文件中。通過上節插件的開發過程，研究Revit中的模型信息構成，同時參照gltf的數據格式規范,對模型中各種復雜構件的屬性信息進行了 JSON格式的導出，使其最終成為連接BIM模型與Web端頁面的數據中轉格式。以斜拉橋模型中1#橋墩為例，利用插件所導出的橋墩模型信息格式如下所示：

"name": "常規模型 1#橋墩",

"UniqueId": "5d7d51c5-8aa0-4173-beea-a104aafc733d-0003c970",

"ElementId": "248176", "Properties": {

"類別": "常規模型",

"主體": "參照平面 :15.171m",

"立面": "1517.1",

"創建的階段": "新構造", "拆除的階段": "無", "體積": "959.56 m3", "圖像": "＜無＞", "明細表標高": "正負零", "默認高程": "50.0", "樁基材質": "混凝土，現場澆注 - C25", "橋墩材質": "混凝土，現場澆注 - C30", "承臺材質": "混凝土，現場澆注 -C30", "樁長": "2500.0",

"樁縱向間距": "400.0", "樁橫向間距": "1200.0", "樁徑": "150.0", "承臺長度": "1450.0", "承臺寬度": "650.0", "承臺厚度": "300.0", "引橋墩頂部長度": "2320.0", "引橋墩頂部直段長度": "130.0", "引橋墩弧段半徑": "1166.0", "引橋墩底部長度": "1215.0", "引橋墩底部直段高度": "50.0", "引橋墩厚度": "90.0", "引橋墩偏移": "30.0", "主橋墩頂部長度": "1760.0", "主橋墩頂部直段高度": "137.6", "主橋墩弧段半徑": "1237.6", "主橋墩底部長度": "1070.0", "主橋墩底部直段高度": "50.0", "主橋墩厚度": "150.0", "類型圖像": "＜無＞", "成本": "0.00",

"OmniClass 編號": "012.01.01（A）.04（XL）.02.01", "OmniClass 標題": "橋墩"

}

由上述導出信息可以看出，BIM模型中構件信息通過插件轉化為了一種以JSON格式保存的文件形式。文件內容包含了所有在插件設計階段就已經提出的相關需求，其中包括了提取模型構件的幾何信息，屬性信息以及其材質信息，其中構件屬性信息又可從上述橋墩實例中看出，囊括構件名稱，構件唯一標識，構件參數化信息，構件唯一標識以及在第三章中我們根據所指定的編碼標準對不同構件進行的OmniClass編碼標識。最終，通過遍歷所有模型構件共同形成最終的數據傳輸格式文件。

4.3基于Three.js技術實現模型網頁端重建

4.3.1Three.js 技術特點

第二章中對于研究所要用到的Three.js圖形引擎已做過相關的介紹。Three.js是 WebGL API提供的第三方開源庫[51], WebGL原生的API是一種非常低級的接口，在使用時需要掌握數學與圖形學相關方面的技術，想要熟練運用較為困難。Three.js的出現, 對 WebGL 進行了封裝，簡化了創建三維動畫場景的過程。由于它的易用性和擴展性，使得該技術能夠滿足大部分的開發需求。

Three.js 具備以下功能特點：

(1)基于 Three.js 技術可實現對三維幾何圖形的創建。

(2)Three.js 技術下功能眾多，可實現在三維場景下創建動畫同時對創建的三維模型進行移動操作。

(3)Three.js中可通過使用光源API裝飾當前模型場景，同時可以為場景中模型賦予紋理及材質屬性。

(4)在 Three.js 中可自定義加載模型文件，同時也可通過調用相應的方法實現場景中模型文件格式的自定義導出。

(5)Three.js還為用戶所創建的三維模型場景提供了高級的后期處理效果，增強了用戶體驗。

4.3.2模型網頁端渲染

針對 Three.js 的技術特點，對導出的橋梁三維模型文件進行解析并實現三維模型網頁端的重建與渲染，這就需要使用到Three.js技術內置封裝的一些API來進行開發。 Three.js開發過程中主要涵蓋三個最基本的要素：場景，相機和渲染器。

( 1)場景

用來呈現所導入的的三維模型的一個場所，在javaScript中通過var scene = new THREE.Scene()命令代碼來完成場景的初始化操作。場景是所有物體的容器，是作為網頁端模型渲染的第一步，同時也是不可或缺的一個關鍵步驟。

( 2)相機

相機就像人的眼睛一樣，處于不同的位置，所看到的畫面就會截然不同。相機不同的擺放位置角度將決定場景所呈現給用戶的不同感官。Three.js中給定了多種相機的表示方法，在開發過程中我們選用透視相機(THREE.PerspectiveCamera)。通過代碼const camera= new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight)設置相機的相關參數，從而實現對整個三維場景縮放顯示及不同參數對應不同的角度來對三維場景進行取景顯示。

（3）渲染器當設置完畢場景以及相機，下一步就需要用到渲染器了，渲染器決定了渲染的結果要怎樣顯示到網頁中，以及應該將整個模型場景存放在網頁中的什么元素中，這些都是渲染器要做的事。

上述三個基本要素的關系可用下圖 4.6 來表示。

在搭建完成所需要的場景之后，此時還需要向當前場景中加入我們上一節中利用插件所導出的橋梁三維模型。在Three.js中提供了一系列的加載器用來加載特定的模型格式文件。這些加載器本質上都是解析模型文件的字符串，通過正則表達式提取相關的頂點、材質等信息轉化為 Threejs 自身的類表示的對象。在 Three.js 中常用到的自定義模型文件加載器如下頁圖 4.7 所示。

采用上節內容中所開發的模型信息導出插件，最終形成了格式為.gltf的格式文件，故在此處選用gltf文件加載器(GltfLoader)來進行加載導出的模型文件。由于導出的模型文件包含兩部分內容。一部分為.gltf文件，這一文件起到一個與gltf加載器進行識別并對接的作用，而另一部分為.bin文件，其中存儲了與模型中所有集合頂點相關的信息及模型材質文件，同時又將其轉化為一種二進制格式進行存儲。只有兩種文件共同使用，才能夠在Web端重構渲染形成完整的橋梁模型。但由于文件所占內存較大，故在加載模型文件前，需要使用到另外一種壓縮文件技術：Draco。它是用于壓縮和解壓縮 3D幾何網格和點云的庫,旨在改善3D圖形的存儲和傳輸。通過在當前場景中使用const dracoLoader = new DRACOLoader()代碼來創建相關的draco壓縮器，將模型文件進行壓縮，壓縮后的模型文件大小明顯縮小，從而有效提高了大型模型文件在web端解壓的效率。之后再通過使用GLTFLoader加載器加載壓縮過后的模型文件，對模型文件進行進一步解析，獲取模型文件中所攜帶的模型的幾何及材質信息，最終實現模型成功加載到當前場景頁面中。

通過上述操作，利用Three.js技術成功的將Revit中橋梁三維模型載入到了創建的場景中，但此時整個場景還未添加光源，場景中是看不到模型存在的。Three.js提供了生活中常見的一些光源的API以此來滿足開發中不同的場景需求，常見的光源有環境光, 點光源，平行光和聚光源。本文選用平行光來進行填充，通過構造函數 let directional Light = new THREE.DirectionalLight ()新建直線光對象，調節直線光的位置及相關參數使得模型在直線光的“照射”下成功展示到了當前場景中。

圖4.8斜拉橋模型在Web端成功加載

最終，隨著三維模型可視化場景的搭建完成，還需要將整個場景在瀏覽器中顯示出來并存放到頁面的某個元素中，這里就需要用到上文所提到的渲染器對象。使用代碼 const render = new THREE.WebGLRenderer（）新建渲染器對象，使用 render.setSize（ width， height）方法設置渲染尺寸為瀏覽器body區域的寬與高度。最終在頁面的body元素中插入 Three.js 渲染之后的結果即 canvas 對象，運行整個開發過程代碼，實現三維模型在 Web端真正的重建，最終Web端頁面下成功加載橋梁三維模型如上頁圖4.8所示。

4.4BIM 模型與網頁端交互

4.4.1 模型基本交互

在 Web 端實現橋梁三維模型的成功加載后，還需要對模型進行一些基本交互設置，使三維模型在網頁中能夠進行平移，旋轉以及縮放，增強Web端模型可視化效果。 Three.j s中提供了兩種控件供用戶選擇從而控制場景中三維模型的交互。一種為TrackBa- -llControls.js （軌跡球控件）。它通過將場景對象封裝到一個包圍球中，將鼠標操作映射為對整個包圍球的旋轉以及拖拽，拖動后模型位置會發生變化, 但是相機的位置不會變化, 導致再次旋轉模型將不再以模型為中心點。該控件雖可以達到與模型交互的目的，但卻容易令用戶陷入混亂，分不清上下左右間的關系。故其適合在調試模型過程中使用。而Three.js中所提供的另外一種控件為OrbitControls.js （軌道球控件）。雖二者相比只有一字之差，但原理卻完全不同。軌道球控件所采用的是一種控制場景中相機位置的方式，通過調整相機變換不同位置，從而達到相機中成像也會不同，最終間接等于實現了控制模型的運動。這種控件本質上物體是沒有發生變化的，只是外部的相機、人的視覺產生了變化，所以不會產生混亂效果，因此它也成為了網頁端與模型進行交互操作的首選工具。

本研究選擇采用OrbitControls.js控件對網頁端現已重構完成的橋梁三維模型進行基本交互功能的開發。在當前場景中引入該控件，使用構造函數THREE.OrbitControls（）創建一個控件對象，同時three.js還為該控件對象提供了一些常用相關設置如下表4.2。

表 4.2 OrbitControls 控件對象相關設置

設置內容設置內容描述

enableKeys 是否開啟鍵盤控制

enableZoom 是否可以縮放

autoRotate 是否自動旋轉

minDistance 相機距離原點的最短距離

maxDistance 相機距離原點的最短距離

enablePan 是否開啟拖拽

在完成相關設置操作后，將當前場景中的相機與渲染器作為控件對象的兩個參數傳入，最終通過在 animate 函數中調用軌道控制器的更新方法，對控制器每一次的變化進行更新與重新渲染，成功實現了三維模型在網頁端中的基本交互操作。模型基本交互方式如下表 4.3 所示。

表 4.3 Web 端三維模型基本交互方式

操作方式效果

點擊鼠標左鍵并移動相機圍繞場景中心旋轉

轉動鼠標滾輪或按住中鍵并移動模型放大與縮小

點擊鼠標右鍵并移動模型在場景中平移

點擊上、下、左、右方向鍵模型在場景中平移

4.4.2 模型拾取狀態變更

在研究了對于可視化模型的一些基本交互后，還需針對模型本身開發并添加一些常用的網頁端模型可視化操作。比如模型構件拾取狀態變更，以及模型屬性信息點擊查看的功能。這些功能的開發都依賴于對于模型實現點擊拾取的功能。

本節在研究了 Three.js官方文檔提供的API后，決定采用射線法來進行模型點擊拾取功能的開發。采用射線法依賴于Three.js中THREE.Raycaster射線，它是通過鼠標點擊屏幕位置的世界坐標和相機位置的世界坐標來確定射線的方向，然后利用射線去和場景中的模型進行相交，相交到的模型就是被拾取到的模型［52］。

利用THREE.Raycaster對場景中模型拾取功能開發的主要實現過程如下圖4.9所示。

基于屏幕上點

0iMTHREE.Vecor2

向量

使用

vector, un project

方法將屏幕坐爾專換

為三維坐標

創建

TH REE. Ray cm st er對

象向場景中發身前邈

使申

raycaste r.i n tersect

Objects方迭判斷被

照身朋模型対象

圖 4.9 模型點擊拾取功能實現過程

基于上述功能實現過程，通過射線法選取到了與當前射線所相交的所有模型對象，使用intersects]。].object方法拾取到所有相交的模型對象之中距離射線發射點最近的一個模型對象，此即為當前選中的模型構件。通過intersects[0].object.material.color.set()方法可將當前拾取到的模型構件材質顏色進行設置，從而實現了將三維場景中模型的選中狀態進行變更的目標。模型拾取狀態變更的關鍵代碼如下方所示：

//使用射線法

const raycaster = new ThREE.Raycaster();

//鼠標移動

const mouse = new THREE.Vector2();

//鼠標點擊事件

function pickup(p){

//將鼠標點擊位置的屏幕坐標轉換為 three.js 中的標準坐標

mouse.x = (e.clientX/window.innerWidth)*2 - 1; mouse.y = -(e.clientY/window.innerWidth)*2 + 1; //從相機發射一條射線，射線經過鼠標點擊位置 raycaster.setFormCamera(mouse,camera); //計算射線相機掃到的模型對象，選取例發射點最近的模型對象更改其材質顏色

let intersects = raycaster.intersectObjects(scene.children);

for(var i = 0;i < intersects.length; i++){ intersects[0].object.material.color.set(0xxxff00);

}

4.4.3 模型屬性信息查看

在實現三維場景中點擊拾取模型構件功能后，為了能使得整個三維模型能在網頁端顯示完整，可視化效果更加明顯，還需要在本文以上開發功能基礎上對三維模型增加模型屬性信息查看功能。

模型屬性信息查看功能基于上一節模型拾取狀態變更功能而進行開發，上一節中使用射線法的方法選取到了某時刻鼠標正點擊的模型構件，此時的模型構件攜帶了一系列的模型信息，模型信息在當前場景中是可以直接獲取到的。通過本章中 4.2節內容研究發現，在使用開發的模型信息導出插件進行開發時，模型所攜帶的信息被保存在了 gltf 文件中，當使用Three.js技術加載gltf格式文件時，相應的模型信息會被加載到mesh 類下的userDate數據結構中。開發模型屬性信息查看功能時，通過點擊模型構件，利用 currentObject.userData方法獲取到該模型構件所攜帶幾何與非幾何信息，同時在當前js 頁面中創建動態表格，對獲取到的信息進行遍歷操作，將橋梁模型信息動態的遍歷到當前所創建表格中，最終完成模型屬性信息查看功能的開發。模型屬性信息查看功能相關代碼如下所示。

//動態的生成表格

const generateTable = (data)=>{

var table=document.createElement('table');

var thead=document.createElement('thead') var headtr=document.createElement('tr') var headFirst = document.createElement('th') var headSecond = document.createElement('th') headFirst.textContent='屬性'

headSecond.textContent='屬性值' headtr.appendChild(headFirst) headtr.appendChild(headSecond) thead.appendChild(headtr) table.appendChild(thead) var tbody=document.createElement('tbody'); table.appendChild(tbody)

for (const [key, value] of Object.entries(data)) { if(key !='Properties'){

var row = document.createElement('tr');

var cellFirst = document.createElement('td'); var cellSecond = document.createElement('td'); cellFirst.textContent = key;

cellSecond.textContent=value row.appendChild(cellFirst); row.appendChild(cellSecond); tbody.appendChild(row);

}else{

for (const [key, value] of Object.entries(data.Properties)) { var row = document.createElement('tr'); var cellFirst = document.createElement('td'); var cellSecond = document.createElement('td'); cellFirst.textContent = key; cellSecond.textContent=value row.appendChild(cellFirst); row.appendChild(cellSecond); tbody.appendChild(row);

}

4.5本章小結

本章在上一章所建立的斜拉橋BIM信息模型的基礎之上進行了深入的研究。通過采用Revit二次開發技術，利用C#編程語言開發一種三維模型信息導出插件，將三維模型轉換為與網頁端進行交互傳輸的 gltf 文件格式。同時對插件所導出的格式文件進行了一個解讀，另外還針對Three.js技術框架進行探索，選擇相關技術方法，將橋梁三維模型成功重構到網頁端進行了顯示。為了提高三維模型網頁端可視化的效果，還對網頁端可視化模型一些基本交互操作進行研究，包括模型的平移、旋轉、縮放，以及模型點擊拾取與模型構件信息點擊查看。

5BIM+Web 斜拉橋信息管理平臺構建研究

5.1平臺架構設計

通過本文以上研究內容，成功將橋梁BIM信息模型從Revit中導入到Web端進行了重構，并添加用戶與網頁端三維模型進行交互的一些基本功能。基于現有可視化頁面，提出了基于BIM+Web的橋梁信息管理平臺的構建研究。平臺以B/S架構進行設計開發, 后端使用Java語言進行編寫相關平臺功能，平臺主要包含如下圖5.1的三層架構模式，與用戶直接進行交互的用戶界面層、平臺主頁面功能模塊層，及平臺與后端數據庫進行交互的數據庫層面。

用戶界面層，主要實現與用戶交互的作用，作為Web瀏覽器頁面，負責實現系統數據的傳入與輸出，處理后的結果自動反饋到界面層中進行顯示［53］。用戶界面層主要針對上述章節中所完成的模型可視化頁面而進行操作。采用HTML語言編寫html頁面，將橋梁模型可視化頁面引入，修改當前頁面布局，增加css樣式，使整個平臺頁面更加豐富美觀。

功能模塊層，主要基于構建完成的模型可視化平臺實現以下五個相關功能：登錄用戶管理功能，模型信息上傳功能，平臺可視化模型交互功能測試，模型信息管理功能，基于可視化模型檢測信息管理功能。

數據庫層，主要負責對用戶提交的信息或是模型攜帶信息進行上傳與保存，同時使用相關數據庫操作語言，對數據庫中數據實現增刪改查等操作。

5.2BIM+Web 平臺項目搭建

5.2.1 平臺項目創建

平臺創建選用當前較為主流的IDEA開發平臺，在此平臺中，新建項目，選擇使用

maven工程來搭建此平臺。將項目命名為managementplatform，選擇項目存放路徑，點擊finish完成該平臺項目的創建。創建過程如下圖5.2所示。

圖 5.2 maven 項目創建過程

項目成功創建完成后，需要對當前項目目錄結構進行添加，在src目錄下新建main 目錄與 test 目錄， main 目錄下主要存放代碼源文件， java、xml、proeprties 等類型文件都存放于此目錄之下。test目錄用于進行單元測試時使用。在main目錄下還需新建java 目錄與resource目錄。java目錄下存放了在后端業務開發中一些常用到的控制器，實體類，業務層等，而對于前端頁面開發來說，一些前端頁面，頁面布局，頁面所需圖片等資源都被存放到resource目錄下。平臺項目目錄結構如下圖5.3所示。

圖 5.3 平臺項目目錄結構

5.2.2SpringBoot 框架整合

SpringBoot的便利性在于它提供了大量開箱即用的依賴模塊，這些依賴模塊為 Spring Boot應用提供了大量的自動配置，使得SpringBoot應用只需要非常少量的配置甚至零配置，便可以運行起來。

為了便于后續功能的開發，在基于第二章介紹到的SpringBoot優點之上，選擇在 pom.xml文件下添加相關配置，導入SpringBoot相關依賴，采用SpringBoot結構框架來優化整個項目的開發過程，提高項目開發的效率。

由于本論文所研究的開發平臺是基于Web端向用戶進行展示的，所以在添加配置時首先要添加與Web開發場景相關的所有依賴，引入spring-boot-starter-web依賴，不需要額外導入Web服務器和其他Web依賴。其次平臺還需要與后端數據庫進行連接，實現信息的便捷高效存儲與查詢。在當前項目下的pom.xml配置文件中引入spring-boot- starter-jdbc以及與后端mysql數據庫的連接依賴mysql-connector-java。管理平臺框架整合部分代碼如下圖 5.4 所示。

<groupld>org.springframework.boot</groupld> <artifactld>spring-boot-devtools</artifactld> <scope>runtime</scope>

〈/dependency〉

<呂「。springframework.boot</groupld> <artifactld>spring-boot-starter-jdbc</artifactld> </dependency>

<groupld>org.springframework.boot</groupld>

cartifactld>spring-boot-stErter-web</artifactld>

</dependency>

■<gr oupld>org.mybatis. spring, boo tc/groupld〉 <artifactld>mybatis-spring-boot-starter</artifactld> <version>2.2.0</version>

</dependency> <dependency>

<groupld>mysql</groupld>

<artifactld>mysql-connector-javm</artifmctld> <scope>runtime</scope>

〈/dependency〉

圖 5.4 SpringBoot 框架整合依賴

另外，在引入與后端數據庫連接依賴后，還需對數據庫配置文件進行設置，在 resource 目錄下的 application.yml 文件中設置數據庫對應的地址以及登錄數據庫用戶賬戶及密碼，從而實現管理平臺項目成功與外部數據庫進行連接。數據庫配置信息及外部數據庫連接如下圖 5.5，圖 5.6 所示。

圖 5.5 數據庫配置信息

圖 5.6 外部 MySQL 數據庫連接

5.3平臺功能開發研究

本結將側重從開發思路和開發過程對平臺的一些基本功能進行研究。上節中已經對平臺項目進行了初步的搭建，本節主要針對于平臺的一些基本功能進行開發，主要包括對平臺登錄用戶信息進行管理，開發模型信息文件上傳功能，模型信息管理功能及對于檢測信息管理的功能。同時也對上一章節中所研究的可視化模型基本交互功能進行測試。 5.3.1 登錄用戶管理

在平臺使用中，首先需要做的就是對于登錄用戶的管理工作。作為一個信息管理平

臺，使用者眾多，橋梁模型信息在項目的整個生命周期中起著非常重要的作用，開發平臺登錄用戶管理功能，可以針對不同時間段使用信息管理平臺的用戶進行管理，查看每個使用者的操作信息。

運行該平臺項目，在瀏覽器中輸入http://localhost:8080/login,進入平臺登錄界面如下圖 5.7 所示。

圖 5.7 斜拉橋信息管理平臺登錄頁面

在登錄頁面中輸入用戶名與密碼后進入信息管理平臺主頁面，點擊側邊欄中的登錄用戶管理，在該頁面下可對當前平臺登錄過的用戶信息進行查看，可查看用戶賬號以及用戶登錄平臺時間信息，以及用戶IP地址。另外還對用戶權限功能做出了劃分，如圖 5.8中所示，管理員擁有最高權限，可對登錄用戶進行統一管理，進行用戶權限分配與用戶刪除功能，用戶權限包括瀏覽查看模型與查看橋梁檢測信息。對于信息管理方面則統一交付給管理員進行操作，管理員可以為項目負責人又或是平臺使用者。而用戶則面向所有平臺使用者。開發用戶管理功能，對構建信息管理平臺起著至關重要的作用。

圖 5.8 登錄用戶管理頁面

5.3.2 模型信息文件上傳

在上述章節研究內容中，采用了手動上傳模型的方式，將Revit中使用插件導出的 gltf 橋梁三維模型格式文件手動移動到固定加載位置，再通過 three.js 技術進行定向的加載，最終成功將模型重構顯示到了 Web端頁面中。基于此信息管理平臺，為了能夠最大化提升用戶操作體驗，增強平臺完善性，豐富平臺功能，開發三維模型在線上傳功能。

模型文件上傳頁面如下圖5.9所示，實現上傳功能的后端控制器方法如圖 5.10中代碼所示。

圖 5.9 模型文件上傳頁面

圖 5.10 模型文件上傳到本地后端代碼

通過在頁面中點擊上傳模型文件，在 three.js 場景中使用第四章中所介紹到的 gtlfloader 加載器成功加載到用戶所上傳模型。與此同時，在模型加載過程中，使用 ajax 開發技術，在場景加載模型過程中同步向后端服務器發送上傳模型請求，通過在后端控制器方法中提取模型文件信息，將上傳的模型文件信息保存到后端數據庫中進行存儲，為后續開發中使用當前模型信息節約了時間，避免模型進行多次上傳，節約內存，提高平臺可用性與便捷性。

分析第四章中所導出的橋梁模型信息格式發現，橋梁模型信息格式固定，包括構件名稱，構件唯一 Id,元素Id以及構件屬性四個部分。在上傳這些模型信息時需要在后端開發中新建與各部分屬性所對應的實體類，實體類應與數據庫中的表結構條目名稱相對應。

在后端項目中所建的模型信息實體類如下圖 5.11 所示。

圖 5.11 模型信息實體類

在成功創建模型信息實體類對象之后，還需要對前端所上傳的信息進行解析，對數據庫進行操作，將信息進行整合保存到后端數據庫中。本文采用 mybatis-plus 數據庫操縱框架，它是在原有常用的mybatis框架之上研發的一種增強工具，在原有的基礎上做了增強，卻不做改變。在使用Mybatis-Plus之后既可以使用Mybatis-Plus的特有功能，又能夠正常使用 Mybatis 的原生功能。在平臺項目中新建模型信息上傳接口與實現類，

通過重寫數據庫操縱語言從而實現對數據庫增刪改查的操作。最終在后端控制器中調用重寫后的面向數據庫的模型信息保存方法將橋梁模型信息上傳到后端數據庫中。后端控制器操作代碼如下所示：

//將橋梁構件信息上傳到后端數據庫中進行保存

@PostMapping("/getResult") @ResponseBody public String getResult(String briageInfo){ List<Bridge> bridges = JSON.parseArray(briageInfo, Bridge.class); bridges.forEach(x->{

Bridge byId = bridgeService.getById(x.getElementId()); if(byId==null) {

//調用重寫方法進行保存

bridgeService.save(x);

}else {

bridgeService.updateById(x);

}

});

return briageInfo;

}

最終，通過在可視化頁面加載模型，頁面向后端控制器方法發送ajax請求，成功將模型信息上傳到了后端數據庫中進行保存。后端數據庫中模型信息如下圖5.12所示。

圖 5.12 后端數據庫中模型信息存儲

5.3.3平臺可視化模型交互功能測試

上一節中將導入的模型信息成功上傳，模型文件也會隨之加載到當前平臺項目中。

在第四章中研究了 BIM 模型在網頁端可視化的可行性，并實現了模型在網頁端中的基本交互操作。本章節在上述研究的基礎上，在已經搭建好的平臺項目中，對上述模型可視化功能進行測試。首先在平臺中新建一個模型可視化頁面，將上文中已經搭建好的場景頁面載入到當前頁面。平臺可視化頁面構建前端代碼如下所示：

<body>

<h3>斜拉橋三維模型</h3>

</div>

//將可視化模型頁面引入

</section>

</body>

完成模型可視化頁面的創建后，即可在當前平臺中對導入的模型進行交互功能的測

試。可視化模型基本交互功能測試的結果如下圖 5.13、圖 5.14、圖 5.15、圖 5.16。

在對平臺模型基本交互功能測試后，對于第四章中所介紹到的可視化模型拾取狀態變更與模型構件點擊查看屬性信息功能也在平臺中做了相應的測試。測試效果見下圖 5.17。當使用鼠標點擊模型中 3#橋墩，橋墩由于被選中而變為紅色，同時模型構件在被選中的同時也會遍歷模型構件信息，并展示到平臺當前頁面中。

圖 5.17 平臺可視化模型構件拾取與屬性信息查看功能測試

5.3.4 模型信息管理

在第四章研究中成功實現了將橋梁三維模型導入Web端平臺進行可視化。本章節

對可視化橋梁模型信息管理平臺進行進一步研究，在實現平臺中橋梁模型可視化操作的基礎之上，對現有上傳模型信息進行統一管理，針對數據庫中保存的模型信息添加增、刪、改、查等操作，豐富平臺功能，充分體現 BIM+Web 平臺的優勢性與可用性。

在該平臺項目中，首先需要對信息管理功能前端頁面進行設計。新建html頁面，在頁面中使用 bootstrap 前端頁面開發框架進行信息管理功能頁面的快速開發。同時引入 Thymeleaf模板引擎用于渲染XML/XHTML/HTML5內容，提高頁面開發效率。前端頁面開發部分核心代碼如下圖 5.18 所示：

<tr>

砒h>操作</th>

</tr>

</thead>

<tbody>

<td th:text="${stats.count}">Trident</td>

<td th:text="${bridges[1 Uniqueld']}',>UniqueId</td>

<td class="elementld" th:text=,,${bridges[1 Elementld1 ]}">ElementId</td>

<td>

<td>

</td>

</tr>

</tbody> 中。，半.

圖 5.18 信息管理功能頁面核心代碼

在完成頁面的開發工作后，需要向頁面中注入所上傳到數據庫中的橋梁模型信息從而實現橋梁模型信息平臺化管理。在項目后端控制器中編寫對于數據庫信息的查詢操作，將信息展示到所開發的前端頁面表格中。在后端操作數據庫獲取模型信息的代碼如下所示：

//對數據庫中模型信息進行操作

@GetMapping("/structure_table")

public String structure_table(@RequestParam(value="pn",defaultValue = "1")Integer pn,@RequestParam(value = "name",required = false)String name,

Model model){

List<Bridge> list = bridgeService.list();

//分頁查詢數據

Page<Bridge> userPage = new Page<>(pn, 5);

//分頁查詢的結果

QueryWrapper<Bridge> QueryWrapper = new QueryWrapper<>(); QueryWrapper.like(StringUtils.isNotBlank(name),"name",name); Page<Bridge> page = bridgeService.page(userPage, QueryWrapper); records.forEach(record->{

BridgeVo bridgeVo = new BridgeVo();

BeanUtils.copyProperties(record,bridgeVo); bridgeVo.setPropertiesVos(getPropertiesVo(record.getProperties())); bridgeVos.add(bridgeVo);

});

List<PropertiesVo> propertiesVos = new ArrayList<>(); bridgeVos.forEach(bridgeVo ->{

propertiesVos.addAll(bridgeVo.getPropertiesVos());

});

model.addAttribute("bridge",bridgeVos); model.addAttribute("propertiesVos",propertiesVos); return "index/structure_table";

}

在將模型信息成功查詢到當前平臺功能頁面后，針對現有模型信息提供了搜索功能，通過在當前搜索框中輸入想要查詢的構件關鍵字，可快速查看構件信息并且可點擊跳轉到當前模型中的相應構件，完整查看構件模型位置及模型信息。模型信息搜索功能開發的前端頁面設計如下圖 5.19 所示。

《section class«"panel">

deader class='*panel-heading">

<div classs*'search?container"〉

<input type--texf' placeholder-1*輸入構件輕稱關說亍迸冇搜宅-name-MnameM> <button type="sub<nit*'>捜索"button〉

</form>

</div>

"header〉

圖 5.19 模型信息搜索功能前端頁面代碼

最終，成功完成對于平臺模型信息管理功能開發。下圖 5.20為開發完成后的平臺模型信息管理功能頁面。在搜索框中輸入橋墩關鍵字，表格中會顯示所有橋墩信息。點擊查看按鈕各構件屬性信息將會顯示。另外表格還兼顧與模型的交互功能，在下圖 5.20 中，當想要查看常規模型 1#橋墩三維模型時，點擊其構件名稱，頁面將自動跳轉到三維模型展示頁面，并自動拾取到當前所要查看的模型構件。將模型靜態信息與動態三維模型進行了綁定，更好的詮釋了基于BIM的模型可視化信息管理平臺的優勢性。

圖 5.20 模型信息管理功能頁面

5.3.5 檢測信息管理

對于橋梁生命周期來說，隨著時間的推移，后期對于現有橋梁會存在多次檢測維修，橋梁檢測信息也因此成為了在橋梁運維過程中尤為重要的一部分信息。將橋梁檢測信息上傳，與BIM模型進行聯動，實現在模型可視化平臺中瀏覽查看檢測信息，提升了檢測信息與可視化三維模型的交互性。另外，還針對用戶所上傳的檢測信息做了一個統一化的管理，可根據檢測日期將上傳信息進行劃分，更快速的查看與修改，提高了工作效率。

平臺用戶檢測信息上傳頁面如下頁圖5.21所示。本文主要針對橋梁外觀檢測與橋梁無損檢測信息進行了上傳，以橋梁外觀檢測為例：在該平臺中，通過在檢測部位下拉框中可以選擇所檢測部位處于橋梁橋面系，上部結構或是支座及下部結構，同時描述相關病害情況說明，選擇上傳病害圖片，最后填寫檢測日期完成該橋梁模型相對應的橋梁檢測信息的上傳。

圖 5.21 平臺檢測信息上傳頁面

通過對上述功能的開發，成功的實現了將橋梁檢測信息進行上傳，橋梁檢測信息上傳到后端數據庫中后，還需要對這些檢測信息進行統一化管理，平臺項目中采用下述后端控制器方法成功的將所上傳前端檢測信息在管理平臺頁面中進行展示。平臺檢測信息管理頁面如下圖 5.22 所示。

//對上傳到數據庫中檢測信息進行下載與管理

@GetMapping(value = {"/test_view"})

public String testView(@RequestParam(value = "name",required = false) String date, Model model){

QueryWrapper<TestInformation> QueryWrapper = new QueryWrapper<>(); QueryWrapper.like(StringUtils.isNotBlank(date),"test_date",date); List<TestInformation> list = testInformationService.list(QueryWrapper); model.addAttribute("list",list);

return "index/test_view";

}

圖 5.22 檢測信息管理頁面

在上述開發的檢測信息管理頁面中，針對當前的橋梁所上傳的一些檢測信息會進行顯示，點擊查看按鈕能夠對上傳部位病害圖片的進行一個完整的查看。另外，在該功能中，還添加了依據時間進行檢測信息搜索的功能，在搜索框中輸入想要查看的某一天的檢測內容，則會依照時間對上傳橋梁檢測信息進行排列，更加的便于用戶對檢測信息的管理。

5.4平臺開發相關技術代碼

5.4.1 平臺登錄頁面相關代碼

<form class="login100-form validate-form" action="index.html"

method="post" th:action="@{/login}">

用戶登錄

</span>

</div>

</div>

記住密碼

</label>

</div>

<div>

</div>

</div>

<span class="txt2"> 注冊用戶？

</span>

</div>

</form>

<p>斜拉橋信息管理平臺</p></div>

</div>

</body>

5.4.2平臺橋梁檢測信息上傳頁面相關代碼

<h3> 橋梁檢測信息

</h3>

<li>

</li>

<li class="active">橋梁檢測信息</li>

</ul>

</div>

<header class="panel-heading"> 橋梁外觀檢測

</header>

<form role="form" th:action="@{/upload1}"

method="post" enctype="multipart/form-data">

<label for="testLocation">外觀檢測部位</label>

<select class="form-control m-bot15"

id="testLocation" name="testLocation">

</select>

</div>

<label for="diseaseInstruction">病害情況說明 </label>

</div>

<label for="InputFile">上傳相關病害圖片或文件 </label>

</div>

</div>

</form>

</div>

</section>

</div>

橋梁無損檢測

</header>

<label for="testResult" class="col-lg-2 col-sm-2 control-label" >無損檢測結果</label> <div class="col-lg-10">

<select class="form-control m-bot15"

id="testResult">

<option>碳化深度檢測</option>

<option>混凝土強度檢測</option>

<opti on>鋼筋保護層檢測</opti on>

</div>

</div>

<input type="file" id="inputResults" multiple〉

</div〉

<div class="form-group"〉

</div>

</div>

</form>

</div>

</section>

</div>

</section>

</div>

</section>

5.5本章小結

本章在第四章研究內容基礎之上做了進一步研究，在第四章只要介紹到了如何將 Revit中導出的BIM信息模型重建渲染到Web端頁面中，并針對Three.js技術進行了一些研究，探索開發Web端可視化模型的一些基本交互操作。本章中基于上述可視化模型頁面，自主探索開發基于BIM的橋梁信息管理平臺，從起初的平臺架構設計，到采用計算機編程語言Java，在編程平臺中搭建平臺項目，開發實現平臺登錄頁面、平臺用戶管理功能、平臺模型文件上傳功能、平臺可視化模型交互操作測試的功能，最終還將平臺與后端數據庫進行關聯，對用戶登錄信息、上傳模型信息，與上傳橋梁檢測信息進行了統一化的管理，添加對后端數據庫中信息的常用操作，基本實現平臺的完整落地，使得基于BIM的可視化模型信息管理平臺實現成為可能。

6總結與展望

6.1主要工作總結

現如今，BIM技術已逐漸走向成熟，BIM技術在以往發展基礎上，改變傳統行業工作模式，開始探尋BIM與各行業，各平臺間的信息融合。本文以BIM技術為基礎，結合 Three.js 技術，對橋梁 BIM 模型在網頁端可視化進行研究，同時借助計算機編程語言 Java語言深入開發研究基于可視化模型的斜拉橋信息管理平臺。在平臺中通過開發各項功能，對平臺斜拉橋三維模型進行了交互測試，驗證了 BIM技術與計算機技術相融合的可能性，實現了橋梁 BIM 信息跨平臺交互與協作。本文主要工作總結如下：

（1）利用Revit軟件參數化建族的方式對斜拉橋部分結構進行參數化族的創建；同時對Revit中可視化插件Dynamo進行研究，利用其可讀取外部Excle文件的特性，使用 Dynamo 播放器完成對節點功能的開發，實現對于斜拉橋箱梁輪廓族的可視化快速創建，同時還使用Dynamo插件實現了斜拉橋箱梁節段快速定位及放置。最終完成了斜拉橋三維模型的創建。

（2）對當前建筑行業構件信息分類與編碼標準進行研究，采用“混合分類法+復合編碼”的方式，研究橋梁工程的結構組成，總結形成一套適用于橋梁工程BIM信息模型的分類與編碼的標準，同時為所創建的斜拉橋BIM三維模型構件賦予編碼信息，使模型構件具有唯一標識，為 BIM 模型信息的整個交互過程提供便利。

（3）對Revit中模型信息結構進行分析，借助Revit二次開發技術，采用C#語言，在Visual Studio 2019開發平臺下開發實現一種橋梁模型信息導出插件，同時利用開發的插件對所創建的斜拉橋BIM模型信息進行導出，對所導出的gltf格式的模型文件信息進行解讀，為后續模型可視化操作提供便利。

（4）對 Three.js 圖形可視化技術進行探索研究，分析網頁端構建可視化模型頁面所需要的場景要素，使用HTML技術及Three.js技術成功將橋梁三維模型重構到網頁端進行顯示。同時研究網頁端橋梁模型基本交互操作相關API，針對頁面場景中橋梁可視化模型的平移、旋轉、縮放，以及模型點擊拾取與模型構件屬性信息查看的功能的實現進行了探索。

（5）自主探索開發基于BIM的橋梁信息管理平臺，設計平臺架構，采用計算機編程語言Java，在編程平臺中搭建平臺項目，開發實現平臺登錄頁面、平臺用戶管理功能、平臺模型文件上傳功能、平臺可視化模型交互操作測試的功能。同時將平臺與后端mysql 數據庫進行關聯，對用戶登錄信息、上傳模型信息，與上傳橋梁檢測信息進行了統一化的管理，添加對后端數據庫中信息的常用操作，實現橋梁三維模型跨平臺的可能性。

6.2展望

本文以搭建可視化橋梁模型信息管理平臺為目的，對斜拉橋從三維模型建模方式，到對橋梁構件信息編碼，再到對模型信息導出插件開發研究，采用Three.js技術將橋梁模型成功重構到網頁端并實現基本交互功能，最終成功實現平臺搭建。但在研究過程中，本文還存在以下不足之處，后續可以從以下幾個方面進行深入研究：

（1）在橋梁建模過程中，本文研究采用Dynamo可視化操作對箱梁輪廓族進行了快速創建，箱梁族的創建仍需要手動繪制，后續研究中可探尋整個橋梁模型使用Dynamo 進行快速布置的方式，提高橋梁建模效率。

（2）本文研究形成的橋梁構件分類編碼標準規范主要針對斜拉橋，有一定局限性，后續研究可繼續對現有分類編碼標準進行深入研究，形成一套完善的適合于所有橋梁工程的分類編碼標準規范。

（3）本文對橋梁三維模型網頁端交互性研究比較有限，后續可對Three.js技術進行深入研究，使得網頁端可視化模型功能更加豐富完善。

（4）對于斜拉橋信息管理平臺的構建研究，本文實現了基本平臺搭建，使可視化模型信息管理平臺成為可能性，對于平臺功能的開發，后續可繼續深入研究，將模型與信息進行聯動，充分發揮基于可視化模型信息管理平臺的優勢性。

致謝

行文至此，意味著三年碩士生涯也即將畫上句號。腦海中思緒萬千，回想三年生活走過的每一步，都離不開老師的幫助，同學的陪伴，親友的關懷。三年求學生涯，使我收獲頗多，又成長許多。

金秋有感，難忘師恩，今日之我，源于我師。感謝我的導師張麗萍老師，從入學以來就對我進行耐心指導與培養，給予我許多生活學習上的經驗。您為人正直，平易近人，治學態度嚴謹，對待工作充滿著無限的熱愛與專注。每次碰到疑惑，您總會抽出時間為我們進行答疑解惑，從解決問題本身再到生活中各個方面，您都不辭辛苦，不遺余力用為我們逐一進行解決，您是我學習的榜樣，生活的風向標，您為我三年生活帶來了許多溫暖與感動。在您的感染下，我變得更加自信，陽光，充滿熱情。在此結束之際，我真摯的對您說一聲：“謝謝您，我的老師”，感謝您的教誨與陪伴！

三年的生活，同樣也離不開同學，師兄的陪伴與幫助。在此，我要感謝我已經工作的師兄：張修海、張哲遠、趙齊三位師兄，感謝你們在我遇到問題難以著手，碰到困難難以解決的時候，對我提供的無微不至的幫助。另外要感謝我的舍友，我的同門翁浩然，是你們在生活學習中一起陪著我，與我一齊研究，一齊進退。謝謝你們！

最后，感謝一直支持我，為我加油鼓勁的父母親人們。因為有你們在身后，我才會時候覺得自己生活很幸福，有你們的陪伴與支持，加上無微不至的關心，我才能夠放下一切雜念，心無旁騖的去學習，去探索研究。你們是我生活永不止步的最大動力。謝謝你們！

同樣，衷心的感謝百忙之中參加論文評審與答辯的學者專家和教授！感謝你們的悉心指導與教誨！

參考文獻

[1]潘婷，汪霄.國內外BIM標準研究綜述[J].工程管理學報，2017，31(1): 1-5.

[2]王亮.基于BIM的斜拉橋設計應用與信息管理研究[D].西南交通大學,2016.

[3]范勝強.基于WebGL的橋梁模型顯示系統的研究和實現[D].石家莊鐵道大學,2020.

[4]陳坤.基于javaEE的BIM綜合管理平臺框架技術研究及實現[D].華東交通大學,2021.

[5]寧澎.基于WebGL的開放BIM跨平臺可視化系統研究[D].中北大學,2020.

[6]ZHANG J P, LIU Q, HU Z Z, et al. A multi-server information-sharing environment for cross-party collaboration on a private cloud[J]. Automation in Construction, 2017, 81: 180-195.

[7]HU Z Z， ZHANG X Y， WANG H W， et al. Improving interoperability between architectural

and structural design models: An industry foundation classes-based approach with web-based tools[J]. Automation in Construction, 2016, 66: 29-42.

[8]劉洋.基于WebGL的BIM模型輕量化展示應用研究[D].中北大學,2021.

[9]陳蔚韜.基于IFC與WebGL的BIM模型數據可視化方法研究[D].西安建筑科技大學,2021.

[10]Ishveena Singh. BIM adoption and implementation around the world: Initiatives by major nations[DB/OL].https://www.geospatialword.net/blogs/bim-adoption-around-the-world/.2017.

[11]SLee , J Yu. Comparative Study of BIM Acceptance between Korea and the United States[J].Journal of Construction Engineering&Management, 2016, 142 (3) :05015016.

[12]Fu Changfeng, Ghassan Aouad, Angela Lee, Amanda Mashall-Ponting, Song Wu. IFC model viewer to support nD model application[J]. Automation in Construction, 2005, 15(2): 178-185.

[13]Kereshmeh, et al. "Java Script Object Notation (JSON) data serialization for IFC schema in web-based BIM data exchange." Automation in Construction (2017).

[14]Xu Z , Zhang Y ,Xu X .3D visualization for building information models based upon IFC and WebGL integration[J]. Multimedia Tools and Applications, 2016, 75(24):17421-17441.

[15]CostaG. Connecting building component catalogues with BIM models using semantic technologies: an application for precast concrete components[J]. Automation in Construction, 2015, 57: 239-248.

[16]Liu X ,Xie N , Tang K , et al. Lightweighting for Web3D visualization of large-scale BIM scenes in real-time[J]. Graphical Models, 2016, 88.

[17]K M LEE. Struction of and infrastructure engineering[J].2012,8:687-703.

[18]楊黨輝，蘇原，孫明.基于Revit的BIM技術結構設計中的數據交換問題分析[J].土木建筑工程信息技術,2014,6(03):13-18.

[19]黃強.我們該為BIM做點什么[J].建筑,2016(05):9-13.

[20]杜政，王海俊，談震，等.基于IFC與WebGL的水利工程BIM輕量化應用研究[J].中國農村水利水電, 2020(11): 199-203.

[21]吉方慧，劉洋，周建強，等.基于BIM的綠色建筑評價平臺的應用與分析[J].長江技術經濟， 2021,5(S1):34-37.

[22]朱海林，陳登峰，王帥舉.基于WebGL的BIM模型三維可視化技術研究[J].河北:科技風,2019, (31)： 123.

[23]陳遠，康虹，張靜雅.基于IFC標準的BIM模型編程語言解析方法研究[J].土木建筑工程信息技術,2017,9(03):85-89.

[24]鄧達.基于BIM技術的大跨徑連續剛構橋施工監控研究[D].長春：吉林大學,2019.

[25]陳蔚韜.基于IFC與WebGL的BIM模型數據可視化方法研究[D].西安建筑科技大學,2021.

[26]王珩瑋，胡振中，林佳瑞，等.面向Web的BIM三維瀏覽與信息管理[J].土木建筑工程信息技術， 2013,5(3):1-7.

[27]王傳鵬.基于WebGL的建筑大模型實時顯示系統設計與實現[D].華南理工大學，2018.

[28]劉丞.基于WebGL的大規模場景實時漫游技術研究[D].廣東工業大學，2019.

[29]張溫.基于BIM的城市綜合管廊輕量可視化運維管理系統研究[D].西安建筑科技大學,2020.

[30]徐照，徐夏炎,李啟明，張星.基于WebGL與IFC的建筑信息模型可視化分析方法[J].東南大學學報 (自然科學版)，2016，46(02):444-449.

[31]趙菲.基于WebGL的古建筑BIM模型輕量化研究與實現[D].西安建筑科技大學,2018.

[32]Saska Ales，Tichy David，Moore Robert，Rasquinha Achilles，Akdas Caner，Zhao Xiaodong,Fabbri Renato,Jelicic Ana,Grover Gaurav,Jotwani Himanshu,Shadab Mohamed, Helikar Resa，Helikar Tomas. cc Net Viz: A Web GL based Javascript library for visualization of large networks.[J]. Bioinformatics (Oxford, England),2020.

[33]Gracia, J. and E. Bayo, An effective and user-friendly web application for the collaborative analysis of steel joints. Advances in Engineering Software, 2018.

[34]119(MAY):p. 60-67.Miao, Ru, J. Song, and Y. Zhu . " 3D geographic scenes visualization based on WebGL." 2017 6th International Conference on Agro-Geoinformatics IEEE, 2017.

[35]劉暢.基于WebGL的三維管線可視化關鍵技術研究[D].成都：西南交通大學，2018.

[36]趙孔陽，朱軍，尹靈芝基于WebGL的虛擬場景網絡漫游研究[J].黑龍江：測繪與空間地理信息， 2015， 38(12)： 40-43.

[37]張帆.基于WebGL的大規模三維場景可視化技術研究[D].國防科學技術大學,2014.

[38]向俊.基于WebKit瀏覽器WebGL的并行化圖形渲染研究[D].電子科技大學,2015.

[39]胡崧，于慧.Dreamweaver CS5從入門到精通(中文版).中國青年電子出版社，2010.11

[40]李剛.輕量級J2EE企業應用實戰[M].第4版.北京：電子工業出版社，2015.

[41]王艷清，陳紅.基于SSM框架的智能web系統研發設計[J].計算機工程與設計,2012,33(12):4751 -4757.DOI:10.16208/j.issn1000-7024.2012.12.058.

[42]孫祥,于蓮芝.基于SSM框架的小額貸款系統設計與實現[J].軟件導刊,2018,17(01):129-131.

[43]黃素萍，李延香.基于SSM框架的西安旅游網站研究[J].無線互聯科技,2018,15(17):143-144.

[44]ISO 12006-2 Building construction —Organization of information about construction Works Part2 : Framework for classification[S].2015.

[45]中華人民共和國國家質量監督檢驗檢疫總局. 信息分類和編碼的基本原則與方法: GB/T 7027-2002[S]. 北京: 中國標準出版社， 2002.

[46]王小寧，王逸凡,劉高,張秋信，馬白虎,鐘榮煉.面向BIM的橋梁工程分類編碼體系研究[J].土木建筑工程信息技術,2019,11(05):71-75.