-
Notifications
You must be signed in to change notification settings - Fork 2
Loading Models from BIMServer into xeokit
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).
To get a BIMServer instance running, follow the BIMServer Get Started Quick Guide.
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.
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. Whentrue
, 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);
})
});
});
});
});
We've loaded an IFC model