Skip to content

Files

Cannot retrieve ahead/behind information for this branch.

Folders and files

NameName
Last commit message
Last commit date
Apr 19, 2024
Feb 26, 2019
Nov 23, 2024
Jan 22, 2025
Nov 13, 2024
Feb 5, 2025
Feb 6, 2025
Aug 12, 2022
Jan 29, 2025
Sep 28, 2021
Dec 3, 2023
May 22, 2019
Jan 13, 2023
Jan 23, 2025
Jun 28, 2024
Jun 18, 2024
Jul 2, 2024
Nov 3, 2021
Aug 3, 2024
May 1, 2024
Apr 28, 2021
Dec 5, 2024
Jan 22, 2025
Jul 27, 2022
Apr 21, 2024
Jul 27, 2022
Jan 9, 2020
Mar 30, 2022
Mar 30, 2022

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 XKTLoaderPlugin to view an XKT model in the browser, which was pre-converted from IFC model from the Open IFC Model Database.

This is just one way to load our models into xeokit: by converting it to XKT and loading via XKTLoaderPlugin. We can also load models from other formats directly, including CityJSON, glTF, LAZ and OBJ.

Run 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>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 {XKTLoaderPlugin, Viewer} from
                    "https://cdn.jsdelivr.net/npm/@xeokit/xeokit-sdk/dist/xeokit-sdk.es.min.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 xktLoader = new XKTLoaderPlugin(viewer);

    const sceneModel = xktLoader.load({
        id: "myModel",
        src: "Duplex.xkt",
        saoEnabled: true,
        edges: true,
        dtxEnabled: true
    });
    
</script>
</html>