chore: fix temp solution in examples

Author: agviegas

packages/fragments/src/FragmentsModels/examples/BuildingConfigurator/example.ts

@@ -99,22 +99,21 @@ const settings = {
 */
 
 const workerUrl = "../../src/multithreading/fragments-thread.ts";
-const fragments = new FRAGS.FragmentsModels(workerUrl);
-const fragmentsManager = components.get(OBC.FragmentsManager);
+const fragments = components.get(OBC.FragmentsManager);
+fragments.init(workerUrl);
 
 // Temp until we publish the libraries, to be able to use postproduction
 // @ts-ignore
-fragmentsManager._core = fragments;
 
 fragments.settings.graphicsQuality = 1;
 
 world.camera.controls.addEventListener("control", () => {
-  fragments.update();
+  fragments.core.update();
 });
 
 // Once a model is available in the list, we can tell it
 // to use shadows and to use the clipping planes we are using
-fragments.models.list.onItemSet.add(({ value: model }) => {
+fragments.core.models.list.onItemSet.add(({ value: model }) => {
   model.tiles.onItemSet.add(({ value: mesh }) => {
     if ("isMesh" in mesh) {
       const mat = mesh.material as THREE.MeshStandardMaterial[];
@@ -210,14 +209,14 @@ const updateClipPlane = () => {
 */
 
 const bytes = FRAGS.EditUtils.newModel({ raw: true });
-const model = await fragments.load(bytes, {
+const model = await fragments.core.load(bytes, {
   modelId: "example",
   camera: world.camera.three,
   raw: true,
 });
 
 world.scene.three.add(model.object);
-await fragments.update(true);
+await fragments.core.update(true);
 
 /* MD
   ### 🧊 Setting up the Geometry Engine
@@ -294,7 +293,7 @@ const staircaseHoleMesh = new THREE.Mesh(staircaseHoleGeometry);
 const regenerateFragments = async () => {
   const elementsData: FRAGS.NewElementData[] = [];
 
-  await fragments.editor.reset(model.modelId);
+  await fragments.core.editor.reset(model.modelId);
 
   // Create floor
 
@@ -323,15 +322,15 @@ const regenerateFragments = async () => {
 
   // Create base items
 
-  const matId = fragments.editor.createMaterial(
+  const matId = fragments.core.editor.createMaterial(
     model.modelId,
     new THREE.MeshLambertMaterial({
       color: new THREE.Color(1, 1, 1),
       side: THREE.DoubleSide,
     }),
   );
 
-  const ltId = fragments.editor.createLocalTransform(
+  const ltId = fragments.core.editor.createLocalTransform(
     model.modelId,
     new THREE.Matrix4().identity(),
   );
@@ -381,7 +380,7 @@ const regenerateFragments = async () => {
     length: settings.floorHeight,
   });
 
-  const extColumnGeoId = fragments.editor.createShell(
+  const extColumnGeoId = fragments.core.editor.createShell(
     model.modelId,
     exteriorColumnGeometry,
   );
@@ -406,7 +405,7 @@ const regenerateFragments = async () => {
     length: settings.floorHeight,
   });
 
-  const cornerWallGeoId = fragments.editor.createShell(
+  const cornerWallGeoId = fragments.core.editor.createShell(
     model.modelId,
     cornerWallGeometry,
   );
@@ -433,7 +432,7 @@ const regenerateFragments = async () => {
     length: settings.floorHeight - settings.floorThickness,
   });
 
-  const intColumnGeoId = fragments.editor.createShell(
+  const intColumnGeoId = fragments.core.editor.createShell(
     model.modelId,
     interiorColumnGeometry,
   );
@@ -474,7 +473,7 @@ const regenerateFragments = async () => {
     height: settings.floorHeight - settings.floorThickness,
   });
 
-  const staircaseWall1GeoId = fragments.editor.createShell(
+  const staircaseWall1GeoId = fragments.core.editor.createShell(
     model.modelId,
     staircaseWallGeometry1,
   );
@@ -492,7 +491,7 @@ const regenerateFragments = async () => {
     height: settings.floorHeight - settings.floorThickness,
   });
 
-  const staircaseWall2GeoId = fragments.editor.createShell(
+  const staircaseWall2GeoId = fragments.core.editor.createShell(
     model.modelId,
     staircaseWallGeometry2,
   );
@@ -540,7 +539,7 @@ const regenerateFragments = async () => {
   world.scene.three.add(tempMesh6);
   tempMesh6.position.y += 10;
 
-  const floorGeoId = fragments.editor.createShell(
+  const floorGeoId = fragments.core.editor.createShell(
     model.modelId,
     cutFloorGeometry,
   );
@@ -565,7 +564,7 @@ const regenerateFragments = async () => {
     ],
   });
 
-  const windowFrameGeoId = fragments.editor.createShell(
+  const windowFrameGeoId = fragments.core.editor.createShell(
     model.modelId,
     windowFrameGeometry,
   );
@@ -587,7 +586,7 @@ const regenerateFragments = async () => {
       length: settings.floorThickness,
     });
 
-  const windowTopGeoId = fragments.editor.createShell(
+  const windowTopGeoId = fragments.core.editor.createShell(
     model.modelId,
     windowTopGeometry,
   );
@@ -614,7 +613,7 @@ const regenerateFragments = async () => {
     ],
   });
 
-  const roofTopGeoId = fragments.editor.createShell(
+  const roofTopGeoId = fragments.core.editor.createShell(
     model.modelId,
     roofTopGeometry,
   );
@@ -988,11 +987,11 @@ const regenerateFragments = async () => {
     }
   }
 
-  await fragments.editor.createElements(model.modelId, elementsData);
+  await fragments.core.editor.createElements(model.modelId, elementsData);
 
   clearEdges();
 
-  await fragments.update(true);
+  await fragments.core.update(true);
 
   processing = false;
 };
@@ -1043,7 +1042,7 @@ const viewModes: [ViewMode, string][] = [
 const updateCamera = (
   camera: THREE.PerspectiveCamera | THREE.OrthographicCamera,
 ) => {
-  for (const [, model] of fragments.models.list) {
+  for (const [, model] of fragments.core.models.list) {
     model.useCamera(camera);
   }
   world.renderer!.postproduction.updateCamera();

packages/fragments/src/FragmentsModels/examples/SteelDetailing/example.ts

@@ -14,6 +14,7 @@ import * as BUI from "@thatopen/ui";
 import * as WEBIFC from "web-ifc";
 import Stats from "stats.js";
 import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader.js";
+// You have to import * as FRAGS from "@thatopen/fragments"
 import * as FRAGS from "../../../index";
 
 /* MD
@@ -97,11 +98,9 @@ const settings = {
   Now, let's configure the Fragments library core. This will allow us to load models effortlessly and start working with steel structures:
 */
 
-// prettier-ignore
 const workerUrl = "../../src/multithreading/fragments-thread.ts";
-// const workerUrl = "../../dist/Worker/worker.mjs";
-const fragments = new FRAGS.FragmentsModels(workerUrl);
-
+const fragments = components.get(OBC.FragmentsManager);
+fragments.init(workerUrl);
 /* MD
   ### 🖼️ Material and Texture Setup
   We'll set up materials and textures for our steel structures. This includes processing textures and configuring material properties for realistic steel appearance:
@@ -120,7 +119,7 @@ const roughnessMap = textureLoader.load(
 );
 processTextures(roughnessMap);
 
-fragments.models.materials.list.onItemSet.add(
+fragments.core.models.materials.list.onItemSet.add(
   ({ key: id, value: material }) => {
     if ("map" in material) {
       const standardMaterial = new THREE.MeshStandardMaterial({
@@ -130,29 +129,25 @@ fragments.models.materials.list.onItemSet.add(
         // roughness: 1,
         side: THREE.DoubleSide,
       }) as any;
-      fragments.models.materials.list.set(id, standardMaterial);
+      fragments.core.models.materials.list.set(id, standardMaterial);
     }
   },
 );
 
-fragments.models.materials.list.onItemSet.add(({ value: material }) => {
+fragments.core.models.materials.list.onItemSet.add(({ value: material }) => {
   const isLod = "isLodMaterial" in material && material.isLodMaterial;
   if (isLod) {
     world.renderer!.postproduction.basePass.isolatedMaterials.push(material);
   }
 });
 
-const fragmentsManager = components.get(OBC.FragmentsManager);
-// @ts-ignore
-fragmentsManager._core = fragments;
-
-fragments.settings.graphicsQuality = 1;
+fragments.core.settings.graphicsQuality = 1;
 
 world.camera.controls.addEventListener("control", () => {
-  fragments.update();
+  fragments.core.update();
 });
 
-fragments.models.list.onItemSet.add(({ value: model }) => {
+fragments.core.models.list.onItemSet.add(({ value: model }) => {
   model.tiles.onItemSet.add(({ value: mesh }) => {
     if (!("isLODGeometry" in mesh.geometry)) {
       const geometry = mesh.geometry as THREE.BufferGeometry;
@@ -209,7 +204,7 @@ fragments.models.list.onItemSet.add(({ value: model }) => {
   });
 });
 
-fragments.models.list.onItemSet.add(({ value: model }) => {
+fragments.core.models.list.onItemSet.add(({ value: model }) => {
   model.tiles.onItemSet.add(({ value: mesh }) => {
     if ("isMesh" in mesh) {
       const mat = mesh.material as THREE.MeshStandardMaterial[];
@@ -241,7 +236,7 @@ const model = await fragments.load(bytes, {
 
 world.scene.three.add(model.object);
 
-await fragments.update(true);
+await fragments.core.update(true);
 
 /* MD
   ### 🧊 Setting up the Geometry Engine
@@ -413,43 +408,43 @@ const regenerateFragments = async () => {
 
   const elementsData: FRAGS.NewElementData[] = [];
 
-  await fragments.editor.reset(model.modelId);
+  await fragments.core.editor.reset(model.modelId);
 
-  const matId = fragments.editor.createMaterial(
+  const matId = fragments.core.editor.createMaterial(
     model.modelId,
     new THREE.MeshLambertMaterial({
       color: new THREE.Color(1, 1, 1),
       side: THREE.DoubleSide,
     }),
   );
 
-  const ltId = fragments.editor.createLocalTransform(
+  const ltId = fragments.core.editor.createLocalTransform(
     model.modelId,
     new THREE.Matrix4().identity(),
   );
 
   // GEOMETRIES
 
   const basePlateGeom = basePlateMesh.geometry;
-  const basePlateGeomId = fragments.editor.createShell(
+  const basePlateGeomId = fragments.core.editor.createShell(
     model.modelId,
     basePlateGeom,
   );
 
   const baseCrossPlateGeom = baseCrossPlateMesh.geometry;
-  const baseCrossPlateGeomId = fragments.editor.createShell(
+  const baseCrossPlateGeomId = fragments.core.editor.createShell(
     model.modelId,
     baseCrossPlateGeom,
   );
 
   const cornerPlateGeom = cornerPlateMesh.geometry;
-  const cornerPlateGeomId = fragments.editor.createShell(
+  const cornerPlateGeomId = fragments.core.editor.createShell(
     model.modelId,
     cornerPlateGeom,
   );
 
   const baseBoltGeom = boltHeadMesh.geometry;
-  const baseBoltGeomId = fragments.editor.createShell(
+  const baseBoltGeomId = fragments.core.editor.createShell(
     model.modelId,
     baseBoltGeom,
   );
@@ -486,7 +481,7 @@ const regenerateFragments = async () => {
   yDirection2.applyMatrix4(tempObject.matrix);
 
   // prettier-ignore
-  const baseHookGeomId = fragments.editor.createCircleExtrusion(
+  const baseHookGeomId = fragments.core.editor.createCircleExtrusion(
     model.modelId,
     {
       radius: [baseHookThickness],
@@ -693,7 +688,7 @@ const regenerateFragments = async () => {
       length: p1.distanceTo(p2),
     });
 
-    const steelElementGeomId = fragments.editor.createShell(
+    const steelElementGeomId = fragments.core.editor.createShell(
       model.modelId,
       steelElementGeometry,
     );
@@ -719,9 +714,9 @@ const regenerateFragments = async () => {
     });
   }
 
-  await fragments.editor.createElements(model.modelId, elementsData);
+  await fragments.core.editor.createElements(model.modelId, elementsData);
 
-  await fragments.update(true);
+  await fragments.core.update(true);
 
   processing = false;
 };