簡易檢索 / 詳目顯示

研究生: 呂凱琳
Kai-Lin Lu
論文名稱: 利用WebGL輔助BCR梁柱接合處之外橫隔板設計
Interactive WebGL-based 3D visualizations for Facilitating BCR Connection Design with External Diaphragm
指導教授: 楊亦東
I-Tung Yang
廖國偉
Kuo-Wei Liao
口試委員: 王人牧
Jen-Mu Wang
潘誠平
Chan-Ping Pan
學位類別: 碩士
Master
系所名稱: 工程學院 - 營建工程系
Department of Civil and Construction Engineering
論文出版年: 2018
畢業學年度: 106
語文別: 中文
論文頁數: 54
中文關鍵詞: WebGLHH韌性工法Three.jsAbaqusHTML5BCR
外文關鍵詞: WebGL, Three.js, Abaqus, HTML5, BCR, HH method
相關次數: 點閱:214下載:1
分享至:
查詢本校圖書館目錄 查詢臺灣博碩士論文知識加值系統 勘誤回報
  • 國內高樓建築中經常使用箱型鋼柱,箱型柱是以四片鋼板銲接而成,箱型柱的優點為結構性能良好、桿件斷面尺寸的選擇性多;缺點為銲量大、造價比對應的H型鋼柱高。過往,和箱型斷面形狀相似的結構用之鋼管,受限於生產設備、鋼材材質及鋼卷寬度,斷面尺寸寬度較小,影響應用上的選擇。而近年來,鋼管生產設備、鋼板的規格與尺寸技術上的提升,並以機械自動化設備製作,控制品質較佳且可大量生產,因此,鋼管柱(BCR)相對鋼箱梁造價較為低廉。
    對於國內應用方面,鋼管柱(BCR)為較新之產品,但梁柱結合的形式為工程師選用時,主要考慮因素之一,已有國內針對結合的形式上的研究,例如內橫隔板與外橫隔板工法等。本研究目的在於協助工程師在利用鋼管柱(BCR)時,簡化梁柱結合的設計流程,提高鋼管柱其應用性。
    隨著3D產業及移動裝置越來越進步、發達,現今各方領域3D視覺化及資訊交換之趨勢,利用HTML5開發3D相關網頁也日益蓬勃,因此,各方領域積極使用WebGL技術發展網頁端之應用。
    本研究利用HTML5及WebGL技術開發的網頁平台,簡化外橫隔板HH韌性工法複雜的計算需求,讓使用者電腦(Windows、Mac OS X、Linux…等)或行動裝置(Android、iOS…等)之不同系統皆可跨平台使用,使用者了解BCR設計流程後,只要相關的數據資料充足,可根據本研究所開發的網頁平台,計算出外橫隔板各部位的尺寸,並依據計算出的尺寸結果顯示參數化之外橫隔板HH韌性工法的3D模型及輸出模型檔案供後續分析。


    High-rise buildings in Taiwan often use steel box in columns. The box columns are welded with four plates. In stead of I-shape columns, the advantages of using box columns is it possesses a better structural performance.Howevver, the disadvantages is during the construction, large welding is needed. In the past, Box Column Roll (BCR, or hollow structural section) used in structures is not frequently used in Taiwan due to the limitation in production equipment. In recent years, many factors reduce the cost of using BCR, such as steel pipe production equipment, steel plate size and production of mechanical automation equipment, better quality control and mass production.Therefore, it is expected that BCR will gain more attention in the future.
    In Taiwan, BCR is a relative new product. The design of the beam-column connection is one of the main considerations in construction. Several choices are possible. For example, internal or external diaphragms are two typical designs. The purpose of this study is to assist engineers to simplify the design process of beam-column connection when BCR is used, and to improve BCR’s applicability.
    Taking advantage of the advanced 3D visualization and mobile devices, and the 3D related web pages development. The WebGL is adopted to develop web pages application.The webpage platform developed by HTML5 and WebGL technology is used to simplify the complicated computing requirements of the HH method, one of the external diaphragm designs. The developed platform can be used in different systems, such as the user's computer (Windows, Mac OS X, Linux ...) or the mobile device (Android, iOS ...). If the relevant/input data is provided, the size of each part of the external diaphragm can be calculated according to the web platform developed by this study. Based on the calculated size, a 3D model of the HH method is displayed. In addition, this 3D model is readily meshable for a commercial finite element analysis software such as ABAQUS.

    誌謝 I 摘要 II ABSTRACT III 目錄 IV 圖目錄 VI 表目錄 VIII 第一章 緒論 1 1.1 研究背景 1 1.2 研究動機與目的 2 1.3 研究方法 3 1.4 論文架構 3 第二章 文獻回顧 5 2.1 HTML5網頁技術 5 2.2 WebGL原理 7 2.2.1 Three.js庫 11 2.3 STL檔案格式 12 2.4 Javascript 13 2.4.1 jQuery 14 2.5 外橫隔板HH韌性工法 15 2.5.1 概念與背景 15 2.5.2 設計公式及流程 17 第三章 網頁平台 21 3.1 網頁平台外橫隔板HH韌性工法公式計算 23 3.2 WebGL技術應用 24 3.2.1 場景(Scene) 25 3.2.2 相機(Camera) 28 3.2.3 渲染器(Render) 29 3.2.4 Three.js框架下之開源庫 30 3.3 網頁平台成果 32 第四章 分析前處理與分析結果 35 4.1 模型輸出之處理 35 4.2 數值分析及3D模型軟體介紹 44 4.2.1 Fusion360簡介 44 4.2.2 Solidworks簡介 44 4.2.3 ABAQUS簡介 45 4.3 有限元素分析尺寸選擇及分析 45 4.3.1 分析尺寸 45 4.3.2 分析流程 46 4.3.3 ABAQUS分析結果 48 第五章 結論與建議 51 5.1 結論 51 5.2 建議 52 參考文獻 54

    [1] HTML5.[Online]. Available:https://zh.wikipedia.org/zh-tw/HTML5
    [2] WebGL.[Online]. Available:https://zh.wikipedia.org/zh-tw/WebGL
    [3] WebGL MDN web docs.[Online]. Available:https://developer.mozilla.org/zh-TW/docs/Web/API/WebGL_API
    [4] STL.[Online]. Available: https://zh.wikipedia.org/zh-tw/STL_(檔案格式)
    [5] JavaScript wiki.[Online]. Available:https://zh.wikipedia.org/zh-tw/JavaScript
    [6] jQuery wiki.[Online]. Available:https://zh.wikipedia.org/zh-tw/JQuery
    [7] jQuery.[Online]. Available:https://jquery.com/
    [8] Autodesk A360.[Online]. Available:https://a360.autodesk.com/
    [9] BimSurfer.[Online]. Available:http://bimsurfer.org/
    [10] three.js - Javascript 3D library.[Online]. Available:https://threejs.org/.
    [11] three.js.[Online]. Available:https://jim159093.gitbooks.io/threejs-/content/renderer.html
    [12] 郭隆邦,<three.js幾何體對象_三維建模_郭隆邦技術博客>,網址:http://www.yanhuangxueyuan.com/Three.js_course/geometry.html
    [13] csg.js,https://github.com/evanw/csg.js
    [14] 陳正誠、蔡宛昀,《鋼管柱與鋼梁接合之工法》,十八第四鋼結構網絡出版總庫工程,48期,中華民國鋼結構協會, 2013年6月。
    [15] 蔡宛昀,《含矩形鋼管柱構架系統之研發》,碩士論文,國立台灣科技大學營建工程系,2012。
    [16] 林書豪,《大尺寸BCR鋼管柱之撓曲韌性》,碩士論文,國立台灣科技大學營建工程系,2014。
    [17] 陳宥廷,《混凝土填充鋼管柱貫穿式接頭梁柱接頭區承受反覆載重下之行為》,碩士論文,國立台灣科技大學營建工程系,2017。
    [18] 楊士練,《基於WebGL技術木構建築可視化》,碩士論文,國立臺北科技大學資訊工程系研究所,2014. 。
    [19] 白昱祥,《基於網頁瀏覽器與WebGL技術之三維醫學影像顯示平台》,碩士論文, 長庚大學資訊工程學系,2015. 。
    [20] 林宗禧,《Cloud BIM: 應用雲端運算與WebGL技術之網路式BIM系統》,碩士論文,國立台灣科技大學營建工程系,2011 。
    [21] 于志葳,《HTML 5 Canvas 圖形物件化使用插件設計》,碩士論文,國立臺北商業技術學院資訊與決策科學研究所,2014. 。
    [22] 張雯莉,《Three.js入門指南, 》,中國。
    [23] J., Dirksen, “Learning Three. Js: the JavaScript 3D Library for Webgl,” 2013

    QR CODE