feat: classifier tutorial

ThatOpen · May 17, 2024 · f0f863f · f0f863f
1 parent 779f962
commit f0f863f
Show file tree

Hide file tree

Showing 6 changed files with 188 additions and 9 deletions.
diff --git a/packages/components/src/fragments/Classifier/example.html b/packages/components/src/fragments/Classifier/example.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport"
+        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <link rel="stylesheet" href="../../../resources/styles.css">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+  <link rel="icon" type="image/x-icon" href="../../../resources/favicon.ico">
+  <title>Simple 2D Scene</title>
+  <style>
+      body {
+          margin: 0;
+          padding: 0;
+          font-family: "Plus Jakarta Sans", sans-serif;
+      }
+
+      .full-screen {
+          width: 100vw;
+          height: 100vh;
+          position: relative;
+          overflow: hidden;
+      }
+  </style>
+</head>
+
+<body>
+<div class="full-screen" id="container"></div>
+<script type="module" src="./example.ts"></script>
+</body>
+
+</html>
diff --git a/packages/components/src/fragments/Classifier/example.ts b/packages/components/src/fragments/Classifier/example.ts
@@ -0,0 +1,145 @@
+/* eslint import/no-extraneous-dependencies: 0 */
+
+// @ts-ignore
+import * as dat from "three/examples/jsm/libs/lil-gui.module.min";
+import Stats from "stats.js";
+import * as THREE from "three";
+import * as BUI from "@thatopen/ui";
+import * as OBC from "../..";
+
+const container = document.getElementById("container")!;
+
+const components = new OBC.Components();
+
+const worlds = components.get(OBC.Worlds);
+
+const world = worlds.create<
+  OBC.SimpleScene,
+  OBC.SimpleCamera,
+  OBC.SimpleRenderer
+>();
+
+world.scene = new OBC.SimpleScene(components);
+world.renderer = new OBC.SimpleRenderer(components, container);
+world.camera = new OBC.SimpleCamera(components);
+
+components.init();
+
+world.camera.controls.setLookAt(12, 6, 8, 0, 0, -10);
+
+world.scene.setup();
+
+const grids = components.get(OBC.Grids);
+grids.create(world);
+
+const fragments = new OBC.FragmentManager(components);
+
+const file = await fetch("../../../../../resources/small.frag");
+const data = await file.arrayBuffer();
+const buffer = new Uint8Array(data);
+const model = fragments.load(buffer);
+world.scene.three.add(model);
+
+const classifier = components.get(OBC.Classifier);
+
+classifier.byEntity(model);
+classifier.byStorey(model);
+classifier.byModel(model.uuid, model);
+
+BUI.Manager.registerComponents();
+
+const walls = classifier.find({
+  entities: ["IFCWALLSTANDARDCASE"],
+});
+
+const slabs = classifier.find({
+  entities: ["IFCSLAB"],
+});
+
+const curtainWalls = classifier.find({
+  entities: ["IFCMEMBER", "IFCPLATE"],
+});
+
+const furniture = classifier.find({
+  entities: ["IFCFURNISHINGELEMENT"],
+});
+
+const doors = classifier.find({
+  entities: ["IFCDOOR"],
+});
+
+const all = classifier.find({
+  models: [model.uuid],
+});
+
+const color = new THREE.Color();
+
+const panel = BUI.Component.create<BUI.PanelSection>(() => {
+  return BUI.html`
+    <bim-panel active label="Classifier Tutorial" 
+      style="position: fixed; top: 5px; right: 5px">
+      <bim-panel-section style="padding-top: 10px;">
+      
+        <bim-color-input 
+          label="Walls Color" color="#202932" 
+          @input="${({ target }: { target: BUI.ColorInput }) => {
+            color.set(target.color);
+            classifier.setColor(walls, color);
+          }}">
+        </bim-color-input>
+      
+        <bim-color-input 
+          label="Slabs Color" color="#202932" 
+          @input="${({ target }: { target: BUI.ColorInput }) => {
+            color.set(target.color);
+            classifier.setColor(slabs, color);
+          }}">
+        </bim-color-input>
+      
+        <bim-color-input 
+          label="Curtain walls Color" color="#202932" 
+          @input="${({ target }: { target: BUI.ColorInput }) => {
+            color.set(target.color);
+            classifier.setColor(curtainWalls, color);
+          }}">
+        </bim-color-input>
+      
+        <bim-color-input 
+          label="Furniture Color" color="#202932" 
+          @input="${({ target }: { target: BUI.ColorInput }) => {
+            color.set(target.color);
+            classifier.setColor(furniture, color);
+          }}">
+        </bim-color-input>
+      
+        <bim-color-input 
+          label="Doors Color" color="#202932" 
+          @input="${({ target }: { target: BUI.ColorInput }) => {
+            color.set(target.color);
+            classifier.setColor(doors, color);
+          }}">
+        </bim-color-input>
+                  
+        <bim-button 
+          label="Reset walls color" 
+          @click="${() => {
+            classifier.resetColor(all);
+          }}">  
+        </bim-button>  
+
+      </bim-panel-section>
+    </bim-panel>
+    `;
+});
+
+document.body.append(panel);
+
+// Set up stats
+const stats = new Stats();
+stats.showPanel(2);
+document.body.append(stats.dom);
+stats.dom.style.left = "0px";
+stats.dom.style.right = "auto";
+
+world.renderer.onBeforeUpdate.add(() => stats.begin());
+world.renderer.onAfterUpdate.add(() => stats.end());
diff --git a/...src/fragments/FragmentClassifier/index.ts → ...ponents/src/fragments/Classifier/index.ts b/...src/fragments/FragmentClassifier/index.ts → ...ponents/src/fragments/Classifier/index.ts
@@ -13,7 +13,7 @@ export interface Classification {
   };
 }
 
