Basic implementation

Please read about the requirements first.

This page does contain some pseudo code, it is based on this example. Please don't copy/paste from here and come complaining about syntax errors because you didn't fill in the username variable.

Load your code as a JavaScript Module

Make sure your code is loaded as JavaScript Module. This means that the script tag should have a type="module".

Import required modules

The following code assumes that the BIMserver JavaScript API has been installed on the localhost:8080 BIMserver. Obviously you can simply include the API modules in your own project as well.

import {BimServerClient} from "path to /bimserverclient.js"
import {BimServerViewer} from "path to /bimserverviewer.js"

BimServerClient is a generic client to communicate with BIMserver, BimServerViewer is what we instantiate to get a viewer.

Connect to a BIMserver API and authenticate

In most cases, your application probably already have done this, if it's doing other stuff with BIMserver.

var api = new BimServerClient("[ADDRESS OF A BIMSERVER]");
api.init(() => {
  api.login([USERNAME], [PASSWORD], () => {
    // So now authentication has succeeded, make sure that for a real implementation you also check for errors
    
  });
});

Load a model

// Get the project details
this.api.call("ServiceInterface", "getProjectByPoid", {
	poid: [YOU NEED TO KNOW THE POID OF THE PROJECT TO LOAD]
}, (project) => {
	// Select what canvas to bind the viewer to, this canvas has to exist (add it to your html or create it dynamically)
	var canvas = document.getElementById("glcanvas");
					
	// Create a new BimServerViewer
	var bimServerViewer = new BimServerViewer(api, settings, canvas, window.innerWidth, window.innerHeight);

	// Load the model
	this.bimServerViewer.loadModel(project);
});

If you do not want the viewer to be fullscreen, the last two arguments is what you change.