Skip to main content

Hello world

Introduction#

⚡ 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.

🐣 This minimal tutorial will be done with Vanilla JavaScript, without using frameworks like React, Vue, Angular, Svelte, etc. However, the same steps can be adapted and applied to any of these use cases.

Setting up the project#

Install libraries#

👩‍🏫 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:

//Install IFC.js
npm i web-ifc-three
// Install Three.js
npm i three
// Install a bundler: we will use rollup.js for this guide
npm i rollup --save-dev
npm i @rollup/plugin-node-resolve --save-dev

📝 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.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<title>Document</title>
</head>
<body>
<input type="file" name="load" id="file-input" />
<canvas id="three-canvas"></canvas>
<script src="bundle.js"></script>
</body>
</html>

Adding style#

🎨 The following CSS file will make the canvas full screen:

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
overflow: hidden;
}
#three-canvas {
position: fixed;
top: 0;
left: 0;
outline: none;
}
#file-input {
z-index: 1;
position: absolute;
}

Bundling#

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.

Rollup?

Rollup is a very popular bundling library. For instance, it's the bundler used by Three.js. Take a look at the rollup docs to learn more.

import resolve from "@rollup/plugin-node-resolve";
export default {
input: "src/app.js",
output: [
{
format: "esm",
file: "src/bundle.js",
},
],
plugins: [resolve()],
};

🎯 Also, the 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 build will bundle the project and create a file called bundle.js in the root directory of the project.

  • npm run watch will activate the watch mode, updating that file automatically every time we make changes to the code and save it.

{
"name": "example",
"version": "1.0.0",
"description": "-",
"main": "app.js",
"scripts": {
"build": "rollup -c ./rollup.config.js",
"watch": "rollup -w -c ./rollup.config.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@rollup/plugin-node-resolve": "^11.2.1",
"rollup": "^2.45.2"
},
"dependencies": {
"three": "^0.128.0",
"web-ifc-three": "0.0.102"
}
}

WebAssembly#

📁 The next thing to do is to copy the web-ifc.wasm and web-ifc-mt.wasm files to a directory in your project. It can be found in node_modules\web-ifc (or 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.

Setting up a 3D scene#

Finally, we are going to create the JavaScript file to write the code for our application. This file can be located anywhere and have any name, but you must reflect this in the rollup.config.js.

🧱 We are going to create a basic 3D scene using Three.js.

import { AmbientLight, AxesHelper, DirectionalLight, GridHelper, PerspectiveCamera, Scene, WebGLRenderer } from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
//Creates the Three.js scene
const scene = new Scene();
//Object to store the size of the viewport
const size = {
width: window.innerWidth,
height: window.innerHeight,
};
//Creates the camera (point of view of the user)
const aspect = size.width / size.height;
const camera = new PerspectiveCamera(75, aspect);
camera.position.z = 15;
camera.position.y = 13;
camera.position.x = 8;
//Creates the lights of the scene
const lightColor = 0xffffff;
const ambientLight = new AmbientLight(lightColor, 0.5);
scene.add(ambientLight);
const directionalLight = new DirectionalLight(lightColor, 1);
directionalLight.position.set(0, 10, 0);
directionalLight.target.position.set(-5, 0, 0);
scene.add(directionalLight);
scene.add(directionalLight.target);
//Sets up the renderer, fetching the canvas of the HTML
const threeCanvas = document.getElementById("three-canvas");
const renderer = new WebGLRenderer({
canvas: threeCanvas,
alpha: true,
});
renderer.setSize(size.width, size.height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
//Creates grids and axes in the scene
const grid = new GridHelper(50, 30);
scene.add(grid);
const axes = new AxesHelper();
axes.material.depthTest = false;
axes.renderOrder = 1;
scene.add(axes);
//Creates the orbit controls (to navigate the scene)
const controls = new OrbitControls(camera, threeCanvas);
controls.enableDamping = true;
controls.target.set(-2, 0, 0);
//Animation loop
const animate = () => {
controls.update();
renderer.render(scene, camera);
requestAnimationFrame(animate);
};
animate();
//Adjust the viewport to the size of the browser
window.addEventListener("resize", () => {
size.width = window.innerWidth;
size.height = window.innerHeight;
camera.aspect = size.width / size.height;
camera.updateProjectionMatrix();
renderer.setSize(size.width, size.height);
});

🌏 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.

Loading IFC files#

Loading user's models#

🏠 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.

import { IFCLoader } from "web-ifc-three/IFCLoader";
// Sets up the IFC loading
const ifcLoader = new IFCLoader();
const input = document.getElementById("file-input");
input.addEventListener(
"change",
(changed) => {
const file = changed.target.files[0];
var ifcURL = URL.createObjectURL(file);
ifcLoader.load(ifcURL, (ifcModel) => scene.add(ifcModel));
},
false
);

🎣 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:

ifcLoader.ifcManager.setWasmPath("static/wasm/");

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.

Loading our models#

🤔 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:

ifcLoader.load("models/Example_model.ifc", (ifcModel) => scene.add(ifcModel));

Conclusion#

🎉 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.

What else can I do with IFC.js?

This is just the beginning. You can take a look at web-ifc-viewer, which includes tools for object selection, changing geometry appearance, section planes and much more. You can try it here.