Skip to content

Viewing BIM Models Offline

Jump to bottom
xeolabs edited this page Mar 2, 2020 · 56 revisions

See also:

Introduction

The xeokit SDK can load models from a variety of formats, but its most efficient format is its native, binary .XKT format, into which you can convert our IFC2x3 and IFC4 files using open source command line tools.

To view your model, you can then use xeokit-bim-viewer, which is the fastest way to get your model on the Web. To use that option, you just need to fork that repository, drop in your model, add some JSON to register it, and you're good to go.

This tutorial, however, is geared to developers wishing to build their own custom viewers on xeokit, so in this tutorial we'll show how to use xeokit's XKTLoaderPlugin to show your model.

Contents

Example

Click the image below for a live demo.

Converting the Model

First step is to convert your IFC STEP file into geometry and metadata files that xeokit can load efficiently:

  • an .XKT file containing geometry, and
  • a JSON file containing IFC structural metadata.

All the conversion steps are explained in Creating Files for Offline BIM.

Loading a Model

Now that we have geometry and metadata files, let's load them into xeokit.

We'll create a Viewer, to which we'll add a XKTLoaderPlugin, with which we'll load our model:

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

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

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

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

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

Accessing Objects

After loading, the XKTLoaderPlugin has created Entities to represent our model and its objects, which we can find by ID.

Through the Entity's, we can control the objects, updating their visibilities, enabling effects, querying boundaries, and so on.

We can find our model and object Entities like this:

const theModel = viewer.scene.models["myModel"];
const anObject = viewer.scene.objects["3NI6Sp$yf87eKCx0T$FWj3"];

Let's update the state of our model and one of its objects:

// Controlling model visibility
theModel.visibility = false;
theModel.visibility = true;

// Controlling object visibility
myObject.visibility = false;
myObject.visibility = true;

// Highlight an object
myObject.highlighted = true;

// Get an object's axis-aligned World-space boundary
const boundary = myObject.aabb;

// Fly camera to an object
viewer.cameraFlight.flyTo(myObject);

Getting Metadata

The plugin has also created a MetaModel that provides IFC metadata for our model, along with with a MetaObject for each object.

We can get IFC metadata for the model and its objects like this:

// Get matadata on our model
const metaModel = viewer.metaScene.metaModels["myModel"];

// Get metadata on an object
const metaObject = viewer.metaScene.metaObjects["3NI6Sp$yf87eKCx0T$FWj3"];

const name = metaObject.name; // "stelkozijn",
const type = metaObject.type; // "IfcWindow",
const parent = metaObject.parent; // "2SWZMQPyD9pfT9q87pgXa1"

Setting Initial States for IFC Types

When loading metadata, XKTLoaderPlugin will also by default apply certain initial states to objects whose types match known standard IFC types. For example, setting IfcSpace types invisible and unpickable, setting IfcWindow types blue and transparent, etc.

XKTLoaderPlugin has a default map of these states, but we can override that as needed to apply our own states. In the example below, our map is the same as the default, except that we'll set IfcWall types purple.

Click the image below for a live demo.

// Define our own custom initial states for objects

 const myObjectDefaults = {
    IfcWall: {
        colorize: [ 0.537255, 0.537255, 0.837255],
        priority: 0
    },
    IfcRoof: {
        colorize: [0.837255, 0.203922, 0.270588],
        priority: 0
    },
    IfcSlab: {
        colorize: [0.837255, 0.603922, 0.670588],
        priority: 0
    },
    IfcDoor: {
        colorize: [0.637255, 0.603922, 0.670588],
        priority: 1
    },
    IfcStair: {
        colorize: [0.637255, 0.603922, 0.670588],
        priority: 2
    },
    IfcColumn: {
        colorize: [0.137255, 0.403922, 0.870588],
        priority: 3
    },
    IfcSpace: {
        colorize: [0.137255, 0.403922, 0.870588],
        pickable: false,
        visible: false,
        opacity: 0.5,
        priority: 3
    },
    
    //...

    DEFAULT: { // All other types get this color
        colorize: [0.5, 0.5, 0.5]
    }
};

// Use our custom initial default states for object Entities

const model = xktLoader.load({
    id: "myModel",
    src: "./models/xkt/duplex/scene.xkt",
    metaModelSrc: "./metaModels/duplex/metaModel.json",

    objectDefaults: myObjectDefaults
});

Masking what IFC Types are Loaded

We can optionally load only those objects that have the specified IFC types. In the example below, we'll load only the objects that represent walls, in order to create a plan view.

Click the image below for a live demo.

const model = xktLoader.load({
    id: "myModel",
     src: "./models/xkt/OTCConferenceCenter/OTCConferenceCenter.xkt",
     metaModelSrc: "./metaModels/OTCConferenceCenter/metaModel.json",
     includeTypes: ["IfcWallStandardCase"]
});

We can also optionally load only those objects that do not have the specified IFC types. In the example below, we'll load only the objects that do not represent empty spaces.

const model = xktLoader.load({
    id: "myModel",
     src: "./models/xkt/OTCConferenceCenter/OTCConferenceCenter.xkt",
     metaModelSrc: "./metaModels/OTCConferenceCenter/metaModel.json",
     excludeTypes: ["IfcSpace"]
});

Conclusion

In this tutorial, we saw how to plug together a simple IFC model viewer using xeokit's XKTLoaderPlugin, and how to access some of the objects we loaded.

Much more is possible though - see the API Docs for various other components and plugins you might use to build up the functionality of your viewer.

Or, if you need a quicker solution to getting your BIM models on the Web, take a look at xeokit-bim-viewer.

Clone this wiki locally