xBIM combat 01 Load the IFC model file in the browser

xBIM combat 01 Load the IFC model file in the browser

1. create a web project

  Open VS, create a new Web project, select .NET Framework 4.5

Select an empty project

After the new construction is completed, the project structure is as follows:

2. add webServer to access file types

  Since WexXplorer loads files or file streams in .wexBIM format, you need to add the following configuration in the Web.config file

        <requestLimits maxAllowedContentLength="100000000"/><!--100MB-->
      <mimeMap fileExtension=".wexbim" mimeType="application/octet-stream"/>

If you publish the application to IIS, add the MIME type in IIS,

The extension is .wexbim and the type is application/octet-stream

3. add js files and test model files

  Download the XbimWebUI project from the official address provided by xBIM, the project structure is as follows

Add the following directories to the project

4. add a test page

Add a static page 001.html, open the file, and add the following references

 <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 depends on two files, gl-matrix.js and webgl-utils.js. Add references to other files as required by their functions.

Add in the <body></body> of the page

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

Canvas is a new tag element in HTML5, which uses JavaScript to draw images on web pages.

The xViewer object is encapsulated in xbim-viewer.js for rendering and rendering model files.

The complete code is as follows:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <title>xViewer</title>
 5 <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
 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>
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>
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>
26 html, body {
27 height: 100%;
28 padding: 0;
29 margin: 0;
32 canvas {
33 display: block;
34 border: none;
35 margin-left: auto;
36 margin-right: auto;
38 </style>
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];//Set the background color of the model browser
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;
56 });//Real-time monitoring of abnormal events
58 viewer.load("Content/tests/data/rac_advanced_sample_project.wexbim");//Load model file
59 viewer.start();//Use this function to start the animation of the model. If you start the animation before loading the geometry, it will wait for the content to render. This function is bound to the browser frame rate of the screen, so if you switch to another tab, it will stop consuming any resources.
61 var cube = new xNavigationCube(); 
62 viewer.addPlugin(cube);//Add cube navigation
64 var home = new xNavigationHome();
65 viewer.addPlugin(home);//Add home page navigation
67} else {
68 alrt("Your browser version is too low to support WebGL technology. Please upgrade your browser.");
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>";
76 </script>
77 </body>
78 </html>

Load the IFC model file in the browser and use advanced WebGL technology, so it cannot run in old browsers. Chrome or Mozzilla, IE11 and above and other applications that support this technology can all display 3D well. Model effect.

var check = xViewer.check(); Used to check whether the browser supports WebGL technology, and the check result returns a collection of error messages check.noErrors. If there is an error, it loops through the error message and prompts the user.

viewer.load(); Used to load the target model file, it must be the url of the wexbim file or the binary stream representing the wexbim file.

viewer.start(); Use this function to start the animation of the model. If you start the animation before loading the geometry, it will wait for the content to render. This function is bound to the browser frame rate of the screen, so if you switch to another tab, it will stop consuming any resources.

If you export the IFC file from Revit or other tools, use the following method to convert to a .wexbim file

 const string fileName = @"rac_advanced_sample_project.ifc";
 using (var model = IfcStore.Open(fileName, null, -1))
    var context = new Xbim3DModelContext(model);

    var wexBimFilename = Path.ChangeExtension(fileName, "wexbim");
    using (var wexBimFile = File.Create(wexBimFilename))
       using (var wexBimBinaryWriter = new BinaryWriter(wexBimFile))

5. view in the browser

Right-click the file in VS and select "View in Browser"

Reference: https://cloud.tencent.com/developer/article/1507745 xBIM Actual Combat 01 Load the IFC model file in the browser-Cloud + Community-Tencent Cloud