Shopfloor Viewer

IFC web viewer focused on custom property sets, using IFC.js and Svelte.

Description

Simple IFC viewer with the ability to select the parts which need to be assembled, per workstation. As this is set in a custom property set, this can be adjusted to filter on a different custom property.

Getting Started

Dependencies

This app is built using web-ifc-viewer, which depends on web-ifc-three, web-ifc, and three.

Install

Clone this repository and run npm i. During development npm run dev will serve the web application locally. For production, npm run build will serve all the files in the public folder. These files can then be uploaded to a server, as Svelte compiles to vanilla js.

Contents

• src/App.svelte: IFC viewer and the logic behind it
• src/Icon.svelte: Component to serve icons dynamically
• src/Help.svelte: Component which creates the 'help' overlay [IN PROGRESS]
• public/global.css: Styling of the viewer

Functionalities and future implementations

• IFC viewer: geometry and data
• Creating subsets based on custom property
• Isolating an element
• Hiding one/multiple element(s), even on subsets
• 3D clipping planes
• Showing transparent elements of previous workstations
• Custom Property menu: only gives select, necessary information from a custom pset
• Measurement with snap functionality
• Help menu overlay
• Ability to select path for custom properties?
• Adding mapbox integration?

Authors

Stijn Nijhuis @Nomeon

Acknowledgments

Inspiration, code snippets, etc.

• IFC.js
• Francesca's viewer