xeokit-sdk-v0.2.0-beta
Pre-release
Overview
This xeokit SDK v0.2.0 release contains new plugins for creating section planes, annotating models and navigating the camera, along with model loading enhancements and bug fixes. The core viewer API is now stable, so now development focuses on more plugins for BIM and CAD.
Contents
New Plugins
SectionPlanesPlugin
Use the SectionPlanesPlugin to create and edit SectionPlanes, to slice portions off your models to reveal internal structures.
The SectionPlanesPlugin displays an overview of your SectionPlanes in a separate canvas. Click the planes in the overview canvas to activate a 3D editing control with which you can interactively reposition them in the Viewer canvas.
const sectionPlanes = new SectionPlanesPlugin(viewer, {
overviewCanvasId: "mySectionPlanesOverviewCanvas",
overviewVisible: true
});
sectionPlanes.createSectionPlane({
id: "mySectionPlane",
pos: [1.04, 1.95, 9.74],
dir: [1.0, 0.0, 0.0]
});
sectionPlanes.createSectionPlane({
id: "mySectionPlane2",
pos: [2.30, 4.46, 14.93],
dir: [0.0, -0.09, -0.79]
});
const mySectionPlane2 = sectionPlanes.sectionPlanes["mySectionPlane2"];
mySectionPlane2.pos = [11.0, 6.-, -12];
mySectionPlane2.dir = [0.4, 0.0, 0.5];AnnotationsPlugin
Use the AnnotationsPlugin to pin Annotations on your models. Annotations are fully customizable with HTML templates, can be dynamically updated with data, and can automatically hide themselves when occluded. Optionally associate each Annotation with a camera position to fly to.
- Run example: Click annotation to fly to viewpoint
- Run example: Click objects to create annotations
- Run example: Hover annotations to show labels
- Run example: Click annotations to toggle labels
- Read API docs
const annotations = new AnnotationsPlugin(viewer, {
markerHTML: "<div class='annotation-marker' style='background-color:\
{{markerBGColor}};'>{{glyph}}</div>",
labelHTML: "<div class='annotation-label' style='background-color:\
{{labelBGColor}};'><div class='annotation-title'>{{title}}</div>\
<div class='annotation-desc'>{{description}}</div></div>",
values: {
markerBGColor: "red",
labelBGColor: "white",
glyph: "X",
title: "Untitled",
description: "No description"
}
});
annotations.createAnnotation({
id: "myAnnotation1",
entity: viewer.scene.objects["2O2Fr$t4X7Zf8NOew3FLOH"],
worldPos: [2.039, 4.418, 17.965],
occludable: true,
markerShown: true,
labelShown: false,
values: {
glyph: "A1",
title: "Front wall",
description: "This is the front wall",
markerBGColor: "green"
}
});NavCubePlugin
Use the NavCubePlugin to position the camera to look at your models along the coordinate axii and diagonals, to easily obtain axis-aligned and isometric views. Rotate the NavCube to orbit the camera. Orbit the camera and see the NavCube rotate in synch.
const navCube = new NavCubePlugin(viewer, {
canvasID: "myNavCubeCanvas",
visible: true, // Initially visible
size: 250, // NavCube size in pixels
alignment: "topRight", // Align NavCube to top-right
topMargin: 170, // 170 pixels margin from top
cameraFly: true, // Fly camera to each axis/diagonal
cameraFitFOV: 45, // How tightly camera fits
cameraFlyDuration: 0.5 // How long camera takes to fly
});PlanViewsPlugin
PlanViewsPlugin is an experimental plugin that automatically generates plan view bitmaps from IfcStorey elements within BIM models. So far this just generates the bitmaps, with no interactivity. We'll work that out from user feedback.
const planViews = new PlanViewsPlugin(viewer, {
size: [220, 220],
format: "png",
ortho: true
});
model.on("loaded", function () {
const planViewIds = Object.keys(planViews.planViews);
for (var i = 0, len = planViewIds.length; i < len; i++) {
const planViewId = planViewIds[i];
const planView = planViews.planViews[planViewId];
const aabb = planView.aabb; // Boundary of storey elements
const modelId = planView.modelId; // "myModel"
const storeyObjectId = planView.storeyObjectId; // ID of IfcBuildingStorey
const snapshotData = planView.snapshotData;
//...
}
});Enhancements
Streamed Loading Support
xeokit's high-performance model representation now supports incremental loading, which allows users to interact with models while they load.
This capability is supported through the addition of tiles to the PerformanceModel component, which can partition a model into tiles, allowing users to interact with each tile as soon as it's loaded, while loading other tiles in the background.
This capability was initially introduced to support the development of a proprietary loader for a client, which streams content into a xeokit viewer through a WebSocket.
Incremental glTF Loading
GLTFLoaderPlugin can use the PerformanceModel tiles (see previous item) to load glTF models incrementally, while the user interacts with them.
Prioritized glTF BIM Loading
GLTFLoaderPlugin can now prioritize loading of objects based on their IFC types, while at the same time allowing the user to interact with the model as it loads.
GLTFLoaderPlugin achieves this using the PerformanceModel's new "tiles" feature (see previous item), loading the most interesting IFC types in one tile, loading next-most-interesting types in the next tile, and so on.
The screen capture below shows how we can load visually-important elements like "IfcWall", "IfcFloor" and "IfcRoof" first, so that the user has those to interact with while we load less visually-important elements like "IfcDuctSegment", "IfcAirFlowTerminal", and so on.
Configuring a Custom glTF Data Source
GLTFLoaderPlugin can now be configured with a custom data source object, enabling us to customize the way it loads glTF, binary attachments and JSON IFC metadata.
This was requested by two clients who are each embedding a xeokit Viewer in a C# runtime, which manages the persistence of the file data.
3D Picking for High Performance Models
xeokit now supports 3D picking of entities within its high performance model representation. This was already supported for entities in the the standard scene graph representation, but required its own special algorithms to work with the huge models rendered by the high-performance representation.