Creating Files for Offline BIM

See also:

• Viewing BIM Models Offline - loading BIM models from the file system

Introduction

In this tutorial you'll learn how to convert an IFC2x3 file to geometry and metadata files that can be efficiently loaded into xeokit.

[Run this example]

Contents

• Creating an XKT Model
  • 1. Download an IFC File
  • 2. Install CLI Tools
  • 3. Convert IFC to COLLADA
  • 4. Convert COLLADA to glTF
  • 5. Convert glTF to XKT
• Creating JSON IFC Metadata
  • 1. Install CLI Tool
  • 2. Convert IFC to JSON Metadata
• Viewing the Model

Creating an XKT Model

1. Download an IFC File

We'll use an IFC2x3 model from the OTC Conference Center dataset.

Note that, for this tutorial, we've renamed our IFC file to OTCConferenceCenter.ifc, just to strip out the spaces in the filename and make it more readable.

2. Install CLI Tools

We'll use these CLI tools to transform the IFC file into an .XKT file:

• ifcConvert to convert IFC files to DAE
• COLLADA2GLTF to convert DAE to glTF
• xokit-gktf-to-xkt to convert glTF into XKT

We'll assume that these are installed relative to the current working directory.

3. Convert IFC to COLLADA

Convert the IFC file into a COLLADA file:

./IfcConvert --use-element-guids OTCConferenceCenter.ifc OTCConferenceCenter.dae

Note the ise-element-guids option, which ensures that the IFC product IDs are preserved in the glTF.

4. Convert COLLADA to glTF

Then convert the COLLADA into a glTF 2.0 file:

./COLLADA2GLTF/build/COLLADA2GLTF-bin -i OTCConferenceCenter.dae -o OTCConferenceCenter.gltf

The glTF file will be a single text file with its geometry data embedded within it.

5. Convert glTF to XKT

Now convert the glTF into an XKT file:

npm run convert OTCConferenceCenter.dae OTCConferenceCenter.xkt

Now we have the model geometry in a compact format that can be loaded efficiently into xeokit. Next, we'll create the JSON metadata file that we'll be loading alongside the XKT file.

Creating JSON IFC Metadata

1. Install CLI Tool

Download and install xeokit-metadata, which we'll use to extract the structural hierarchy of the building elements within an IFC file into xeokit's metadata format.

2. Convert IFC to JSON Metadata

xeokit-metadata OTCConferenceCenter.ifc OTCConferenceCenter.json

Viewing the Model

Now we have an XKT file that describes the model geometry, along with a JSON file that specifies metadata for it.

We can now go ahead and use XKTLoaderPlugin to load our model from those two files:

import {Viewer} from "./../src/viewer/Viewer.js";
import {GLTFLoaderPlugin} from "./../src/viewer/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js";

// Create a Viewer
const viewer = new Viewer({
    canvasId: "myCanvas"
});

// Add a XKTLoaderPlugin
const xktLoader = new XKTLoaderPlugin(viewer);

// Load XKT and metadata
const model = xktLoader.load({
    id: "myModel",
    src: "OTCConferenceCenter.xkt",
    metaModelSrc: "OTCConferenceCenter.json",
});

// Fit camera to model when loaded
model.on("loaded", function() {
    viewer.cameraFlight.jumpTo(model);
});