xeokit / SDK Examples

npm version

These examples demonstrate various features of the xeokit SDK, that you can use to build your own custom applications for viewing models in the Browser. For an idea of what you can build with xeokit, also check out some live examples of xeokit's bundled BIMViewer.

We reorganized these SDK examples in v2.4. Find the old examples index here.


Viewing Models


Thumbnail 1

Viewing Building Models

Using the xeokit SDK to view building models loaded from IFC, glTF and XKT.
Thumbnail 2

Viewing City Models

Using the xeokit SDK to view city models loaded from glTF, CityJSON, CityGML and XKT.
Thumbnail 3

Viewing LiDAR Scans

Using the xeokit SDK to view LiDAR scans loaded from LAS, LAZ, glTF and XKT.
Thumbnail 1

Viewing CAD Models

Using the xeokit SDK to view CAD models loaded from 3DXML, glTF, STL and XKT.
Thumbnail 3

Navigating Models

Components for navigating models: TreeView, NavCube, ContextMenu, AxisGizmo, CameraControl, CameraPathAnimation etc.
Thumbnail 3

Bookmarking Model Views

Saving and loading bookmarks, including how to exchange Building Collaboration Viewpoints (BCF) with other BIM software.
Thumbnail 3

Capturing Snapshots

How to capture JPEG and PNG snapshots of a xeokit SDK viewer.
Thumbnail 3

Customizing the Viewer

Configuring language translations, customizing the loading spinner, enabling ambient shadows, enabling the logarathmic depth buffer, and more.
Thumbnail 3

Accelerating Performance

How to make the xeokit SDK viewer work at peak performance, using view frustum culling, LoD culling, resolution scaling and more.


Interacting with Objects


Thumbnail 1

Measuring Objects

Measuring angles and distances on models.
Thumbnail 3

Slicing Objects

Slicing models with interactive section planes to reveal internal structures.
Thumbnail 3

Picking Objects

How to pick objects in a xeokit Viewer, interactively or programmatically.
Thumbnail 2

Emphasising Objects

Changing the appearance of selected objects: colorizing, highlighting and X-raying.
Thumbnail 3

Labelling Objects

Pinning fully-customizable HTML labels to the surfaces of model objects.


Programming Scene Content


Thumbnail 2

SceneModel Examples

Low-level programming examples and tests for xeokit's high-performance model representation. Use these to build custom model loaders. Also useful to debug model viewing issues.
Thumbnail 2

Scene Graph Examples

Creating custom scene elements using xeokit's scene graph; materials, transforms, geometries, billboards, sprites and more. Use these to build custom viewer gizmos.