Architecture

Overview

The xeokit-sdk is an EULA-licensed software development kit from xeolabs for developing high-performance Web-based 3D visualization applications on the open source xeogl WebGL library.

At the heart of the SDK is the xeokit Viewer class, which wraps a xeogl.Scene and acts as a container for xeokit Plugin subclasses that extend the capabilities of the Viewer.

The xeokit-sdk comes with many useful plugins to get you started, such as the GLTFModelsPlugin that loads glTF, and the BIMServerModelsPlugin that loads models from BIMServer, plus many more.

Need a custom plugin? That's where xeolabs can help - get in touch to discuss your requirements.

Examples

These examples show a quick preview of what you can do with the xeokit-sdk.

Example 1: Loading Multiple glTF Models

import {Viewer} from "../../../src/viewer/Viewer.js";
import {GLTFBigModelsPlugin} from "../../../src/viewer/plugins/GLTFBigModelsPlugin/GLTFBigModelsPlugin.js";
import {AxisGizmoPlugin} from "../../../src/viewer/plugins/AxisGizmoPlugin/AxisGizmoPlugin.js";

const viewer = new Viewer({
    canvasId: "myCanvas"
});

new AxisGizmoPlugin(viewer, {size: [250, 250]});

var loader = new GLTFBigModelsPlugin(viewer);

var structure = loader.load({
    id: "structure",
    src: "../../models/gltf/WestRiverSideHospital/structure.gltf"
});

var electrical = loader.load({
    id: "electrical",
    src: "../../models/gltf/WestRiverSideHospital/electrical.gltf"
});

var fireAlarms = loader.load({
    id: "fireAlarms",
    src: "../../models/gltf/WestRiverSideHospital/fireAlarms.gltf"
});

var sprinklers = loader.load({
    id: "sprinklers",
    src: "../../models/gltf/WestRiverSideHospital/sprinklers.gltf"
});

viewer.scene.camera.orbitPitch(20);

structure.on("loaded", () => {
    viewer.cameraFlight.jumpTo(structure);
});

Example 2: Loading a Model from BIMServer

The BIMServerModelsPlugin plugin loads models from a BIMServer.

For each model loaded, BIMServerModelsPlugin creates a xeogl.Model within its Viewer's xeogl.Scene. You can load multiple models into the same Viewer, giving each its own position, scale and orientation. You can also load multiple copies of the same model.

A BIMServerModelsPlugin is configured with a BIMServerClient, which is a class provided by the BIMServer JavaScript API that provides a client interface through which you can query BIMServer and download models. We use that class to query BIMServer's database, while BIMServerModelsPlugin uses it to download models.

In the example below, we'll load the latest revision of a project's model. We'll assume that we have a BIMServer instance running and serving requests on port 8082, with a model loaded for project ID 131073. We'll get the file that defines the BIMServer JavaScript API from the BIMServer, which ensures that we have the right version of the API for the BIMServer version.

Since xeogl's default World "up" direction is +Y, while the model's "up" is +Z, we'll rotate the model 90 degrees about the X-axis as we load it. Note that we could also instead configure xeogl to use +Z as "up".

Note that BIMServerModelsPlugin works with BIMServer V1.5 or later.

Read more about this example, as well as how to set up the BIMServer instance and load a model, in the Loading IFC Models from BIMServer tutorial in the xeokit SDK wiki.

import BimServerClient from "http://localhost:8082/apps/bimserverjavascriptapi/bimserverclient.js";
import {Viewer} from "../../../src/viewer/Viewer.js";
import {BIMServerModelsPlugin} from "../../../src/viewer/plugins/BIMServerModelsPlugin/BIMServerModelsPlugin.js";

const bimServerAddress = "http://localhost:8082";
const username = "[email protected]";
const password = "admin";
const poid = 131073;     // Project ID

// Create a xeokit Viewer
const viewer = new Viewer({
    canvasId: "myCanvas"
});

// Create a BimServerClient
const bimServerAPI = new BimServerClient(bimServerAddress);

// Add a BIMServerModelsPlugin to the Viewer, configured with the BIMServerClient
const bimServerModelsPlugin = new BIMServerModelsPlugin(viewer, {
    bimServerAPI: bimServerAPI
});

// Initialize the BIMServer client
bimServerAPI.init(() => {

    // Login to BIMServer
    bimServerAPI.login(username, password, () => {

        // Query a project by ID
        bimServerAPI.call("ServiceInterface", "getProjectByPoid", {
            poid: poid
        }, (project) => {

            // From the project info returned by BIMServerClient, we'll get the ID of the latest
            // model revision and the version of the IFC schema to which the model conforms.

            // Load the latest revision of the project

            const roid = project.lastRevisionId;
            const schema = project.schema;
 
            const model = bimServerModelsPlugin.load({ // Returns a xeogl.Model
                id: "myModel",
                poid: poid,                      // Project ID
                roid: roid,                      // Revision ID
                schema: schema,                  // Schema version
                edges: true,                     // Render with emphasized edges (default is false)
                lambertMaterials: true,          // Lambertian flat-shading instead of default Blinn/Phong
                scale: [0.001, 0.001, 0.001],    // Shrink the model a bit
                rotation: [-90, 0, 0]            // Rotate model for World +Y "up"
            });
 
            const scene = viewer.scene;  // xeogl.Scene
            const camera = scene.camera; // xeogl.Camera

            model.on("loaded", () => { // When loaded, fit camera and start orbiting
                camera.orbitPitch(20);
                viewer.cameraFlight.flyTo(model);
                scene.on("tick", () => {
                    camera.orbitYaw(0.3);
                })
            });
        });
    });
});