<aside> 🆕 This feature was introduced in xeokit-sdk v2.2.

</aside>

<aside> ℹ️ Although WebIFCLoaderPlugin is a super convenient way to view BIM with xeokit, we still recommend using XKTLoaderPlugin for viewing large BIM models in production. Once you've converted your IFC model to xeokit's native XKT format, XKTLoaderPlugin can load it more rapidly (~3 seconds for the sample model used in this tutorial). For more info, see Viewing an IFC Model with XKTLoaderPlugin.

</aside>

Introduction

The xeokit SDK provides several ways to load files of various formats into its browser-based viewer. These range from convenient plugins that load various formats directly, parsing them in the browser, to server-side tools that pre-convert bulky formats into xeokit's super fast-loading native web-friendly binary format, XKT.

In this mini-tutorial, we'll demonstrate one of our convenient loader plugins - we'll create a xeokit Viewer with a WebIFCLoaderPlugin to view a BIM model in the browser, loaded directly from an IFC 4.3 file.

For our IFC model, we'll use the Duplex IFC model from the Open IFC Model Database. When that's converted and loaded into our viewer, it will look like the example below.

Internally, WebIFCLoaderPlugin uses the WASM-based web-ifc library to parse geometry and metadata from the IFC file.

Once we've loaded our model, we'll then take a look at some of the options supported by WebIFCLoaderPlugin.

Usage Example

<aside> ▶️ Run this example

</aside>

Screenshot from 2021-12-07 08-00-27.png

<!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>xeokit Example</title>
		<style>
      body {
          margin: 0;
          width: 100%;
          height: 100%;
          user-select: none;
      }
			#myCanvas {
			    width: 100%;
			    height: 100%;
			    position: absolute;
			    background: lightblue;
			    background-image: linear-gradient(lightblue, white);
			}
		</style>
</head>
<body>
    <canvas id="myCanvas"></canvas>
</body>
<script id="source" type="module">

import {Viewer, WebIFCLoaderPlugin} from 
"<https://cdn.jsdelivr.net/npm/@xeokit/xeokit-sdk/dist/xeokit-sdk.es.min.js>";

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

viewer.camera.eye = [-3.933, 2.855, 27.018];
viewer.camera.look = [4.400, 3.724, 8.899];
viewer.camera.up = [-0.018, 0.999, 0.039];

const webIFCLoader = new WebIFCLoaderPlugin(viewer, {
    // Path to web-ifc.wasm, which does the IFC parsing for us
    wasmPath: "<https://cdn.jsdelivr.net/npm/@xeokit/xeokit-sdk/dist/>"
});

const model = webIFCLoader.load({ // Returns an Entity that represents the model
    src: "Duplex.ifc",
    edges: true
});

</script>
</html>

Positioning Models

WebIFCLoaderPlugin lets us 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 100000000 units along its X axis.