WebIFCLoaderPlugin

Viewer plugin that uses web-ifc to load BIM models directly from IFC files.

[Run this example]

Overview

• Loads small-to-medium sized BIM models directly from IFC files.
• Uses web-ifc to parse IFC files in the browser.
• Loads IFC geometry, element structure metadata, and property sets.
• Not for large models. For best performance with large models, we recommend using XKTLoaderPlugin.
• Loads double-precision coordinates, enabling models to be viewed at global coordinates without accuracy loss.
• Allows to set the position, scale and rotation of each model as you load it.
• Filter which IFC types get loaded.
• Configure initial appearances of specified IFC types.
• Set a custom data source for IFC files.
• Load multiple copies of the same model.

Limitations

Loading and parsing huge IFC STEP files can be slow, and can overwhelm the browser, however. To view your largest IFC models, we recommend instead pre-converting those to xeokit's compressed native .XKT format, then loading them with XKTLoaderPlugin instead.

Scene representation

When loading a model, WebIFCLoaderPlugin creates an Entity that represents the model, which will have Entity#isModel set true and will be registered by Entity#id in Scene#models. The WebIFCLoaderPlugin also creates an Entity for each object within the model. Those Entities will have Entity#isObject set true and will be registered by Entity#id in Scene#objects.

Metadata

When loading a model, WebIFCLoaderPlugin also creates a MetaModel that represents the model, which contains a MetaObject for each IFC element, plus a PropertySet for each IFC property set. Loading metadata can be very slow, so we can also optionally disable it if we don't need it.

Usage

In the example below we'll load the Duplex BIM model from an IFC file. Within our Viewer, this will create a bunch of Entitys that represents the model and its objects, along with a MetaModel, MetaObjects and PropertySets that hold their metadata.

Since this model contains IFC types, the WebIFCLoaderPlugin will set the initial appearance of each object Entity according to its IFC type in WebIFCLoaderPlugin#objectDefaults.

• [Run example]

import {Viewer, WebIFCLoaderPlugin} from "xeokit-sdk.es.js";
import * as WebIFC from "https://cdn.jsdelivr.net/npm/web-ifc@0.0.51/web-ifc-api.js";

//------------------------------------------------------------------------------------------------------------------
// 1. Create a Viewer,
// 2. Arrange the camera
//------------------------------------------------------------------------------------------------------------------

// 1
const viewer = new Viewer({
     canvasId: "myCanvas",
     transparent: true
});

// 2
viewer.camera.eye = [-2.56, 8.38, 8.27];
viewer.camera.look = [13.44, 3.31, -14.83];
viewer.camera.up = [0.10, 0.98, -0.14];

//------------------------------------------------------------------------------------------------------------------
// 1. Create a web-ifc API, which will parse IFC for our WebIFCLoaderPlugin
// 2. Connect the API to the web-ifc WASM module, which powers the parsing
// 3. Initialize the web-ifc API
//------------------------------------------------------------------------------------------------------------------

// 1

const IfcAPI = new this._webIFC.IfcAPI();

// 2

IfcAPI.SetWasmPath("https://cdn.jsdelivr.net/npm/web-ifc@0.0.51/");

// 3

IfcAPI.Init().then(() => {

     //------------------------------------------------------------------------------------------------------------
     // 1. Create a WebIFCLoaderPlugin, configured with the web-ifc module and a web-ifc API instance
     // 2. Load a BIM model fom an IFC file, excluding its IfcSpace elements, and highlighting edges
     //------------------------------------------------------------------------------------------------------------

    const ifcLoader = new WebIFCLoaderPlugin(viewer, {
        WebIFC,
        IfcAPI
    });

    // 2
    const model = ifcLoader.load({          // Returns an Entity that represents the model
        id: "myModel",
        src: "../assets/models/ifc/Duplex.ifc",
        excludeTypes: ["IfcSpace"],
        edges: true
    });

    model.on("loaded", () => {

        //----------------------------------------------------------------------------------------------------------
        // 1. Find metadata on the bottom storey
        // 2. X-ray all the objects except for the bottom storey
        // 3. Fit the bottom storey in view
        //----------------------------------------------------------------------------------------------------------

        // 1
        const metaModel = viewer.metaScene.metaModels["myModel"];       // MetaModel with ID "myModel"
        const metaObject
                = viewer.metaScene.metaObjects["1xS3BCk291UvhgP2dvNsgp"];  // MetaObject with ID "1xS3BCk291UvhgP2dvNsgp"

        const name = metaObject.name;                                   // "01 eerste verdieping"
        const type = metaObject.type;                                   // "IfcBuildingStorey"
        const parent = metaObject.parent;                               // MetaObject with type "IfcBuilding"
        const children = metaObject.children;                           // Array of child MetaObjects
        const objectId = metaObject.id;                                 // "1xS3BCk291UvhgP2dvNsgp"
        const objectIds = viewer.metaScene.getObjectIDsInSubtree(objectId);   // IDs of leaf sub-objects
        const aabb = viewer.scene.getAABB(objectIds);                   // Axis-aligned boundary of the leaf sub-objects

        // 2
        viewer.scene.setObjectsXRayed(viewer.scene.objectIds, true);
        viewer.scene.setObjectsXRayed(objectIds, false);

        // 3
        viewer.cameraFlight.flyTo(aabb);

        // Find the model Entity by ID
        model = viewer.scene.models["myModel"];

        // Destroy the model
        model.destroy();
    });
});

