👩🏫 With what we have seen in other tutorials we already know how to select elements in 3D, access their properties and highlight them using subsets, which are parts of the whole model.
🚪🧱 However, in many BIM applications it is also possible to hide and isolate elements. A common use case is to hide all elements that do not comply with a certain filter or show only those objects belonging to a floor of the building.
🍰 Of course, this is a piece of cake using IFC.js. In this example we are going to create filters by category, so that the user can show or hide items using checkboxes.
👩🏫 Visibility in IFC.js is based on subset operations. This allows complex visualisations to be created with minimal memory usage. The first thing we are going to do is to define which IFC categories we are going to allow the user to show or hide.
📋📋📋 To save memory, categories in IFC.js are defined as numeric constants. So let's create an object that maps the name of those constants to their numeric value, and a function to retrieve them:
🏠⏩🚪 Now let's create a couple of functions to get all the IDs of the elements belonging to a category and create a subset with those IDs.
You can also use
removeFromSubset() to remove a single item from a subset (e.g. hide a single item). If you combine that with
removePrevious = false, you'll have full control of what is added to which subset and its visibility.
💻🧑 We will now create a simple GUI to allow the user to control which categories are visible or invisible. We are going to create a checkbox for each category of the BIM model we are working with.
💅 This can easily be done with a little HTML and CSS:
✨ Now it only remains to link the click event of each checkbox with the visibility of the corresponding category, so that when the checkbox is activated the category becomes visible and when it is deactivated it disappears.
🎨👨🎨 Here it is worth noting that to make the code more concise we have given each checkbox an ID with the same name as the category it links to.
😎 And here is the result:
🎉🎉🎉 Congratulations! Now you know how to control the visibility of elements using any filter.
web-ifc-three has even more functionality. For example, what if we want to open and close the viewer? Let's take a look at it next.