feat: add facedimension tutorial

packages/front/src/measurement/FaceMeasurement/example.ts

@@ -1,67 +1,72 @@
-// Set up scene (see SimpleScene tutorial)
+/* eslint import/no-extraneous-dependencies: 0 */
 
-import * as THREE from "three";
 import Stats from "stats.js";
-import * as OBC from "../..";
+import * as THREE from "three";
+import * as OBC from "@thatopen/components";
+import * as OBCF from "../..";
 
 const container = document.getElementById("container")!;
 
 const components = new OBC.Components();
 
-const sceneComponent = new OBC.SimpleScene(components);
-sceneComponent.setup();
-components.scene = sceneComponent;
+const worlds = components.get(OBC.Worlds);
 
-const rendererComponent = new OBC.PostproductionRenderer(components, container);
-components.renderer = rendererComponent;
+const world = worlds.create<
+  OBC.SimpleScene,
+  OBC.SimpleCamera,
+  OBCF.PostproductionRenderer
+>();
 
-const cameraComponent = new OBC.SimpleCamera(components);
-components.camera = cameraComponent;
-
-components.raycaster = new OBC.SimpleRaycaster(components);
+world.scene = new OBC.SimpleScene(components);
+world.renderer = new OBCF.PostproductionRenderer(components, container);
+world.camera = new OBC.SimpleCamera(components);
 
 components.init();
 
-rendererComponent.postproduction.enabled = true;
+world.camera.controls.setLookAt(5, 5, 5, 0, 0, 0);
 
-cameraComponent.controls.setLookAt(10, 10, 10, 0, 0, 0);
+world.scene.setup();
 
-const grid = new OBC.SimpleGrid(components, new THREE.Color(0x666666));
-const effects = rendererComponent.postproduction.customEffects;
-effects.excludedMeshes.push(grid.get());
+const grids = components.get(OBC.Grids);
+grids.create(world);
 
-const dimensions = new OBC.FaceMeasurement(components);
+const dimensions = new OBCF.FaceMeasurement(components);
+dimensions.world = world;
+dimensions.enabled = true;
 
 const fragments = new OBC.FragmentsManager(components);
-const file = await fetch("../../../resources/small.frag");
+const file = await fetch("../../../../../resources/small.frag");
 const data = await file.arrayBuffer();
 const buffer = new Uint8Array(data);
-fragments.load(buffer);
+const model = fragments.load(buffer);
+world.scene.three.add(model);
+
+for (const child of model.children) {
+  if (child instanceof THREE.Mesh) {
+    world.meshes.add(child);
+  }
+}
+
+let saved: OBCF.SerializedAreaMeasure[];
 
-let saved: OBC.SerializedAreaMeasure[];
 window.addEventListener("keydown", (event) => {
   if (event.code === "KeyO") {
     dimensions.delete();
   } else if (event.code === "KeyS") {
     saved = dimensions.get();
     dimensions.deleteAll();
   } else if (event.code === "KeyL") {
-    if (saved) dimensions.set(saved);
+    if (saved) {
+      dimensions.set(saved);
+    }
   }
 });
 
-const mainToolbar = new OBC.Toolbar(components, {
-  name: "Main Toolbar",
-  position: "bottom",
-});
-mainToolbar.addChild(dimensions.uiElement.get("main"));
-components.ui.addToolbar(mainToolbar);
-
 // Set up stats
 
 const stats = new Stats();
 stats.showPanel(2);
 document.body.append(stats.dom);
 stats.dom.style.left = "0px";
-rendererComponent.onBeforeUpdate.add(() => stats.begin());
-rendererComponent.onAfterUpdate.add(() => stats.end());
+world.renderer.onBeforeUpdate.add(() => stats.begin());
+world.renderer.onAfterUpdate.add(() => stats.end());

packages/front/src/measurement/FaceMeasurement/index.ts

@@ -1,6 +1,7 @@
 import * as THREE from "three";
 import * as OBC from "@thatopen/components";
 import { Mark } from "../../core";
+import { newDimensionMark } from "../utils";
 
 export interface AreaSelection {
   area: number;
@@ -189,14 +190,15 @@ export class FaceMeasurement
     }
     const canvas = this.world.renderer.three.domElement;
     const viewerContainer = canvas.parentElement as HTMLElement;
+
+    viewerContainer.removeEventListener("click", this.create);
+    viewerContainer.removeEventListener("mousemove", this.onMouseMove);
+    window.removeEventListener("keydown", this.onKeydown);
+
     if (active) {
       viewerContainer.addEventListener("click", this.create);
       viewerContainer.addEventListener("mousemove", this.onMouseMove);
       window.addEventListener("keydown", this.onKeydown);
-    } else {
-      viewerContainer.removeEventListener("click", this.create);
-      viewerContainer.removeEventListener("mousemove", this.onMouseMove);
-      window.removeEventListener("keydown", this.onKeydown);
     }
   }
 
@@ -283,7 +285,7 @@ export class FaceMeasurement
       throw new Error("The face measurement needs a world to work!");
     }
     const { center } = geometry.boundingSphere;
-    const htmlText = document.createElement("div");
+    const htmlText = newDimensionMark();
     const formattedArea = Math.trunc(area * 100) / 100;
     htmlText.textContent = formattedArea.toString();
     const label = new Mark(this.world, htmlText);