xBIM 實戰01 在瀏覽器中加載IFC模型文件

時間 2019-12-09

標籤 xbim 實戰瀏覽器加載 ifc 模型文件欄目瀏覽器简体版

原文原文鏈接

系列目錄【已更新最新開發文章，點擊查看詳細】

1、建立Web項目

　　打開VS，新建Web項目，選擇 .NET Framework 4.5

選擇一個空的項目

新建完成後，項目結構以下：javascript

2、添加webServer訪問文件類型

　　因爲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>

若是將應用程序發佈到IIS，則在IIS中添加MIME類型，html

擴展名爲 .wexbim，類型爲 application/octet-streamjava

3、添加js文件與測試模型文件

　　從xBIM官方提供的地址中下載 XbimWebUI 項目，項目結構以下

將下列目錄添加到項目中web

4、添加測試頁面

添加一個靜態頁面 001.html，打開文件，添加如下引用canvas

 <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 依賴 gl-matrix.js 與 webgl-utils.js 2個文件。其餘文件根據功能須要再添加引用便可。瀏覽器

在頁面的<body></body>中添加app

<canvas id="xBIM-viewer" width="600" height="500"></canvas>

canvas 是HTML5中的新標籤元素，使用 JavaScript 在網頁上繪製圖像。函數

xbim-viewer.js中封裝了 xViewer 對象用於繪製呈現模型文件。工具

完整的代碼以下：測試

 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];//設置模型瀏覽器的背景色
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                 });//實時監控異常發生事件
57 
58             viewer.load("Content/tests/data/rac_advanced_sample_project.wexbim"); //加載模型文件
59             viewer.start(); //使用此函數能夠啓動模型的動畫。若是在加載幾何圖形以前啓動動畫，它將等待內容呈現。此函數綁定到屏幕的瀏覽器幀速率，所以若是切換到其餘選項卡，它將中止消耗任何資源。
60 
61             var cube = new xNavigationCube(); 
62             viewer.addPlugin(cube);// 添加立方體導航
63 
64             var home = new xNavigationHome();
65             viewer.addPlugin(home);// 添加首頁導航
66 
67         } else {
68             alert("您瀏覽器版本太低，不支持WebGL技術。請升級瀏覽器。");
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模型文件，使用了先進的WebGL技術，因此它沒法在舊瀏覽器中運行，Chrome或Mozzilla，IE11及以上版本和其餘支持該技術的應用程序均可以很好地展現出3D模型效果。

var check = xViewer.check(); 用於檢查瀏覽器是否支持WebGL技術，檢查結果返回一個錯誤信息集合check.noErrors。若是有錯誤，則循環遍歷該錯誤信息並提示給用戶。

viewer.load(); 用於加載目標模型文件，必須是wexbim文件的url或表示wexbim文件的二進制流。

viewer.start(); 使用此函數能夠啓動模型的動畫。若是在加載幾何圖形以前啓動動畫，它將等待內容呈現。此函數綁定到屏幕的瀏覽器幀速率，所以若是切換到其餘選項卡，它將中止消耗任何資源。

若是從Revit或者其餘工具中導出IFC文件，則使用下面的方法轉換爲.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();
    }
  }