Some refactoring; add @thatopen/components-front

bim.js

@@ -0,0 +1,84 @@
+import * as THREE from 'three';
+import * as OBC from 'openbim-components';
+import * as WEBIFC from 'web-ifc';
+
+/**
+ * @namespace BIM
+ */
+const BIM = {};
+
+/**
+ * 
+ * @param {HTMLElement} container The scene container element
+ * @returns {object} {components, world}
+ */
+BIM.init = function (container) {
+    const components = new OBC.Components();
+    const worlds = components.get(OBC.Worlds);
+
+    const world = worlds.create();
+    
+    world.scene = new OBC.SimpleScene(components);
+    world.renderer = new OBC.SimpleRenderer(components, container);
+    world.camera = new OBC.SimpleCamera(components);
+
+    // Starts the app and updates components at 60 fps
+    components.init();
+    this.world = world;
+    this.components = components;
+}
+/**
+ * @param {HTMLElement} container The scene container element
+ * @returns {OBC.Components}
+ */
+BIM.createScene = function (container) {
+    this.init(container);
+    this.world.scene.setup();
+    // Add a grid to the scene
+    const grids = this.components.get(OBC.Grids);
+    const grid = grids.create(this.world);
+    // (zoom_level, position)
+    this.world.camera.controls.setLookAt(15, 15, 15, 0, 0, 0);
+}
+/**
+ * @todo Serve web-ifc.wasm locally via AJAX
+ * @param {OBC.Components} components 
+ * @param {ArrayBuffer} buffer The uploaded IFC file 
+ */
+BIM.loadIfc = async function (buffer) {
+    const fragments = this.components.get(OBC.FragmentsManager);
+    // Clean memory before uploading new file
+    fragments.dispose();
+
+    const fragmentIfcLoader = this.components.get(OBC.IfcLoader);
+    // NOTE: loads web-ifc WASM from https://unpkg.com/web-ifc@0.0.53/
+    //await fragmentIfcLoader.setup();
+    fragmentIfcLoader.settings.wasm = {
+      path: "./vendor/web-ifc/",
+      absolute: false
+    };
+    // Excludes IFC categories from the fragment
+    const excludedCats = [
+        WEBIFC.IFCTENDONANCHOR,
+        WEBIFC.IFCREINFORCINGBAR,
+        WEBIFC.IFCREINFORCINGELEMENT,
+    ];
+
+    for (const cat of excludedCats) {
+        fragmentIfcLoader.settings.excludedCategories.add(cat);
+    }
+
+    fragmentIfcLoader.settings.webIfc.COORDINATE_TO_ORIGIN = true;
+    fragmentIfcLoader.settings.webIfc.OPTIMIZE_PROFILES = true;
+
+    const model = await fragmentIfcLoader.load(buffer);
+    model.name = "Test";
+    this.world.scene.three.add(model);
+
+    // Useful?
+    this.fragments = fragments;
+
+    return model;
+}
+
+export default BIM;

main.js

