Add grid; clipping plane

app/three/utils/build-clipping-plane.ts

@@ -0,0 +1,69 @@
+import {
+  DoubleSide,
+  Mesh,
+  MeshBasicMaterial,
+  PerspectiveCamera,
+  Plane,
+  PlaneGeometry,
+  Vector3,
+  WebGLRenderer,
+} from "three";
+import { DragControls, OrbitControls } from "three/examples/jsm/Addons.js";
+import { Extent } from "./build-scene";
+import { getCenter3D } from "./utils";
+
+export function createClippingPlane(
+  renderer: WebGLRenderer,
+  camera: PerspectiveCamera,
+  orbitControls: OrbitControls,
+  extent: Extent
+) {
+  const center = getCenter3D(extent);
+
+  const width = extent.xmax - extent.xmin;
+  const height = extent.ymax - extent.ymin;
+  const d = extent.zmax;
+
+  // Visual representation of the clipping Plane
+  // Plane is given in Hesse normal form
+  const normalVector = new Vector3(0, 0, -1);
+  const plane = new Plane(normalVector, d);
+
+  // Dragging Mechanism
+  const planeMesh = new Mesh(
+    new PlaneGeometry(width, height),
+    new MeshBasicMaterial({
+      visible: true,
+      color: 0xff0000,
+      transparent: true,
+      opacity: 0.1,
+      side: DoubleSide,
+    })
+  );
+  planeMesh.position.set(center.x, center.y, d);
+
+  const dragControls = new DragControls(
+    [planeMesh],
+    camera,
+    renderer.domElement
+  );
+
+  // Disable OrbitControls when dragging starts
+  dragControls.addEventListener("dragstart", () => {
+    orbitControls.enabled = false;
+  });
+
+  // Re-enable OrbitControls when dragging ends
+  dragControls.addEventListener("dragend", () => {
+    orbitControls.enabled = true;
+  });
+
+  dragControls.addEventListener("drag", (event) => {
+    const newZ = event.object.position.z;
+    plane.constant = newZ;
+    planeMesh.position.x = center.x;
+    planeMesh.position.y = center.y;
+  });
+
+  return { planeMesh, plane };
+}