Stupid selection...

bim.js

@@ -1,5 +1,6 @@
 import * as THREE from 'three';
 import * as OBC from 'openbim-components';
+import * as OBF from '@thatopen/components-front';
 import * as WEBIFC from 'web-ifc';
 
 /**
@@ -33,6 +34,7 @@ BIM.init = function (container) {
  */
 BIM.createScene = function (container) {
     this.init(container);
+
     this.world.scene.setup();
     // Add a grid to the scene
     const grids = this.components.get(OBC.Grids);
@@ -44,6 +46,7 @@ BIM.createScene = function (container) {
  * @todo Serve web-ifc.wasm locally via AJAX
  * @param {OBC.Components} components 
  * @param {ArrayBuffer} buffer The uploaded IFC file 
+ * @returns {OBC.FragmentsGroup} model
  */
 BIM.loadIfc = async function (buffer) {
     const fragments = this.components.get(OBC.FragmentsManager);
@@ -81,4 +84,20 @@ BIM.loadIfc = async function (buffer) {
     return model;
 }
 
+/**
+ * @param {OBC.FragmentsGroup} model The loaded IFC model
+ */
+BIM.setupHighligther = async function (model) {
+    const world = this.world;
+    const indexer = this.components.get(OBC.IfcRelationsIndexer);
+    await indexer.process(model);
+
+    const highlighter = this.components.get(OBF.Highlighter);
+    highlighter.setup({ world });
+
+    highlighter.events.select.onHighlight.add((property) => {
+        console.log(property);
+    });
+}
+
 export default BIM;

index.html

@@ -12,6 +12,7 @@
             "@thatopen/fragments": "./vendor/@thatopen/fragments/dist/index.mjs",
             "web-ifc": "./vendor/web-ifc/web-ifc-api.js",
             "openbim-components": "./vendor/@thatopen/components/dist/index.mjs",
+            "@thatopen/components-front": "./vendor/@thatopen/components-front/dist/index.js",
             "lit": "./vendor/@lit-labs/ssr-dom-shim/index.js"
           }
         }

main.js

@@ -4,5 +4,5 @@ import UI from './ui.js';
 
 document.addEventListener('DOMContentLoaded', () => {
     UI.setScene(document.querySelector('#scene'));
-    UI.ifcLoader();
+    const model = UI.ifcLoader();
 });

ui.js

@@ -14,14 +14,20 @@ UI.setScene = function (container) {
     BIM.createScene(container);
 }
 /**
+ * Returns the loaded model
  * @param {string} btnId The loading button's id
  */
 UI.ifcLoader = function (btnId = 'load-ifc') {
     const loadBtn = document.querySelector(`#${btnId}`);
+    let model = null;
     loadBtn.onchange = async function () {
         const files = this.files;
-        BIM.loadIfc(new Uint8Array(await files[0].arrayBuffer()));
+        model = await BIM.loadIfc(new Uint8Array(await files[0].arrayBuffer()));
+        // Set a raycaster to select objects
+        BIM.setupHighligther(model);
     }
+
+    return model;
 };
 
 export default UI;