xBIM 实战01 在浏览器中加载IFC模型文件
生活随笔
收集整理的這篇文章主要介紹了
xBIM 实战01 在浏览器中加载IFC模型文件
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
系列目錄????【已更新最新開(kāi)發(fā)文章，點(diǎn)擊查看詳細(xì)】? 一、創(chuàng)建Web項(xiàng)目 打開(kāi)VS，新建Web項(xiàng)目，選擇 .NET Framework 4.5 ?選擇一個(gè)空的項(xiàng)目
新建完成后，項(xiàng)目結(jié)構(gòu)如下：
二、添加webServer訪(fǎng)問(wèn)文件類(lèi)型 由于WexXplorer 加載的是 .wexBIM格式的文件或者文件流，所以需要在Web.config文件中添加如下配置<system.webServer><security><requestFiltering><requestLimits maxAllowedContentLength="100000000" /><!--100MB--></requestFiltering></security><staticContent><mimeMap fileExtension=".wexbim" mimeType="application/octet-stream" /></staticContent> </system.webServer>
如果將應(yīng)用程序發(fā)布到IIS，則在IIS中添加MIME類(lèi)型，
擴(kuò)展名為?.wexbim，類(lèi)型為?application/octet-stream
?
?
?
三、添加js文件與測(cè)試模型文件 從xBIM官方提供的地址中下載 XbimWebUI 項(xiàng)目，項(xiàng)目結(jié)構(gòu)如下將下列目錄添加到項(xiàng)目中
四、添加測(cè)試頁(yè)面添加一個(gè)靜態(tài)頁(yè)面 001.html，打開(kāi)文件，添加以下引用
<script src="Content/Libs/gl-matrix.js"></script><script src="Content/Libs/webgl-utils.js"></script><script type="text/javascript" src="Content/Viewer/xbim-product-type.debug.js"></script><script type="text/javascript" src="Content/Viewer/xbim-state.debug.js"></script><script type="text/javascript" src="Content/Viewer/xbim-shaders.debug.js"></script><script type="text/javascript" src="Content/Viewer/xbim-model-geometry.debug.js"></script><script type="text/javascript" src="Content/Viewer/xbim-model-handle.debug.js"></script><script type="text/javascript" src="Content/Viewer/xbim-binary-reader.debug.js"></script><script type="text/javascript" src="Content/Viewer/xbim-triangulated-shape.debug.js"></script><script type="text/javascript" src="Content/Viewer/xbim-viewer.debug.js"></script><script src="Content/Plugins/NavigationCube/xbim-navigation-cube-shaders.debug.js"></script><script src="Content/Plugins/NavigationCube/xbim-navigation-cube.debug.js"></script><script src="Content/Plugins/NavigationCube/xbim-navigation-cube-textures.debug.js"></script><script src="Content/Plugins/NavigationHome/xbim-navigation-home-textures.debug.js"></script><script src="Content/Plugins/NavigationHome/xbim-navigation-home.debug.js"></script>
xbim-viewer.debug.js?依賴(lài)?gl-matrix.js?與?webgl-utils.js?2個(gè)文件。其他文件根據(jù)功能需要再添加引用即可。
在頁(yè)面的<body></body>中添加
<canvas id="xBIM-viewer" width="600" height="500"></canvas>
canvas?是HTML5中的新標(biāo)簽元素，使用 JavaScript 在網(wǎng)頁(yè)上繪制圖像。
xbim-viewer.js中封裝了 xViewer?對(duì)象用于繪制呈現(xiàn)模型文件。
完整的代碼如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>xViewer</title> 5 <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> 6 7 <script src="Content/Libs/gl-matrix.js"></script> 8 <script src="Content/Libs/webgl-utils.js"></script> 9 <script type="text/javascript" src="Content/Viewer/xbim-product-type.debug.js"></script> 10 <script type="text/javascript" src="Content/Viewer/xbim-state.debug.js"></script> 11 <script type="text/javascript" src="Content/Viewer/xbim-shaders.debug.js"></script> 12 <script type="text/javascript" src="Content/Viewer/xbim-model-geometry.debug.js"></script> 13 <script type="text/javascript" src="Content/Viewer/xbim-model-handle.debug.js"></script> 14 <script type="text/javascript" src="Content/Viewer/xbim-binary-reader.debug.js"></script> 15 <script type="text/javascript" src="Content/Viewer/xbim-triangulated-shape.debug.js"></script> 16 <script type="text/javascript" src="Content/Viewer/xbim-viewer.debug.js"></script> 17 18 <script src="Content/Plugins/NavigationCube/xbim-navigation-cube-shaders.debug.js"></script> 19 <script src="Content/Plugins/NavigationCube/xbim-navigation-cube.debug.js"></script> 20 <script src="Content/Plugins/NavigationCube/xbim-navigation-cube-textures.debug.js"></script> 21 22 <script src="Content/Plugins/NavigationHome/xbim-navigation-home-textures.debug.js"></script> 23 <script src="Content/Plugins/NavigationHome/xbim-navigation-home.debug.js"></script> 24 <style> 25 26 html, body { 27 height: 100%; 28 padding: 0; 29 margin: 0; 30 } 31 32 canvas { 33 display: block; 34 border: none; 35 margin-left: auto; 36 margin-right: auto; 37 } 38 </style> 39 40 </head> 41 <body> 42 <div id="msg"></div> 43 <canvas id="xBIM-viewer" width="600" height="500"></canvas> 44 <script type="text/javascript"> 45 var check = xViewer.check(); 46 if (check.noErrors) { 47 var viewer = new xViewer("xBIM-viewer"); 48 viewer.background = [0, 0, 0];//設(shè)置模型瀏覽器的背景色 49 50 viewer.on("error", 51 function (arg) { 52 var container = viewer._canvas.parentNode; 53 if (container) { 54 container.innerHTML = "<pre style='color:red;'>" + arg.message + "</pre>" + container.innerHTML; 55 } 56 });//實(shí)時(shí)監(jiān)控異常發(fā)生事件 57 58 viewer.load("Content/tests/data/rac_advanced_sample_project.wexbim"); //加載模型文件 59 viewer.start(); //使用此函數(shù)可以啟動(dòng)模型的動(dòng)畫(huà)。如果在加載幾何圖形之前啟動(dòng)動(dòng)畫(huà)，它將等待內(nèi)容呈現(xiàn)。此函數(shù)綁定到屏幕的瀏覽器幀速率，因此如果切換到其他選項(xiàng)卡，它將停止消耗任何資源。 60 61 var cube = new xNavigationCube(); 62 viewer.addPlugin(cube);// 添加立方體導(dǎo)航 63 64 var home = new xNavigationHome(); 65 viewer.addPlugin(home);// 添加首頁(yè)導(dǎo)航 66 67 } else { 68 alert("您瀏覽器版本過(guò)低，不支持WebGL技術(shù)。請(qǐng)升級(jí)瀏覽器。"); 69 70 var msg = document.getElementById("msg"); 71 for (var i in check.errors) { 72 var error = check.errors[i]; 73 msg.innerHTML += "<div style='color: red;'>" + error + "</div>"; 74 } 75 } 76 </script> 77 </body> 78 </html>
在瀏覽器中加載 IFC模型文件，使用了先進(jìn)的WebGL技術(shù)，所以它無(wú)法在舊瀏覽器中運(yùn)行，Chrome或Mozzilla，IE11及以上版本和其他支持該技術(shù)的應(yīng)用程序都可以很好地展示出3D模型效果。
var?check = xViewer.check();?用于檢查瀏覽器是否支持WebGL技術(shù)，檢查結(jié)果返回一個(gè)錯(cuò)誤信息集合check.noErrors。如果有錯(cuò)誤，則循環(huán)遍歷該錯(cuò)誤信息并提示給用戶(hù)。
viewer.load(); 用于加載目標(biāo)模型文件，必須是wexbim文件的url或表示wexbim文件的二進(jìn)制流。
viewer.start(); 使用此函數(shù)可以啟動(dòng)模型的動(dòng)畫(huà)。如果在加載幾何圖形之前啟動(dòng)動(dòng)畫(huà)，它將等待內(nèi)容呈現(xiàn)。此函數(shù)綁定到屏幕的瀏覽器幀速率，因此如果切換到其他選項(xiàng)卡，它將停止消耗任何資源。
如果從Revit或者其他工具中導(dǎo)出IFC文件，則使用下面的方法轉(zhuǎn)換為.wexbim格斯的文件
const string fileName = @"rac_advanced_sample_project.ifc";using (var model = IfcStore.Open(fileName, null, -1)){var context = new Xbim3DModelContext(model);context.CreateContext();var wexBimFilename = Path.ChangeExtension(fileName, "wexbim");using (var wexBimFile = File.Create(wexBimFilename)){using (var wexBimBinaryWriter = new BinaryWriter(wexBimFile)){model.SaveAsWexBim(wexBimBinaryWriter);wexBimBinaryWriter.Close();}wexBimFile.Close();}}
五、在瀏覽器中查看
在VS中右鍵點(diǎn)擊該文件，選擇“在瀏覽器中查看”
效果如下
系列目錄????【已更新最新開(kāi)發(fā)文章，點(diǎn)擊查看詳細(xì)】?
轉(zhuǎn)載于:https://www.cnblogs.com/SavionZhang/p/10984048.html
總結(jié)
以上是生活随笔為你收集整理的xBIM 实战01 在浏览器中加载IFC模型文件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 2升大瓶美年达多少钱一瓶
- 下一篇： LeetCode 1021:Remove