-export class FragmentClassifier extends Component implements Disposable {
+export class Classifier extends Component implements Disposable {
   static readonly uuid = "e25a7f3c-46c4-4a14-9d3d-5115f24ebeb7" as const;
 
   /** {@link Component.enabled} */
@@ -26,7 +26,7 @@ export class FragmentClassifier extends Component implements Disposable {
 
   constructor(components: Components) {
     super(components);
-    components.add(FragmentClassifier.uuid, this);
+    components.add(Classifier.uuid, this);
     const fragmentManager = components.get(FragmentManager);
     fragmentManager.onFragmentsDisposed.add(this.onFragmentsDisposed);
   }
@@ -139,10 +139,10 @@ export class FragmentClassifier extends Component implements Disposable {
   }
 
   byModel(modelID: string, group: FRAGS.FragmentsGroup) {
-    if (!this.list.model) {
-      this.list.model = {};
+    if (!this.list.models) {
+      this.list.models = {};
     }
-    const modelsClassification = this.list.model;
+    const modelsClassification = this.list.models;
     if (!modelsClassification[modelID]) {
       modelsClassification[modelID] = {};
     }

diff --git a/packages/components/src/fragments/FragmentExploder/index.ts b/packages/components/src/fragments/FragmentExploder/index.ts
@@ -1,6 +1,6 @@
 import * as THREE from "three";
 import { Component, Disposable, Event, Components } from "../../core";
-import { FragmentClassifier } from "../FragmentClassifier";
+import { Classifier } from "../Classifier";
 import { FragmentManager } from "../FragmentManager";
 
 // TODO: Clean up and document
@@ -40,7 +40,7 @@ export class FragmentExploder extends Component implements Disposable {
   }
 
   update() {
-    const classifier = this.components.get(FragmentClassifier);
+    const classifier = this.components.get(Classifier);
     const fragments = this.components.get(FragmentManager);
 
     const factor = this.enabled ? 1 : -1;

diff --git a/packages/components/src/fragments/FragmentHider/example.ts b/packages/components/src/fragments/FragmentHider/example.ts
@@ -93,7 +93,7 @@ await hider.loadCached();
   the more complex filters later!
   */
 
-const classifier = new OBC.FragmentClassifier(components);
+const classifier = new OBC.Classifier(components);
 classifier.byStorey(model);
 classifier.byEntity(model);
 

diff --git a/packages/components/src/fragments/index.ts b/packages/components/src/fragments/index.ts
@@ -1,5 +1,5 @@
 export * from "./BoundingBoxes";
-export * from "./FragmentClassifier";
+export * from "./Classifier";
 export * from "./FragmentExploder";
 export * from "./FragmentHider";
 export * from "./FragmentIfcLoader";