Skip to content

3D BIM IFC Viewer SDK for AEC engineering applications. Open Source JavaScript Toolkit based on pure WebGL for top performance, real-world coordinates and full double precision

License

Notifications You must be signed in to change notification settings

xeokit/xeokit-sdk

Folders and files

NameName
Last commit message
Last commit date
Jan 13, 2023
Feb 26, 2019
Mar 16, 2023
Dec 5, 2022
Apr 27, 2023
Apr 28, 2023
Jan 13, 2023
Aug 12, 2022
Jan 11, 2023
Sep 28, 2021
Apr 22, 2021
May 22, 2019
Jan 13, 2023
Aug 23, 2022
Nov 3, 2021
Jul 1, 2022
Apr 28, 2021
Sep 28, 2021
Sep 16, 2022
Apr 28, 2023
Jul 27, 2022
Jul 27, 2022
May 3, 2021
Jan 9, 2020
Mar 30, 2022
Mar 30, 2022

Repository files navigation

xeokit-sdk

This project is using Percy.io for visual regression testing. npm version

xeokit is a JavaScript software development kit created by xeolabs for viewing high-detail, full-precision 3D engineering and BIM models in the browser.

Installing

npm i @xeokit/xeokit-sdk

Usage

The xeokit SDK lets us develop our own browser-based BIM viewer, which we can fully customize and extend with plugins. Let's create a Viewer with a WebIFCLoaderPlugin to view a IFC model in the browser, then view a sample IFC model from the Open IFC Model Database.

This is just one way to load our models into xeokit. We can also load multiple models from other formats, including CityJSON, glTF, LAZ and OBJ, as well as xeokit's own native highly-compressed XKT format, which we can pre-convert offline from other formats.

<!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, {
        wasmPath: "https://cdn.jsdelivr.net/npm/@xeokit/xeokit-sdk/dist/"
    });

    const model = webIFCLoader.load({
        src: "Duplex.ifc",
        edges: true
    });

</script>
</html>

Resources