Skip to content

Viewing BIM Models Offline

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

See also:

Introduction

xeokit provides two plugins for loading IFC geometry and metadata from the file system:

We'll use the XKTLoaderPlugin in this tutorial because it's the most efficient of the two.

Contents

Example

Click the image below for a live demo.

Loading a Model

We load our IFC model from two files:

  • a JSON file containing metadata about each IFC element, and
  • an .XKT file containing objects with IDs matching the elements in the IFC JSON.

The code snippets below show how it's done. 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"]
});

Creating the Files

See Creating Files for Offline BIM.

Clone this wiki locally