feat: add measurement utils tutorial

ThatOpen · May 18, 2024 · c9333e9 · c9333e9
1 parent 2ff8d9c
commit c9333e9
Show file tree

Hide file tree

Showing 6 changed files with 137 additions and 18 deletions.
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -62,8 +62,7 @@
   },
   "dependencies": {
     "camera-controls": "2.7.3",
-    "three-mesh-bvh": "0.7.0",
-    "top-tool-package-reader": "0.0.3"
+    "three-mesh-bvh": "0.7.0"
   },
   "peerDependencies": {
     "@thatopen/fragments": "2.0.0-alpha.5",

diff --git a/packages/core/src/core/Raycasters/src/simple-raycaster.ts b/packages/core/src/core/Raycasters/src/simple-raycaster.ts
@@ -51,7 +51,7 @@ export class SimpleRaycaster implements Disposable {
    * {@link Components.meshes}.
    */
   castRay(
-    items: THREE.Mesh[] = Array.from(this.world.meshes),
+    items: THREE.Object3D[] = Array.from(this.world.meshes),
   ): THREE.Intersection | null {
     if (!this.world) {
       throw new Error("A world is needed to cast rays!");
@@ -70,7 +70,7 @@ export class SimpleRaycaster implements Disposable {
     return this.intersect(items);
   }
 
-  private intersect(items: THREE.Mesh[] = Array.from(this.world.meshes)) {
+  private intersect(items: THREE.Object3D[] = Array.from(this.world.meshes)) {
     const result = this.three.intersectObjects(items);
     const filtered = this.filterClippingPlanes(result);
     return filtered.length > 0 ? filtered[0] : null;

diff --git a/packages/core/src/measurement/Utils/example.html b/packages/core/src/measurement/Utils/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>Measurement Utils</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/core/src/measurement/Utils/example.ts b/packages/core/src/measurement/Utils/example.ts
@@ -0,0 +1,86 @@
+/* eslint import/no-extraneous-dependencies: 0 */
+
+import * as THREE from "three";
+import Stats from "stats.js";
+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.FragmentsManager(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 measurements = components.get(OBC.MeasurementUtils);
+
+const casters = components.get(OBC.Raycasters);
+const caster = casters.get(world);
+
+const edges = new THREE.EdgesGeometry();
+const material = new THREE.LineBasicMaterial({
+  color: 0xff0000,
+  depthTest: false,
+});
+const line = new THREE.LineSegments(edges, material);
+world.scene.three.add(line);
+
+if (world.renderer) {
+  const canvas = world.renderer.three.domElement;
+  canvas.addEventListener("mousemove", () => {
+    const result = caster.castRay([model]);
+
+    if (!result) return;
+    if (!(result.object instanceof THREE.Mesh)) return;
+    if (result.faceIndex === undefined) return;
+
+    const face = measurements.getFace(
+      result.object,
+      result.faceIndex,
+      result.instanceId,
+    );
+
+    if (face) {
+      const points: THREE.Vector3[] = [];
+      for (const edge of face.edges) {
+        points.push(...edge.points);
+      }
+      edges.setFromPoints(points);
+    }
+  });
+}
+
+// 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/packages/core/src/measurement/Utils/index.ts b/packages/core/src/measurement/Utils/index.ts
@@ -1,14 +1,22 @@
 import * as THREE from "three";
+import { Component, Components } from "../../core";
 
 export interface MeasureEdge {
   distance: number;
   points: THREE.Vector3[];
 }
 
-// TODO: Make a component?
+export class MeasurementUtils extends Component {
+  enabled = true;
 
-export class MeasurementUtils {
-  static getFace(
+  static uuid = "267ca032-672f-4cb0-afa9-d24e904f39d6";
+
+  constructor(components: Components) {
+    super(components);
+    components.add(MeasurementUtils.uuid, this);
+  }
+
+  getFace(
     mesh: THREE.InstancedMesh | THREE.Mesh,
     triangleIndex: number,
     instance?: number,
@@ -169,7 +177,7 @@ export class MeasurementUtils {
     return tempPoint.distanceTo(point);
   }
 
-  private static getFaceData(
+  private getFaceData(
     faceIndex: number,
     instance: number | undefined,
     mesh: THREE.Mesh | THREE.InstancedMesh,
@@ -235,7 +243,7 @@ export class MeasurementUtils {
     return { plane, edges };
   }
 
-  static getVerticesAndNormal(
+  getVerticesAndNormal(
     mesh: THREE.Mesh | THREE.InstancedMesh,
     faceIndex: number,
     instance: number | undefined,
@@ -286,7 +294,7 @@ export class MeasurementUtils {
     return { p1, p2, p3, faceNormal };
   }
 
-  private static round(vector: THREE.Vector3) {
+  private round(vector: THREE.Vector3) {
     const factor = 1000;
     vector.x = Math.trunc(vector.x * factor) / factor;
     vector.y = Math.trunc(vector.y * factor) / factor;

diff --git a/yarn.lock b/yarn.lock
@@ -1335,7 +1335,6 @@ __metadata:
     stats.js: ^0.17.0
     three: ^0.160.1
     three-mesh-bvh: 0.7.0
-    top-tool-package-reader: 0.0.3
     ts-jest: ^27.0.3
     ts-node: ^10.0.0
     typescript: 5.4.2
@@ -6712,13 +6711,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"top-tool-package-reader@npm:0.0.3":
-  version: 0.0.3
-  resolution: "top-tool-package-reader@npm:0.0.3"
-  checksum: 8b197b0e9f03565c78c807e097d9b1e6a066af7916882bf211269c0d8ef52ce2bb320a87fc39988ff499fd250c97216a2b46a7067b22034ba724ba0e91e887bd
-  languageName: node
-  linkType: hard
-
 "tough-cookie@npm:^4.0.0":
   version: 4.1.4
   resolution: "tough-cookie@npm:4.1.4"