Package Exports

@xeokit/xeokit-sdk
@xeokit/xeokit-sdk/dist/xeokit-sdk.cjs.js
@xeokit/xeokit-sdk/dist/xeokit-sdk.es.js
@xeokit/xeokit-sdk/dist/xeokit-sdk.min.es
@xeokit/xeokit-sdk/dist/xeokit-sdk.min.es.js
@xeokit/xeokit-sdk/src/extras/ContextMenu/ContextMenu.js
@xeokit/xeokit-sdk/src/plugins/BCFViewpointsPlugin/BCFViewpointsPlugin.js
@xeokit/xeokit-sdk/src/plugins/FastNavPlugin/FastNavPlugin.js
@xeokit/xeokit-sdk/src/plugins/GLTFLoaderPlugin/GLTFLoaderPlugin.js
@xeokit/xeokit-sdk/src/plugins/NavCubePlugin/NavCubePlugin
@xeokit/xeokit-sdk/src/plugins/NavCubePlugin/NavCubePlugin.js
@xeokit/xeokit-sdk/src/plugins/SectionPlanesPlugin/SectionPlanesPlugin.js
@xeokit/xeokit-sdk/src/plugins/StoreyViewsPlugin/StoreyViewsPlugin
@xeokit/xeokit-sdk/src/plugins/StoreyViewsPlugin/StoreyViewsPlugin.js
@xeokit/xeokit-sdk/src/plugins/TreeViewPlugin/TreeViewPlugin
@xeokit/xeokit-sdk/src/plugins/TreeViewPlugin/TreeViewPlugin.js
@xeokit/xeokit-sdk/src/plugins/XKTLoaderPlugin/XKTLoaderPlugin
@xeokit/xeokit-sdk/src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js
@xeokit/xeokit-sdk/src/viewer/Viewer.js
@xeokit/xeokit-sdk/src/viewer/scene/lights/AmbientLight
@xeokit/xeokit-sdk/src/viewer/scene/lights/AmbientLight.js
@xeokit/xeokit-sdk/src/viewer/scene/lights/DirLight.js
@xeokit/xeokit-sdk/src/viewer/scene/math/math.js
@xeokit/xeokit-sdk/src/viewer/scene/mementos/CameraMemento.js
@xeokit/xeokit-sdk/src/viewer/scene/mementos/ModelMemento.js
@xeokit/xeokit-sdk/src/viewer/scene/mementos/ObjectsMemento.js
@xeokit/xeokit-sdk/src/viewer/scene/utils.js
@xeokit/xeokit-sdk/src/viewer/scene/utils/Map.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@xeokit/xeokit-sdk) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

xeokit-sdk

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>