Finish slicing box and UI

app/three/utils/build-coordinate-grid.ts

@@ -0,0 +1,111 @@
+import {
+  CanvasTexture,
+  GridHelper,
+  Sprite,
+  SpriteMaterial,
+  Vector4,
+} from "three";
+import { Extent } from "./build-scene";
+import { getCenter3D } from "./utils";
+
+enum Orientation {
+  Horizontal,
+  Vertical,
+}
+
+export function buildCoordinateGrid(extent: Extent) {
+  const center = getCenter3D(extent);
+  // Calculate the width and height of the grid
+  const gridWidth = extent.xmax - extent.xmin;
+  const gridHeight = extent.ymax - extent.ymin;
+
+  // Decide on the number of divisions (e.g., 20 divisions along each axis)
+  const divisions = 20;
+
+  // Create a grid helper with the calculated grid size and divisions
+  const gridHelper = new GridHelper(Math.max(gridWidth, gridHeight), divisions);
+
+  // Position the grid in the scene to match the given extent
+  gridHelper.position.set(center.x, center.y, 0);
+
+  // Rotate the grid to align with the XY-plane
+  gridHelper.rotation.x = Math.PI / 2;
+
+  // Retrieve the geometry of the grid helper
+  const geometry = gridHelper.geometry;
+
+  const positionAttr = geometry.getAttribute("position");
+  const startingPointsHorizontal = [];
+  const startingPointsVertical = [];
+  for (let i = 0; i < positionAttr.count; i++) {
+    const x = positionAttr.getX(i);
+    const z = positionAttr.getZ(i);
+    const v = new Vector4(x + center.x, z + center.y, 0, 1);
+
+    if (i % 4 === 0) {
+      startingPointsVertical.push(v);
+    } else if (i % 2 == 0) {
+      startingPointsHorizontal.push(v);
+    }
+  }
+
+  const annotations = [];
+  for (let point of startingPointsHorizontal) {
+    const label = createLabel(
+      `${point.x.toFixed(2)}`,
+      point,
+      Orientation.Horizontal
+    );
+    annotations.push(label);
+  }
+
+  for (let point of startingPointsVertical) {
+    const label = createLabel(
+      `${point.y.toFixed(2)}`,
+      point,
+      Orientation.Vertical
+    );
+    annotations.push(label);
+  }
+
+  return { gridHelper, annotations };
+}
+
+// Function to create annotation (sprite with text)
+function createLabel(
+  text: string,
+  position: Vector4,
+  orientation: Orientation
+) {
+  const spriteMaterial = new SpriteMaterial({
+    map: new CanvasTexture(generateTextCanvas(text, orientation)), // Create text texture
+    transparent: true,
+  });
+  const sprite = new Sprite(spriteMaterial);
+  sprite.position.set(position.x, position.y, position.z);
+  sprite.scale.set(5000, 2500, 1); // Scale the sprite to make the text readable
+  return sprite;
+}
+
+// Function to generate a text canvas for the annotation
+function generateTextCanvas(text: string, orientation: Orientation) {
+  const canvas = document.createElement("canvas");
+  const context = canvas.getContext("2d");
+
+  if (context) {
+    canvas.width = 800;
+    canvas.height = 160;
+
+    // Set the text style
+    context.font = "45px Arial";
+    context.fillStyle = "black";
+
+    if (orientation === Orientation.Horizontal) {
+      context.fillText(text, 300, 160);
+    } else {
+      context.fillText(text, 100, 90);
+    }
+  }
+
+  return canvas;
+}