Skip to main content

Introduction

BIM is not only geometry...#

...but it has geometry.

💪 Web-ifc is a very powerful tool capable of reading and writing IFCs with near-native speed. However, almost all BIM applications show the user a 3D view of the models they are working with. You could use web-ifc in any graphics engine, but we have already done that for you in web-ifc-three.

🧶 web-ifc-three is a wrapper around web-ifc that reads all data from IFC files and transforms it into geometry that can be displayed and edited in any browser. You can install it with npm i web-ifc-three or yarn add web-ifc-three. Some cool facts about this module:

🐣 It's super easy to use.

🚀 It's very efficient, being able to display thousands of objects at 60 fps in a browser. It can display multiple models, change materials and filter items.

🧠 It can get and traverse the spatial structure tree of multiple files. Also, it can access the properties of all the items, both clicking on them in the 3d view and with smart filters.

🎓 In the following points, the API and its functionalities will be shown step by step. However, there are a couple of issues that are important to be clear about before using web-ifc-three.

Can I use web-ifc directly?#

With web-ifc you could build almost any BIM tool capable of reading and writing IFC. So why create a layer on top of it?

🤷‍♀️ Because almost all BIM tools are 3D, and we think it would not make sense for all developers to implement a viewer from scratch. If you are only interested in the data, you may be better off using web-ifc directly.

In addition, web-ifc-three makes working with IFCs much easier and safer even for the developer who has no previous experience with the format.

Can I use the THREE.IFCLoader directly?#

👬 As mentioned above, web-ifc-three is the official IFCLoader of Three.js. That is, if you import the IFCLoader from Three.js, the code will be the same as the code you will find in the web-ifc-three repository.

🚧 You might be tempted to import the IFCLoader from Three.js to avoid importing web-ifc-three in your project. This should work, but beware that Three.js is a very large library, and its update rate is much slower than that of IFC.js.

Slight delay

Three.js IFCLoader may not have the latest updates and the latest bugs we have fixed will remain unresolved in Three.js until the next version is released.

To use the THREE.IFCLoader instead of the original IFCLoader you only have to change the import statement:

// Import web-ifc-three (original) IFCLoader
import {
IFCLoader
} from "web-ifc-three/IFCLoader";
// Import three.js IFCLoader
import {
IFCLoader
} from "three/examples/jsm/loaders/IFCLoader";