⚡ Creating a BIM application with IFC.js is very easy. You can find the complete project of the guide here and the deployed application here. You only need to have Node.js and any IDE installed to follow the steps below. Also, if you don't have any IFC files to follow along, you can get some here.
The first thing to do is to create an empty folder and start a new npm project with the command
npm init. This will generate a
package.json file containing some data such as the project name, version, commands and dependencies. In addition, the following dependencies must be installed with npm:
The next step is to create an HTML file named
index.html as the main document of the application. The HTML will have:
- A canvas element, used to render the Three.js scene.
- An input element, which will open IFC files from our computer to the application.
- A script referencing a file called
bundle.js, which is the bundle of the app that we will produce with rollup.
🎨 The following CSS file will make the canvas full screen:
Next, we'll create the rollup configuration file. This file has to be called
rollup.config.js and includes the reference to the plugins we have previously installed.
package.json file needs to be modified to contain the commands to control rollup easily. In each command, you'll have to specify the relative path to your rollup configuration file. If we have installed everything correctly, we should see the same dependencies in this file (the version of the libraries may differ).
npm run buildwill bundle the project and create a file called
bundle.jsin the root directory of the project.
npm run watchwill activate the
watch mode, updating that file automatically every time we make changes to the code and save it.
The next thing to do is to copy the
web-ifc-mt.wasm files to a directory in your project. It can be found in
node_modules\three\examples\jsm\loaders\ifc if you are only using Three's IFCLoader). We can copy them wherever we want; in this example, they will be copied to a folder called wasm in the root directory of the project.
These files are necessary because they contain the compiled C++ logic of web-ifc, which is the parsing core to read and write IFC files with native speed.
🧱 We are going to create a basic 3D scene using Three.js.
🌏 To run the application locally we will need a local server. If you are using VS Code as IDE, one option is to install the Live Server extension, which allows us to open an instance of Google Chrome, run our web application and see the changes we make to the code in real-time.
🏠 Finally, we will use IFC.js to load IFC files. This can be done by instantiating the loader and creating an event for when the user uploads an IFC file to the HTML input element.
Keep in mind that if you haven't saved the wasm files in the root of served files of the project, you'll need to specify its location with
setWasmPath. For instance, if we had them stored in a folder called
wasm contained in a folder called
static in the root of the project, we would do the following:
If you have done everything correctly, you should be able to see something similar to this in your local server. From here, the possibilities are endless.
🤔 In the previous point we saw how to load BIM models directly, and that's great. What if we want to show our BIM models instead of allowing the user to upload theirs? This is very simple. Generally there are two possibilities:
Having the IFC in the same application where you want to display it.
Having to get it from an external storage service.
🎩 In the first case, it is sufficient to reference the URL of the IFC file. That is, its relative path in the application. For example, if the IFC is in a folder called "models" in the root of the project, we could load that IFC when starting the application as follows:
🎉 Congratulations! You have just created your first IFC viewer. Go to the next pages of the docs to find out what else can you do with IFC.js.