Skip to content

Open source JavaScript SDK for viewing high-detail, full-precision 3D BIM and AEC models in the Web browser.

License

Notifications You must be signed in to change notification settings

xeokit/xeokit-sdk

Folders and files

NameName
Last commit message
Last commit date

Latest commit

May 29, 2024
302d60c · May 29, 2024
Apr 19, 2024
Feb 26, 2019
May 28, 2024
May 29, 2024
May 29, 2024
May 29, 2024
May 29, 2024
Aug 12, 2022
May 15, 2024
May 7, 2024
Sep 28, 2021
Dec 3, 2023
May 22, 2019
Jan 13, 2023
May 15, 2024
Nov 3, 2021
May 2, 2024
May 1, 2024
Apr 28, 2021
May 7, 2024
May 29, 2024
Jul 27, 2022
Apr 21, 2024
Jul 27, 2022
Jan 9, 2020
Mar 30, 2022
Mar 30, 2022

Repository files navigation

xeokit-sdk

npm version CodeSee

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

Resources

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;
        }

        #xeokit_canvas {
            width: 100%;
            height: 100%;
            position: absolute;
            background: lightblue;
            background-image: linear-gradient(lightblue, white);
        }
    </style>
</head>
<body>
<canvas id="xeokit_canvas"></canvas>
</body>
<script id="source" type="module">

    import {WebIFCLoaderPlugin, Viewer} from
                    "https://cdn.jsdelivr.net/npm/@xeokit/xeokit-sdk/dist/xeokit-sdk.es.min.js";
    import * as WebIFC from "https://cdn.jsdelivr.net/npm/web-ifc@0.0.51/web-ifc-api.js";
    const viewer = new Viewer({
        canvasId: "xeokit_canvas",
        transparent: true,
        dtxEnabled: 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 IfcAPI = new WebIFC.IfcAPI();
    IfcAPI.SetWasmPath("https://cdn.jsdelivr.net/npm/web-ifc@0.0.51/");

    IfcAPI.Init().then(() => {
        const ifcLoader = new WebIFCLoaderPlugin(viewer, {
            WebIFC,
            IfcAPI
        });

        const model = ifcLoader.load({
            src: "Duplex.ifc",
            edges: true
        });
    });
</script>
</html>