Skip to main content

🀏 Picking

Introduction#

πŸšΆβ€β™€οΈ Now that you're able to load models into your scene, we can jump into functionalities that make web-ifc-viewer really shine 🌟. Here we'll learn to make our models a little more interactive, using picking functions from the IFC.js API.

✌ Dig into the code and check out all the details about the selection component methods on Github.

How to do it#

Easy pickings#

πŸ‘©β€πŸ« Let's start out by using our πŸ–±οΈ mouse to highlight different parts of our model when hovered. Thankfully IFC.js makes it easy with the built in method prePickIfcItem().

window.onmousemove = () => viewer.IFC.selector.prePickIfcItem()

πŸ™Œ Under the hood web-ifc-viewer borrows the Raycaster from Three.js. And since IFC.js created the official IFCLoader for Three.js, it's a beautiful marriage!

Preserve the pick#

Now, let's use pickIfcItem() to preserve our selection and then center our model in the camera's view.

window.onclick = () => viewer.IFC.selector.pickIfcItem(true)

🧐 If you don't want to center the model, just leave the first argument of pickIfcItem() empty, which defaults to false.

If we go a step further and destructure the selection, we return information very useful in other IFC.js methods, such as getProperties().

window.onclick = async () => {
const {modelID, id} = await viewer.IFC.selector.pickIfcItem(true);
const props = await viewer.IFC.getProperties(modelID, id, true, false);
console.log(props);
}

Highlighting#

What if we wanted to isolate a certain part of our model and πŸ‘» hide the rest? This is where highlightIfcItem() comes in handy. We'll just attach it to the ondblclick event for now.

window.ondblclick = viewer.IFC.selector.highlightIfcItem(true)

Clear it up#

πŸ”™ Maybe we went a bit wild with our clicking and selecting. So let's call unpickIfcItems() and unHighlightIfcItems() to clear our doings with our C key ⌨️.

window.onkeydown = (event) => {
if(event.code === 'KeyC') {
viewer.IFC.selector.unpickIfcItems();
viewer.IFC.selector.unHighlightIfcItems();
}
}

Getting specific#

πŸ” In some situations, we may want to use our Express ID's to interact with the model in a different way. In this tutorial we'll add a simple button to let the user highlight a part of the model that isn't so easily visible.

Let's quickly add a button with some styling 🎨.

<button id="express_22492">Front Door</button>
<!-- style to your preference -->

🏷️ And finally specify our Express ID in the event handler πŸ–οΈ with the pickIfcItemsByID() method,

document.getElementById('express_22492')
.addEventListener('click', () => {
viewer.IFC.selector.pickIfcItemsByID(0, [22492], true);
})

The result#

πŸ–₯️ Here is an example of everything we've learned today: πŸ–₯️

Github repo

Next steps#

πŸŽ‰πŸŽ‰πŸŽ‰ Congrats! You now know how to pick and highlight your model in a handful of different ways. Now it's up to you to use the tools creatively in your own project!