xeokit XKT Importer and Exporter

---

Import models as xeokit's native binary XKT format

---

The xeokit SDK allows us to import 3D models from XKT, which is xeokit's native runtime asset delivery format for model representations and semantics.

The XKT format compresses large double-precision model geometry to a compact payload that loads quickly over the Web into a xeokit viewer running in the browser.

To import a XKT model into xeokit, use the XKTLoader class, which will load the file into a SceneModel.

Use the metamodel!MetaModelLoader | MetaModelLoader function to load legacy JSON metadata into a DataModel.

Installation

npm install @xeokit/sdk
Copy

Usage

In the example below, we will create a Viewer with a WebGLRenderer and a Scene, which holds model geometry and materials.

On our Viewer, we will create a single View to render it to a canvas element on the page. We will also attach a CameraControl to our View, allowing us to control its camera with mouse and touch input.

Within the Scene, we will create a SceneModel to hold a model. We will then use xkt!XKTLoader | XKTLoader to load any XKT file into our SceneModel.

The class will be used to handle any errors that may occur during this process.

• Run this example

import {SDKError} from "@xeokit/core";
import {Scene} from "@xeokit/scene";
import {WebGLRenderer} from "@xeokit/webglrenderer";
import {Viewer} from "@xeokit/viewer";
import {CameraControl} from "@xeokit/cameracontrol";
import {XKTLoader} from "@xeokit/xkt";

const scene = new Scene();

const viewer = new Viewer({
  scene
});

const renderer = new WebGLRenderer({
  viewer
});

const viewResult = viewer.createView({
  id: "myView",
  elementId: "myCanvas" // << Ensure that this HTMLElement exists in the page
});

const xktLoader = new XKTLoader();

if (!viewResult.ok) {
    console.error(`Error creating View -> ${viewResult.error}`);

} else {

    const view = viewResult.value;

    view.camera.eye = [1841982.93, 10.03, -5173286.74];
    view.camera.look = [1842009.49, 9.68, -5173295.85];
    view.camera.up = [0.0, 1.0, 0.0];

    new CameraControl(view, {});

    const sceneModelResult = scene.createModel({
        id: "myModel"
    });

    if (!sceneModelResult.ok) {
        console.error(`Error creating SceneModel -> ${sceneModel.error}`);

    } else {

       const sceneModel = sceneModelResult.model;

       fetch("model.xkt").then(response => {

            response.arrayBuffer().then(fileData => {

                xktLoader.load({
                    fileData,
                    sceneModel
                }).then(() => {

                    // Loaded

                }).catch(sdkError => {
                    sceneModel.destroy();
                    console.error(`Error loading XKT -> ${sdkError.message}`);
                });

            }).catch(message => {
                console.error(`Error creating ArrayBuffer -> ${message}`);
            });

        }).catch(message => {
            console.error(`Error fetching model -> ${message}`);
        });
    }
}
Copy