Skip to content

Loading Models from BIMServer into xeokit

Lindsay Kay edited this page Dec 23, 2018 · 9 revisions

Contents

Introduction

In this tutorial, you'll learn how to load an IFC model from BIMServer into a xeokit Viewer. We're not going to describe how to set up the BIMServer, or how to load IFC models into it, since there's already a good guide for that in the BIMServer wiki (see link below).

Set up a BIMServer

To get a BIMServer instance running, follow the BIMServer Get Started Quick Guide.

Upload an IFC Model

For this tutorial, we'll upload the Design IFC Model from the Schependomlaan dataset into BIMServer, as explained in the Guide. Once you've uploaded it, note its project ID.

Create a xeokit Viewer

In this example, we'll assume that our BIMServer is serving content on port 8082 and that our new project has ID 131073.

First, we'll import the BIMServerClient JavaScript API from the BIMServer:

import BimServerClient from 
    "http://localhost:8082/apps/bimserverjavascriptapi/bimserverclient.js";

Then import the xeokit Viewer and BIMServerModelsPlugin classes:

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

Create a xeokit Viewer, binding it a canvas:

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

Now we've got a xeokit Viewer set up and rendering on WebGL.

Now create a BIMServerClient, connected to our BIMServer:

const bimServerAPI = new BimServerClient("http://localhost:8082");

Add a BIMSServerModelsPlugin to our Viewer, configured with the BIMServerClient:

const bimServerModelsPlugin = new BIMServerModelsPlugin(viewer, {
    bimServerAPI: bimServerAPI
});

Initialize the BIMServerClient and login to the BIMServer:

bimServerAPI.init(() => {

    const username = "[email protected]";
    const password = "admin";

    bimServerAPI.login(username, password, () => {

With our project ID, use the BIMServerClient to find that project within BIMServer.

        const poid = 131073;

        bimServerAPI.call("ServiceInterface", "getProjectByPoid", {
            poid: poid
        }, (project) => {

Having found our project, we'll now use the BIMServerModelsPlugin to load the model for its latest revision into our Viewer. We're also going to provide these loading parameters:

  • scale to downsize the model, since it's very large and probably won't fit within the default xeogl perspective projection volume,
  • rotation to flip it 90 degrees, since this particular model is for a World coordinate system in which +Z is "up", and xeogl's "up" direction is the +Y axis by default,
  • edges:true to emphasize the model's edges, and
  • lambertMaterials:true to make xeogl render the model with fast Lambertian flat-shading, which is the default. When true, xeogl will render it with Blinn/Phong shading, which will show specular highlights, which is a bit slower for large models.
            const roid = project.lastRevisionId; // Get the latest revision ID
            const schema = project.schema;       // Get the model's schema

            const model = bimServerModelsPlugin.load({
                id: "myModel",
                poid: poid,
                roid: roid,
                schema: schema,
                scale: [0.001, 0.001, 0.001],    // Downside the model a bit
                rotation: [-90, 0, 0],           // Model has Z+ axis as "up"
                edges: true,                     // Emphasize edges
                lambertMaterials: true           // Fast flat shading (default)
            });

That's going to give us a new xeogl.Model instance.

Finally, using a callback that's fired when the xeogl.Model has loaded, fit the Viewer's xeogl.Camera to the model:

            const scene = viewer.scene;  // xeogl.Scene
            const camera = scene.camera; // xeogl.Camera

            model.on("loaded", () => {
                camera.orbitPitch(20);
                viewer.cameraFlight.flyTo(model);
                scene.on("tick", () => {
                    camera.orbitYaw(0.3);
                })
            });
        });
    });
});

Conclusion

We've loaded an IFC model