cesium-ifc-viewer

‹cesium-ifc-viewer› Web Component

An exploratory ‹cesium-ifc-viewer› Web Component, which adds an IFC datasource to a Cesium scene. Built with Cesium.js, IFC.js and LitElement.

Status

MVP quality. Package was built during a hackathon: it worked, we shipped it, to showcase and collect feedback. Not intended for production use.

Features

• Drag & drop IFC file to import it;
• View the imported IFC model in the Cesium 3D canvas;
• Highlight IFC model parts on mouse hover;
• Tooltip with level and category names, while hovering model parts;
• Pick a model part (only shows Cesium's InfoBox with its ID so far);
• Custom data attribution dialog.

How does it work?

Essentially based on IFC.viewer.GLTF.exportIfcFileAsGltf:

1. uses IFC API to import the file;
2. IFC THREE to export to GLTF in-memory (ugh);
3. then import in Cesium as Entities.

Installation

Available on GitHub Packages as @uzufly/cesium-ifc-viewer.

npm install

Usage

Script

Import as ES modules:

import '@uzufly/cesium-ifc-viewer'
import '@uzufly/cesium-ifc-viewer-data-attribution'

And use with such HTML code:

<cesium-ifc-viewer
  id="mainViewer"
  cesium-base-url="/static/" ifc-base-url="../../static/"
  ion-access-token="‹CESIUM_ION_ACCESS_TOKEN›"
  model-origin="[ 6.137499506, 46.192506022, 425.999 ]"
  model-orientation="[ 90, 0, 0 ]"
  clamp-to-ground>
</cesium-ifc-viewer>

<cesium-ifc-viewer-data-attribution for="mainViewer">
</cesium-ifc-viewer-data-attribution>

Further work

There are many opportunities to optimize this codebase:

• cleanup the code, namely check if there would be opportunity to reduce the number of BLOBs created with createObjectURL() hanging around;
• fix the odd web-ifc/web-ifc-three/web-ifc-viewer version mix, that was introduced to fix incompatible web-ifc-viewer and web-ifc peer deps at time of writing (see IFCjs/web-ifc-viewer#188);
• run the transform of IFC models to Cesium Entities off main thread, in a Web Worker;
• exploit upcoming IFCjs/fragment library;
• build the IFC geospatial model and link it to the Cesium entites.

Browser support

Browsers without native custom element support require a polyfill.

• Chrome
• Firefox
• Safari
• Microsoft Edge

License

Distributed under the Apache-2.0 license. See LICENSE for details.