feat(core): add section mesh generation component

Author: agviegas

packages/core/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@thatopen/components",
   "description": "Collection of core functionalities to author BIM apps.",
-  "version": "2.4.2",
+  "version": "2.4.3",
   "author": "That Open Company",
   "contributors": [
     "Antonio Gonzalez Viegas (https://github.com/agviegas)",
@@ -39,13 +39,15 @@
   "devDependencies": {
     "@thatopen/fragments": "~2.4.0",
     "@thatopen/ui": "~2.4.0",
+    "@types/earcut": "2.1.4",
     "@types/three": "0.160.0",
     "stats.js": "^0.17.0",
     "three": "^0.160.1",
     "web-ifc": "0.0.66"
   },
   "dependencies": {
     "camera-controls": "2.7.3",
+    "earcut": "2.2.4",
     "fast-xml-parser": "4.4.1",
     "jszip": "3.10.1",
     "three-mesh-bvh": "0.7.0"

packages/core/src/core/Components/index.ts

@@ -14,7 +14,7 @@ export class Components implements Disposable {
   /**
    * The version of the @thatopen/components library.
    */
-  static readonly release = "2.4.2";
+  static readonly release = "2.4.3";
 
   /** {@link Disposable.onDisposed} */
   readonly onDisposed = new Event<void>();

packages/core/src/core/Worlds/example.ts

@@ -23,7 +23,7 @@ In this tutorial, we will import:
 import * as THREE from "three";
 import * as BUI from "@thatopen/ui";
 import Stats from "stats.js";
-import * as OBC from "@thatopen/components";
+import * as OBC from "../..";
 
 /* MD
   ### 🖼️ Getting the container
@@ -106,11 +106,51 @@ world.scene.three.background = null;
 
 */
 
-const material = new THREE.MeshLambertMaterial({ color: "#6528D7" });
+const material = new THREE.MeshLambertMaterial({
+  color: "#6528D7",
+  transparent: true,
+  opacity: 0.2,
+});
 const geometry = new THREE.BoxGeometry();
 const cube = new THREE.Mesh(geometry, material);
 world.scene.three.add(cube);
 
+cube.rotation.x += Math.PI / 4.2;
+cube.rotation.y += Math.PI / 4.2;
+cube.rotation.z += Math.PI / 4.2;
+cube.updateMatrixWorld();
+
+const buffer = new Float32Array(300000);
+const posAttr = new THREE.BufferAttribute(buffer, 3, false);
+posAttr.setUsage(THREE.DynamicDrawUsage);
+
+const edgesGeometry = new THREE.BufferGeometry();
+edgesGeometry.setAttribute("position", posAttr);
+
+const edges = new THREE.LineSegments(
+  edgesGeometry,
+  new THREE.LineBasicMaterial({ color: "red", linewidth: 0.001 }),
+);
+
+edges.frustumCulled = false;
+
+world.scene.three.add(edges);
+
+const plane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
+const edgeGenerator = components.get(OBC.EdgeGenerator);
+edgeGenerator.plane = plane;
+
+const { index } = edgeGenerator.generate({
+  meshes: [cube],
+  posAttr,
+});
+
+edges.geometry.setDrawRange(0, index);
+posAttr.needsUpdate = true;
+console.log(edges);
+
+
+
 /* MD
   Finally, we will make the camera look at the cube:
 */

packages/core/src/utils/index.ts

@@ -3,3 +3,4 @@ export * from "./geometry";
 export * from "./materials";
 export * from "./uuid";
 export * from "./vertex-picker";
+export * from "./section-generator";