# All Together  Wow

We should have something like this. Please note that this only an example. Take a look at the actual [source code](https://github.com/andrewisen/IFC.js-web-worker-example) to see a working example.

{% tabs %}
{% tab title="index.html" %}
```markup
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href="../resources/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="./assets/css/styles.css" />
    <script src="../libs/three.js"></script>
    <script src="../libs/smooth-zoom.js"></script>
    <title>IFC.js</title>
  </head>
  <body>
    <div id="loading" class="loaderBackground">
      <div class="loader"></div>
    </div>
    <div id="generalContainer">
      <div id="GUI">
        <input readonly type="file" id="openFileDialog" />
        <button
          class="normalButton"
          onclick="document.getElementById('openFileDialog').click();"
        >
          Open
        </button>
      </div>
      <canvas id="c"></canvas>
    </div>
    <script src="../libs/chevrotain.min.js"></script>
    <script src="../libs/OrbitControls.js"></script>
    <script type="module" src="main.js"></script>
  </body>
</html>
```
{% endtab %}

{% tab title="main.js" %}
```javascript
import { buildGeometry, mainObject } from '../../build/IFC.geometry.module.js';
import { scene } from './three-scene.js';

export function readIfcFile() {...}

function readFile(input) {
  const reader = new FileReader();
  reader.onload = () => {
    toggleLoader();
    const ifcWorker = new Worker('worker/worker.js'); 
    ifcWorker.postMessage(reader.result); 
    ifcWorker.onmessage = function (e) {
      let structured = e.data; 
      structured.MainObject = mainObject; 
      structured = buildGeometry(structured);
      scene.add(structured.MainObject);
      toggleLoader();
    };
  };
  reader.readAsText(input.files[0]);
}


function toggleLoader() {...}

readIfcFile();
toggleLoader();
```
{% endtab %}

{% tab title="worker.js" %}
```javascript
importScripts('../libs/chevrotain.min.js');
importScripts('../../build/IFC.workerr.js');
onmessage = (e) => {
    const ifcData = e.data; 
    const loaded = IFCjs.loadIfcFileItems(ifcData);
    const structured = IFCjs.constructProject(loaded);
    postMessage(structured);
};
```
{% endtab %}
{% endtabs %}

