BIMer tools are intended to allow you to build an application that converts and displays 3D models on a web browser.
Use BIMer.IFC to convert the 3D model represented in the IFC file to a BIMer.Viewer readable format. Use BIMer.storage connectors to output JSON files structure to your application storage. Use BIMer.viewer to display the model derivative from the JSON files structure served over HTTP protocol from your application storage.
Following is the overview of the steps that need to be completed to integrate BIMer into a web application.
BIMer.IFC is a standalone Java application that translates the IFC file to JSON format. Once the file is translated, the output JSON files structure is saved using BIMer.Storage which is a set of connectors that allows you to use any kind of storage to store and retrieve your application data.
During the file conversion geometries, object properties and relations are extracted, so that the design data can be used in your app.
BIMer.Viewer is a JavaScript library responsible for rendering JSON files prepared by BIMer.IFC on a web browser.
The BIMer.Viewer libraries are delivered with a default UI allowing users to control and manipulate the displayed model. Developers can modify the viewer’s appearance and some of the behaviour.
The BIMer.IFC is a standalone Java application for translation of the IFC file format to a JSON files structure for rendering in the BIMer.viewer. During the model conversion BIMer.IFC extracts valuable metadata that can be integrated into your app, like object hierarchy trees and object properties.
As a standalone Java application BIMer.IFC needs to be installed on your server to perform the conversion of the input IFC file to the JSON files structure that can be consumed and properly displayed by the JavaScript library BIMer.viewer.
BIMer.IFC requires Java 8 and internet connection to work. At the initial launch BIMer.IFC will ask for permission to download and install a required module, it is a library with data models prepared by Dynamic Solutions - i.e. pl.ds bimer-ifc-data-model 1.0.0 All downloaded dependencies will be located in the same location as the JAR file and will be used for the next launches of the BIMer.IFC.
To perform the installation of BIMer.IFC without a prompt for permission use the following optional JAVA parameter:
Use the following parameterized command to run the application:
where fileName stands for the name of the delivered jar file, which unless changed, will be bimer-ifc-launcher-version, where version stands for the current tool version.
Parameter:
| Name | Description |
|---|---|
| URI | An absolute URI of the IFC file; supported schemes are file, http and https |
| Output folder name | The name of the folder is the same as the name of the input IFC file without the file format extension |
| Output folder location | The location of the folder depends on the location of the input IFC file: local disk - output is stored in the same location as the input file; other - output is stored in the same location as the BIMer. IFC Jar file |
The BIMer.viewer is a WebGL-based, client-side JavaScript library for 3D model rendering. It allows you to view design models on the web prepared for rendering by the BIMer.IFC converter library. BIMer.Viewer contains two modules: BIMer.Viewer.lib and BIMer.Viewer.ui. BIMer.Viewer.lib is a library responsible for rendering models and managing all actions placed in the BIMer.viewer. BIMer.Viewer.ui is the implementation of a user interface built based on the MDL framework.
Before you can display a model within the BIMer.Viewer, you must convert the IFC file to the JSON format. You’ll need the BIMer.IFC to make this work. The output JSON files structure needs to be made available for the viewer using http protocol.
The following HTML snippet includes the Material Lite CSS and JavaScript files for the scene generated by the BIMer.Viewer and the appearance of the default buttons.
Include the Material Lite CSS and JavaScript files in each HTML page in your project where you need the BIMer.Viewer to be displayed. It is recommended that you use the files hosted on the MDL’s CDN. You can also customize and download them to host them yourself, build them from the Material Design Lite source code or install them in your npm/Bower project.
The following HTML snippet sets up the scene for the BIMer.Viewer. Add this <div> within the <body> section of your website, it will be the container for the viewer.
The following HTML snippet specifies the location of the scripts that make the BIMer.Viewer (i.e. BimerIfcViewer-lib and BimerIFCViewer-ui) and the MDL library needed for the BimerIFCViewer-ui.
Within the <script> tag specify the location of the Viewer’s JavaScript code with the version of the library that needs to be downloaded. The <script> tags need to be added at the end of the body section (or as close to the end as it’s possible considering the current source code structure) to allow the website to render all the static content prior to downloading the scripts. Where path stands for the location of the BimerIfcViewer-lib and BimerIfcViewer-us files and hash stands for the current version of the libraries.
The initialization of the viewer needs to be performed only once. To properly initialize the viewer you need to complete the steps mentioned in the previous section. The resulting HTML will be as follows:
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.light_blue-blue.min.css"/>
...
</head>
<body>
...
<div class=”bimerifc-scene-container”></div>
...
<script src="path/BimerIfcViewer-lib-hash.bundle.js"></script>
<script src="path/BimerIfcViewer-ui-hash.bundle.js"></script>
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</body>
The <div> container with the class bimerifc-scene-container will initialize the viewer instance together with a custom initializing script (snippet below). You can add the script below or write your own. Put it at the end of the <body>.
To load the model use the launch method of the viewerLauncher class. Loading the model can be repeated many times with only one initialization of the viewer.
The BIMer.Viewer has a default toolbar, which is located at the top center of the page. A tool for orienting the camera view on the model, the ViewCube, is located at the right bottom corner of the page - this one cannot be modified using the Advanced Options, it is an integral element of the scene. Developers can customize the BIMer.Viewer’s appearance (toolbar and controls) and some of the behavior (responding to events). The below API Reference provides information on how to implement a custom UI and controls. The detailed steps described in the Essentials section do not apply, you need to follow them as guidance and adjust them to the custom implementation.
A base class for BIMer.Viewer, responsible for 3D model rendering and scene manipulations.
new SceneContainer(container, language)
Parameters:
| Name | Type | Description | |
|---|---|---|---|
| container | required | HTMLElement | The BIMer.Viewer container |
| language | string | I18n language code, to define reference for the viewer localisation |
loadModel(modelUrl, actionsSetupCallback, loadingProgressCallback, missingWebGlCallback)
| Name | Return Type | Parameters | Description |
|---|---|---|---|
| loadModel | void | modelURL, actionsSetupCallback, loadingProgressCallback, missingWebGLCallback | Loads the 3D model from the provided location (URL). During the loading process when needed the method is calling provided callbacks |
Method parameters definition:
| Name | Type | Description |
|---|---|---|
| modelURL | string | URL to the JSON file structure where the model derivative is stored. This should be the unmodified output of the BIMer.IFC application |
| actionsSetupCallback | function | Function that gets called when the actions toolbar can be built and placed in the scene container. Function is called using two parameters: actions - BimerIfcViewer.lib. Actions. It is the object responsible for handling all actions available in BIMer.Viewer |
| loadingProgressCallback | function | Function that gets called to update the loading progress information. Function is called using two parameters: event – ProgressEvent. It is a built-in JavaScript object with loading progress data. |
| missingWebGLCallback | function | Function that gets called when the client’s browser does not support webGL. Function should inform the client that it is impossible to load a 3D model using this browser |
An object responsible for triggering all built-in scene and model manipulations. It also provides access to model information like available model element types or properties.
new Actions(context)
Parameters:
| Name | Type | Description | |
|---|---|---|---|
| context | required | object | The BIMer.Viewer context object |
freeOrbit()
| Name | Return Type | Description |
|---|---|---|
| freeOrbit | void | Switches active scene control to free orbit |
pan()
| Name | Return Type | Description |
|---|---|---|
| pan | void | Switches active scene control to pan |
zoom()
| Name | Return Type | Description |
|---|---|---|
| zoom | void | Switches active scene control to zoom |
reset()
| Name | Return Type | Description |
|---|---|---|
| reset | void | Resets the entire scene to the original setting |
toggleFullscreen()
| Name | Return Type | Description |
|---|---|---|
| toggleFullscreen | void | Toggles fullscreen |
getAvailableFilterTypes()
| Name | Return Type | Description |
|---|---|---|
| getAvailableFilterTypes | String array | Provides an array of available element types required for filtering by type |
explode(value)
| Name | Return Type | Parameters | Description |
|---|---|---|---|
| explode | void | value | Explodes elements of the model |
Method parameters definition:
| Name | Type | Description |
|---|---|---|
| value | number | Number used to calculate explode scale using formula: 1 + value / 50 |
clip(value)
| Name | Return Type | Parameters | Description |
|---|---|---|---|
| clip | void | value | Clips elements of the model |
Method parameters definition:
| Name | Type | Description |
|---|---|---|
| value | number | Number used to calculate clipping vector using formula: zHeight * inputValue / 100 where zHeight is the highest point of model |
applyFilter(type, enable)
| Name | Return Type | Parameters | Description |
|---|---|---|---|
| applyFilter | void | type, enable | Applies filter on model elements by type of the element |
Method parameters definition:
| Name | Type | Description |
|---|---|---|
| type | string | Name of the element type for filtering |
| enable | boolean | true - elements with provided type will be filtered out, i.e. they will be hidden on the model view false - elements with provided type will remain visible on the model view |
loadElementProperties(uuid, callback)
| Name | Return Type | Parameters | Description |
|---|---|---|---|
| loadElementProperties | void | uuid, callback | Provides element’s IFC properties as callback function data parameter |
Method parameters definition:
| Name | Type | Description |
|---|---|---|
| uuid | string | Name of the element type for filtering |
| callback | function | The name of the function that will be called on triggering of an event with provided eventID |
addEventListener(eventID, callback)
| Name | Return Type | Parameters | Description |
|---|---|---|---|
| addEventListener | void | eventID, callback | Registers an event handler |
Method parameters definition:
| Name | Type | Description |
|---|---|---|
| eventID | string | Supported event ids: model-element-selected – triggered on selection of the element of the model. model-element-unselected – triggered on unselection on the element of the model. Triggering of one of the supported events calls a callback function (registered) with a parameter - an event object containing uuid property – the model’s element’s UUID. |
| callback | function | The name of the function that will be called on triggering of an event with provided eventID |
An object responsible for triggering all built-in scene and model manipulations. It also provides access to model information like available model element types or properties.
new ViewerLauncher(container)
Parameters:
| Name | Type | Description | |
|---|---|---|---|
| context | required | HTMLElement | The BIMer.Viewer container |
launch(modelUrl, modelName)
| Name | Return Type | Parameters | Description |
|---|---|---|---|
| launch | void | modelURL, modelName | Initializes loading of the 3D model from the provided location (URL) |
Method parameters definition:
| Name | Type | Description |
|---|---|---|
| modelURL | string | URL to the JSON file structure where the model derivative is stored. This should be the unmodified output of the BIMer.IFC application |
| modelName | string | The name of the model that will be displayed above the launch button |