xeokit IFC Importer

---

Import BIM models from IFC STEP files using the web-ifc API

---

The xeokit SDK provides functionality to import 3D building models from Industry Foundation Classes (IFC) files, which are commonly used in the field of Building Information Modeling (BIM). IFC files facilitate the exchange of information between different software applications used in the construction and building industries.

The loadWebIFC function can be used to import medium-sized IFC models into xeokit. This function loads the IFC file data into both a SceneModel (which holds the model's geometry and materials) and a DataModel (which holds the model's semantic data). The loadWebIFC function internally leverages the web-ifc API to parse geometry and data from the IFC file.

Installation

To install the xeokit SDK, use the following npm command:

npm install @xeokit/sdk
Copy

Usage Example

The example below demonstrates how to use loadWebIFC in the xeokit context.

This example sets up a Viewer using a WebGLRenderer and a Scene to hold the model's geometry and materials. We also create a Data instance to store the model's semantic data.

In the Viewer, we create a View to render the model to an HTML canvas, and attach a CameraControl to allow mouse and touch input for camera control.

The Scene will include a SceneModel for geometry and materials, and the Data will include a DataModel to hold the IFC elements and property sets.

Before using loadWebIFC, we initialize the WebIFC API, which is then passed into the loadWebIFC function. The example also demonstrates error handling using the SDKError class.

Example JavaScript code:

import {SDKError} from "@xeokit/core";
import {Scene} from "@xeokit/scene";
import {WebGLRenderer} from "@xeokit/webglrenderer";
import {Viewer} from "@xeokit/viewer";
import {CameraControl} from "@xeokit/cameracontrol";
import {loadWebIFC} from "@xeokit/webifc";
import * as WebIFC from "https://cdn.jsdelivr.net/npm/web-ifc@0.0.51/web-ifc-api.js";

const scene = new Scene();
const data = new Data();

const renderer = new WebGLRenderer({});

const viewer = new Viewer({
    id: "myViewer",
    scene,
    renderer
});

const view = viewer.createView({
    id: "myView",
    elementId: "myCanvas" // Ensure this HTMLElement exists in the page
});

view.camera.eye = [1841982.93, 10.03, -5173286.74];
view.camera.look = [1842009.49, 9.68, -5173295.85];
view.camera.up = [0.0, 1.0, 0.0];

new CameraControl(view, {});

const ifcAPI = new WebIFC.IfcAPI();
ifcAPI.SetWasmPath("https://cdn.jsdelivr.net/npm/web-ifc@0.0.51/");

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

    const sceneModel = scene.createModel({ id: "myModel" });
    const dataModel = data.createModel({ id: "myModel" });

    fetch("model.ifc").then(response => {
        response.arrayBuffer().then(fileData => {
            loadWebIFC({
                ifcAPI,
                fileData,
                sceneModel,
                dataModel
            }).then(() => {
                sceneModel.build();
                dataModel.build();
            }).catch(err => {
                sceneModel.destroy();
                dataModel.destroy();
                console.error(`Error loading IFC file with WebIFC: ${err}`);
            });
        }).catch(err => {
            console.error(`Error creating ArrayBuffer from fetch response: ${err}`);
        });
    }).catch(err => {
        console.error(`Error fetching IFC file: ${err}`);
    });
}).catch(err => {
    console.error(`Error initializing WebIFC.IfcAPI: ${err}`);
});
Copy