@@ -6,7 +6,7 @@ document.addEventListener('DOMContentLoaded', () => {
     const container = document.querySelector('#scene');
 
     UI.setScene(container);
-    UI.ifcLoader('ui');
+    UI.ifcLoader();
 
     // Creates a cube with three.js
     /*

package.json

@@ -1,6 +1,7 @@
 {
   "dependencies": {
     "@thatopen/components": "^2.0.1",
+    "@thatopen/components-front": "^2.0.2",
     "@thatopen/fragments": "^2.0.0",
     "lit": "^3.1.3",
     "three": "^0.164.1",

ui.js

@@ -1,105 +1,26 @@
 'use strict';
 
-import * as THREE from 'three';
+import BIM from './bim.js';
-import * as OBC from 'openbim-components';
-import * as WEBIFC from 'web-ifc';
-
-/**
- * @namespace Actions
- */
-const Actions = {};
-
-/**
- * 
- * @param {HTMLElement} container The scene container element
- * @returns {object} {components, world}
- */
-Actions.init = function (container) {
-    const components = new OBC.Components();
-    const worlds = components.get(OBC.Worlds);
-
-    const world = worlds.create();
-    
-    world.scene = new OBC.SimpleScene(components);
-    world.renderer = new OBC.SimpleRenderer(components, container);
-    world.camera = new OBC.SimpleCamera(components);
-
-    // Starts the app and updates components at 60 fps
-    components.init();
-    this.world = world;
-    this.components = components;
-}
-/**
- * @param {HTMLElement} container The scene container element
- * @returns {OBC.Components}
- */
-Actions.createScene = function (container) {
-    this.init(container);
-    this.world.scene.setup();
-    // Add a grid to the scene
-    const grids = this.components.get(OBC.Grids);
-    const grid = grids.create(this.world);
-    // (zoom_level, position)
-    this.world.camera.controls.setLookAt(15, 15, 15, 0, 0, 0);
-}
-/**
- * @todo Serve web-ifc.wasm locally via AJAX
- * @param {OBC.Components} components 
- * @param {ArrayBuffer} buffer The uploaded IFC file 
- */
-Actions.loadIfc = async function (buffer) {
-    const fragments = this.components.get(OBC.FragmentsManager);
-    // Clean memory before uploading new file
-    fragments.dispose();
-
-    const fragmentIfcLoader = this.components.get(OBC.IfcLoader);
-    // NOTE: loads web-ifc WASM from https://unpkg.com/web-ifc@0.0.53/
-    //await fragmentIfcLoader.setup();
-    fragmentIfcLoader.settings.wasm = {
-      path: "./vendor/web-ifc/",
-      absolute: false
-    };
-    // Excludes IFC categories from the fragment
-    const excludedCats = [
-        WEBIFC.IFCTENDONANCHOR,
-        WEBIFC.IFCREINFORCINGBAR,
-        WEBIFC.IFCREINFORCINGELEMENT,
-    ];
-
-    for (const cat of excludedCats) {
-        fragmentIfcLoader.settings.excludedCategories.add(cat);
-    }
-
-    fragmentIfcLoader.settings.webIfc.COORDINATE_TO_ORIGIN = true;
-    fragmentIfcLoader.settings.webIfc.OPTIMIZE_PROFILES = true;
-
-    const model = await fragmentIfcLoader.load(buffer);
-    model.name = "Test";
-    this.world.scene.three.add(model);
-
-    return fragments;
-}
 
 /**
  * @namespace UI
  */
 const UI = {};
-
 /**
  * 
  * @param {HTMLElement} container The scene container element
  */
 UI.setScene = function (container) {
-    Actions.createScene(container);
+    BIM.createScene(container);
 }
 /**
- * @param {string} uiContainer The UI div's id
+ * @param {string} btnId The loading button's id
  */
-UI.ifcLoader = function () {
+UI.ifcLoader = function (btnId = 'load-ifc') {
-    const loadBtn = document.querySelector(`#load-ifc`);
+    const loadBtn = document.querySelector(`#${btnId}`);
     loadBtn.onchange = async function () {
         const files = this.files;
-        Actions.loadIfc(new Uint8Array(await files[0].arrayBuffer()));
+        BIM.loadIfc(new Uint8Array(await files[0].arrayBuffer()));
     }
 };
 

yarn.lock

@@ -14,7 +14,19 @@
   dependencies:
     "@lit-labs/ssr-dom-shim" "^1.2.0"
 
-"@thatopen/components@^2.0.1":
+"@thatopen/components-front@^2.0.2":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@thatopen/components-front/-/components-front-2.0.2.tgz#c1f41b37b5f992615ee3e0ec851a6faad6db192e"
+  integrity sha512-O3zVhMchlY0hI6VGmeeawCKS7pISEvkzDWyGNYlejPbjf7kPi0l1adsxwQDW4wVBl53rpBqjsBtBAC+s421F6g==
+  dependencies:
+    "@thatopen/components" "2.0.1"
+    camera-controls "2.7.3"
+    dexie "^4.0.4"
+    earcut "^2.2.4"
+    n8ao "1.5.1"
+    postprocessing "6.34.2"
+
+"@thatopen/components@2.0.1", "@thatopen/components@^2.0.1":
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/@thatopen/components/-/components-2.0.1.tgz#b172057612263ee819ec546071b6d4b153685377"
   integrity sha512-Nz+vRM24HucIQ3Sl1gD1r3nsNIg9JG19p0bAC6Gz/lhYEg8tjLXRFrKRIu7agiNpJlRGw0jfSm1xBxmmzmFfOw==
@@ -40,6 +52,16 @@ camera-controls@2.7.3:
   resolved "https://registry.yarnpkg.com/camera-controls/-/camera-controls-2.7.3.tgz#99e0449f68d203bf5f98f6c4ac0021c10b5c13a8"
   integrity sha512-L4mxjBd3u8qiOLozdWrH2P8ZybSsDXBF7iyNyqNEFJhPUkovmuARWR8JTc1B/qlclOIg6FvZZA/0uAZMMim0mw==
 
+dexie@^4.0.4:
+  version "4.0.7"
+  resolved "https://registry.yarnpkg.com/dexie/-/dexie-4.0.7.tgz#c92e5032245fc075de58c636238a82ee3ff9fedb"
+  integrity sha512-M+Lo6rk4pekIfrc2T0o2tvVJwL6EAAM/B78DNfb8aaxFVoI1f8/rz5KTxuAnApkwqTSuxx7T5t0RKH7qprapGg==
+
+earcut@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/earcut/-/earcut-2.2.4.tgz#6d02fd4d68160c114825d06890a92ecaae60343a"
+  integrity sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ==
+
 flatbuffers@23.3.3:
   version "23.3.3"
   resolved "https://registry.yarnpkg.com/flatbuffers/-/flatbuffers-23.3.3.tgz#23654ba7a98d4b866a977ae668fe4f8969f34a66"
@@ -70,6 +92,16 @@ lit@^3.1.3:
     lit-element "^4.0.4"
     lit-html "^3.1.2"
 
+n8ao@1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/n8ao/-/n8ao-1.5.1.tgz#e48960352e9c358955d7da072a341bbc64961bb5"
+  integrity sha512-Dn5o6ecmLC1xZm2mby2qdGYgwKcNsC9oKv85TQBKFbDJVzUHGXV2oys14rDl6nhwjH+zZU3YcLJkMcY7qe+jTg==
+
+postprocessing@6.34.2:
+  version "6.34.2"
+  resolved "https://registry.yarnpkg.com/postprocessing/-/postprocessing-6.34.2.tgz#49258c2e9549828f1351bf0084623cbc92007f81"
+  integrity sha512-EQWCbeRdlfIO4WMkQCYW0rfFYaSvrU9hKxZKyhtuY0RrTM2eTNVpSyj7cUKEYG7pD1qjh8Nkj1qhxj1GdIBuXw==
+
 three-mesh-bvh@0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/three-mesh-bvh/-/three-mesh-bvh-0.7.0.tgz#8327c3483060bb7fe3e0151d7863d338095527d4"