To start using the library you must include the bimct-viewer.css sylesheet library, the BIMEngine-Core.js and bimct-viewer.min.js javascript libraries in your html page:
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BimCT Renderer Example 1: Minimal Initialization and Loading</title>
<!-- Use BimCT Viewer (stylesheet) -->
<link
rel="stylesheet"
href="https://<path-to-server>/<client-id>/css/bimct-viewer.css"
/>
<!-- Use BimEngine wasm module without service workers (threads), you can also skip this line -->
<!-- and let bimct decide on the wasm version to use using the loadBimEngineScripts function shown below -->
<script src="https://<path-to-server>/<client-id>/wasm/no-threads32/BIMEngine-Core.js"></script>
<!-- Use BimEngine wasm module with service workers (threads), requires https and CORS setup -->
<!--<script src="https://<path-to-server>/<client-id>/wasm-threads/BIMEngine-Core.js"></script>-->
<script src="https://<path-to-server>/<client-id>/bimct-viewer.min.js"></script>
</head>
**NOTE:** You must replace the client-id with your REST-API client id. This will make sure that your libraries are registered and up-to-date.
First you will need a div in your HTML page that will contain the BimCT Viewer. You can embed the viewer anywhere in your HTML code and you don't need to take care of any tasks related to window resizing, all these will be taken care by the viewer. For this example we will use the div with id myViewer:
<body>
<div id="wrapper">
<!-- This will hold the viewer canvas element -->
<div id="myViewer"></div>
</div>
</body>
The following example shows a minimal initialization of the BimCT Viewer:
<script>
window.onload = async function () {
// Get a Reference to the div that will contain our renderer:
let element = document.getElementById("myViewer");
// You can also use the following code and remove the loading of BIMEngineCore.js from the <script> tag above
// This code will detect browser features and pick between wasm32 wasm64 and wasm-threads32 versions or according to preference:
//const preference = "wasm64"; // can alos use wasm32 and wasm-threads32
//loadBimEngineScripts("https://<path-to-server>/<client-id>/", preference);
// Step 1: Initialize the BIM Engine:
let options = { assetsPath: "https://<path-to-server>/<client-id>/" };
await bimctViewer.initializeBimEngineCore(options);
// Step 2: Initialize the Renderer with default options:
let renderer = new bimctViewer.BimCTWebGL2Renderer(element);
await renderer.init();
// Step 3: Begin the Draw Loop:
renderer.beginDrawLoop();
};
</script>
After you get a reference to myViewer HTMDivElement, the first step should be to initialize the wasm module. To do so you have to call bimctViewer.initalizeBimEngineCore(). The assetsPath is essential for loading the assets required by the out-of-the-box user interfaces provided.
Afterwards you must create a new renderer object. For now only BimCTWebGL2Renderer is supported but other implementations are planned for the future, such as a server-side rendering one.
Next yout can asynchronously initialize the new renderer using the init() function and to start the animation loop using the beginDrawLoop() function call.
**NOTE:** The BimCTWebGL2Renderer constructor requires that both height and width of the the HTMLDivElement must be non-zero either using html attributes or styling. Upon construction of the renderer, event listeners are registered so that resizing of the div will also resize the renderer. The second argument of the constructor is optional and allows customization of the renderers initialization.
To load (*.bimct) design models you can call the loadModelFromUrl method as shown below:
window.onload = async function () {
// Get a Reference to the div that will contain our renderer:
let element = document.getElementById("myViewer");
// Step 1: Initialize the BIM Engine:
await bimctViewer.initializeBimEngineCore();
// Step 2: Initialize the Renderer:
let renderer = new bimctViewer.BimCTWebGL2Renderer(element);
await renderer.init();
// Step 3: Load a Sample Model and get a list of model ids in the file
let modelIds = await renderer.loadModelFromUrl("House.bimct");
// or can also load And Cache the Model to the browser (for Models bigger than 20MB):
//let modelIds = await renderer.loadModelAndCache("House.bimct");
// Step 4: Start the Rendering Loop:
renderer.beginDrawLoop();
};
You can add more models to the scene using loadModelFromUrl. A full working example of the above code in this link.
You can set the initial visualization attributes of the viewer using the RendererInititializationOptions interface:
// Set the Initial Renderer Options using RendererInititializationOptions,
// see second paramerter on BimCTWebGL2Renderer
let renderOptions = {
/**
* The domain key to be used with the BimCT Server, if you dont set it the viewer will only run o localhost environments,
* a watermakr will be displayed on unlicensed domains.
* To get a domain key for a web application please contact BimCT Sales
*/
//key: '<your-domain-key>';
// Auto-pause the drawing loop after 5 seconds of inactivity:
ecoRenderingOn: true,
// Use a skymap ('grass', 'dessert' or null)
skymapId: "desert",
// Enable Sunlight (realistic shading mode only)
sunLight: true,
// Enable Shadows from Sunlight (realistic shading mode only)
shadowMaps: true,
// Key:
// key: 'per-domain-key-provided-to-unlock-trial-mode',
// Use BimCT UIs (can turn anything on off):
gui: {
useContextMenu: true, // right click menu
useToolbar: true, // bottom line toolbar
useLeftToolbar: true, // tools toolbar on the left
useHomeToolbar: true, // home toolbar (below camera cube)
useSettingsWindow: true, // settings window
useDesignTreeWindow: true, // design tree window
useSnapshotWindow: true, // snapshot/screenshots enabling window
useViewsWindows: true, // snapshot window
useMessageBoxes: true, // enable message oxes with messageBox function
usePropertiesWindow: true, // properties window
useFilterElementsWindow: true, // filter elements window
useTouchWidget: true, // use Touch 'Thumb Widget' on mobile devices
useWebXRWindow: true, // use window for showing and enabling WebXR (Virtual Reality)
useQuantitiesLabel: false, // show a label on the top left area of the screen when picking elements or faces or lines or measurements
//splashScreenImageURL: "https://<path-to-your-splash-screen0image>",
enableTransformButton: false, // enable transformations UI
viewsSavingOptions: {
includePins: true, // include pins while saving
includeSensors: true, // include sensors while saving
},
// appearence: { mainColor: "#217346" },
},
display: {
language: 'en', // set language of gui elements
},
linesOn: true, // Lines On or Off
hatchesOn: true, // Hatches On or Off (hatches usually exist on DWG drawing or Revit files)
//enhancedSilhouettes: false, // enable enahnced silhouettes
snappingEnabled: true, // use this to enable O-Snaps (slower opening on large models)
preloadProperties: false, // preload properties to the javascript memory (warn increases memory)
measurementSystem: bimctViewer.MEASUREMENT_SYSTEM.METRIC, // either imperial (USA) or metric (Rest of World)
shading: bimctViewer.SHADING_MODE.REALISTIC_MODE, // To enable textures sun and shadows (slower on huge files)
logging: {
// Enable BimCT logging
console: {
comments: false,
debug: false,
errors: true,
warnings: true,
},
},
maps: {
//allowed: {"bing", "osm", "google", "esri"},
default: { server: "esri", type: "satellite" },
//google: {
// apiKey: "<google-api-key>",
//},
terrain: {
// mapTiler: {
// apiKey: "<map-tiler-api-key>",
// },
//nomitech: {
// hostUrl: "<nomitech-terrain-server-url>"
//}
},
search: {
service: "nominatim", // either nominatim or google
//apiKey: "<google-api-key>", // for google location search service
allowDetectUserLocation: true, // click to find current location
}
}
};
// Now pass renderOptions as second parameter to initialize with these rendering options:
let renderer = new bimctViewer.BimCTWebGL2Renderer(element, renderOptions);
Then you can pass this interface as the second parameter of the BimCTWebGL2Renderer constructor.
To unload a model just call unloadModel and provide the model id of the model you want to unload, or call unloadAll to unload all models:
// Get the ids of the loaded model
// (can be more than one model in the file)
let ids = await renderer.loadModelFromUrl("House.bimct");
// Loop model ids:
for (id of ids) {
// Remove model:
await renderer.unloadModel(id);
}
// or simply unload everything:
// await renderer.unloadAll();
To destroy the renderer and all html elements that it has created you can call destroy.
You can download a full working example from here, or you can see it live here.
You can take a look at our Examples Page to see how you can do more with BimCT Viewer.