<< User Guide

Viewing IFC using IFCLoader

How to use IFCLoader to view an IFC model in the browser with a xeokit web viewer.

Click on the preview below to run the example. Scroll down to learn how it's made.

Click to load

Viewing IFC using IFCLoader

HTML

Listed below is the HTML for this example.


<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Viewing IFC using IFCLoader</title>
    <style>
        body {
            background-color: white;
            overflow: hidden;
            margin: 0;
            user-select: none;
        }

        #demoCanvas {
            width: 100%;
            height: 100%;
            position: absolute;
            background: white;
            border: 0;
        }
    </style>
</head>
<body>
<canvas id="demoCanvas"></canvas>
</body>
<script type="module" src="./index.js"></script>
</html>

JavaScript

Listed below is the JavaScript for this example, which we'll break down into steps.

1. Import the SDK from a bundle built for these examples

import * as xeokit from "../../js/xeokit-demo-bundle.js";
import {DemoHelper} from "../../js/DemoHelper.js";

2. Create an IFCLoader to load IFC files

const ifcLoader = new xeokit.ifc.IFCLoader();

3. Create a Scene to hold geometry and materials

const scene = new xeokit.scene.Scene();

4. Create a Data to hold semantic data

const data = new xeokit.data.Data();

5. Create a WebGLRenderer to use the browser's WebGL graphics API for rendering

const renderer = new xeokit.webglrenderer.WebGLRenderer({});

6. Create a Viewer that will use the WebGLRenderer to draw the Scene

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

7. Give the Viewer a single View to render the Scene in our HTML canvas element

const view = viewer.createView({
    id: "demoView",
    elementId: "demoCanvas"
});

8. Arrange the View's Camera

view.camera.eye = [-6.01, 4.85, 9.11];
view.camera.look = [3.93, -2.65, -12.51];
view.camera.up = [0.12, 0.95, -0.27];

9. Add a CameraControl to interactively control the View's Camera with keyboard, mouse and touch input

new xeokit.cameracontrol.CameraControl(view, {});

10. Create a SceneModel to hold our model's geometry and materials

const sceneModel = scene.createModel({
    id: "demoModel"
});

11. Ignore the DemHelper

const demoHelper = new DemoHelper({
    viewer,
    data
});
demoHelper
    .init()
    .then(() => {

12. Create a DataModel to hold semantic data for our model

        const dataModel = data.createModel({
            id: "demoModel"
        });

13. Load our IFC data into the SceneModel and DataModel

        fetch(`../../models/Minimal_IFC4/ifc/model.ifc`)
            .then(response => {
                response
                    .arrayBuffer()
                    .then(fileData => {
                        ifcLoader.load({
                            fileData,
                            sceneModel,
                            dataModel
                        }).then(() => { // IFC file loaded

14. Build the SceneModel. The IFC model now appears in our Viewer.

                            sceneModel.build();

15. Build the DataModel. The DataModel and the Data will then contain DataObject , Relationship and PropertySet components that represent the IFC data as an entity-relationship graph.

                            dataModel.build();

16. Using the searchObjects function, query the Data for all the IfcMember elements within a given IfcBuildingStorey .

                            const resultObjectIds = [];
                            const result = xeokit.data.searchObjects(data, {
                                startObjectId: "38aOKO8_DDkBd1FHm_lVXz",
                                includeObjects: [xeokit.ifctypes.IfcMember],
                                includeRelated: [xeokit.ifctypes.IfcRelAggregates],
                                resultObjectIds
                            });

17. Check if the query was valid.

                            if (typeof result === xeokit.core.SDKError) {
                                console.error(result);
                                return;
                            }

18. If the query succeeded, go ahead and mark whatever objects we found as selected. In this case, it will set the window frames as selected in the View.

                            view.setObjectsSelected(resultObjectIds, true);
                            demoHelper.finished();
                        }).catch(e => {
                            console.error(e);
                        });
                    });
            });
    });