Transforming

We have the option to rotate, scale and translate each IFC model as we load it.

This lets us load multiple models, or even multiple copies of the same model, and position them apart from each other.

In the example below, we'll scale our model to half its size, rotate it 90 degrees about its local X-axis, then translate it 100 units along its X axis.

ifcLoader.load({
     src: "../assets/models/ifc/Duplex.ifc",
     rotation: [90,0,0],
     scale: [0.5, 0.5, 0.5],
     origin: [100, 0, 0]
});

Including and excluding IFC types

We can also load only those objects that have the specified IFC types.

In the example below, we'll load only the objects that represent walls.

const model2 = ifcLoader.load({
    id: "myModel2",
    src: "../assets/models/ifc/Duplex.ifc",
    includeTypes: ["IfcWallStandardCase"]
});

We can also load only those objects that don't have the specified IFC types.

In the example below, we'll load only the objects that do not represent empty space.

const model3 = ifcLoader.load({
    id: "myModel3",
    src: "../assets/models/ifc/Duplex.ifc",
    excludeTypes: ["IfcSpace"]
});

Configuring initial IFC object appearances

We can specify the custom initial appearance of loaded objects according to their IFC types.

This is useful for things like:

• setting the colors to our objects according to their IFC types,
• automatically hiding IfcSpace objects, and
• ensuring that IfcWindow objects are always transparent.
  In the example below, we'll load a model, while configuring IfcSpace elements to be always initially invisible, and IfcWindow types to be always translucent blue.

const myObjectDefaults = {

     IfcSpace: {
         visible: false
     },
     IfcWindow: {
         colorize: [0.337255, 0.303922, 0.870588], // Blue
         opacity: 0.3
     },

     //...

     DEFAULT: {
         colorize: [0.5, 0.5, 0.5]
     }
};

const model4 = ifcLoader.load({
     id: "myModel4",
     src: "../assets/models/ifc/Duplex.ifc",
     objectDefaults: myObjectDefaults // Use our custom initial default states for object Entities
});

When we don't customize the appearance of IFC types, as just above, then IfcSpace elements tend to obscure other elements, which can be confusing.

It's often helpful to make IfcSpaces transparent and unpickable, like this:

const ifcLoader = new WebIFCLoaderPlugin(viewer, {
   wasmPath: "../dist/",
   objectDefaults: {
       IfcSpace: {
           pickable: false,
           opacity: 0.2
       }
   }
});

Alternatively, we could just make IfcSpaces invisible, which also makes them unpickable:

const ifcLoader = new WebIFCLoaderPlugin(viewer, {
   wasmPath: "../dist/",
   objectDefaults: {
       IfcSpace: {
           visible: false
       }
   }
});

Configuring a custom data source

By default, WebIFCLoaderPlugin will load IFC files over HTTP.

In the example below, we'll customize the way WebIFCLoaderPlugin loads the files by configuring it with our own data source object. For simplicity, our custom data source example also uses HTTP, using a couple of xeokit utility functions.

import {utils} from "xeokit-sdk.es.js";

class MyDataSource {

     constructor() {
     }

     // Gets the contents of the given IFC file in an arraybuffer
     getIFC(src, ok, error) {
         console.log("MyDataSource#getIFC(" + IFCSrc + ", ... )");
         utils.loadArraybuffer(src,
             (arraybuffer) => {
                 ok(arraybuffer);
             },
             function (errMsg) {
                 error(errMsg);
             });
     }
}

const ifcLoader2 = new WebIFCLoaderPlugin(viewer, {
      dataSource: new MyDataSource()
});

const model5 = ifcLoader2.load({
     id: "myModel5",
     src: "../assets/models/ifc/Duplex.ifc"
});

Loading multiple copies of a model, without object ID clashes

Sometimes we need to load two or more instances of the same model, without having clashes between the IDs of the equivalent objects in the model instances.

As shown in the example below, we do this by setting WebIFCLoaderPlugin#globalizeObjectIds true before we load our models.

ifcLoader.globalizeObjectIds = true;

const model = ifcLoader.load({
     id: "model1",
     src: "../assets/models/ifc/Duplex.ifc"
});

const model2 = ifcLoader.load({
   id: "model2",
   src: "../assets/models/ifc/Duplex.ifc"
});

For each Entity loaded by these two calls, Entity#id and MetaObject#id will get prefixed by the ID of their model, in order to avoid ID clashes between the two models.

An Entity belonging to the first model will get an ID like this:

myModel1#0BTBFw6f90Nfh9rP1dlXrb

The equivalent Entity in the second model will get an ID like this:

myModel2#0BTBFw6f90Nfh9rP1dlXrb

Now, to update the visibility of both of those Entities collectively, using Scene#setObjectsVisible, we can supply just the IFC product ID part to that method:

myViewer.scene.setObjectVisibilities("0BTBFw6f90Nfh9rP1dlXrb", true);

The method, along with Scene#setObjectsXRayed, Scene#setObjectsHighlighted etc, will internally expand the given ID to refer to the instances of that Entity in both models.

We can also, of course, reference each Entity directly, using its globalized ID:

myViewer.scene.setObjectVisibilities("myModel1#0BTBFw6f90Nfh9rP1dlXrb", true);