Add 3D rect viewer and slicing controls

examples/interactive-graphics3d.fixture.tsx

@@ -0,0 +1,42 @@
+import type { GraphicsObject } from "../lib"
+import { InteractiveGraphics3d } from "site/components/InteractiveGraphics3d"
+
+const depths = [20, 40, 60]
+const colors = [
+  "#4a90e2",
+  "#50e3c2",
+  "#f5a623",
+  "#bd10e0",
+  "#f8333c",
+  "#2d9cdb",
+]
+
+const rects = Array.from({ length: 4 }, (_, x) =>
+  Array.from({ length: 4 }, (_, y) => ({ x, y })),
+)
+  .flat()
+  .map(({ x, y }, index) => {
+    const depth = depths[(x + y) % depths.length]
+    const color = colors[index % colors.length]
+    const centerX = (x - 1.5) * 45
+    const centerY = (y - 1.5) * 45
+    const centerZ = (x - y) * 20
+
+    return {
+      center: { x: centerX, y: centerY, z: centerZ },
+      width: 30,
+      height: 30,
+      depth,
+      fill: color,
+      label: `Rect (${x}, ${y}) depth ${depth}`,
+    }
+  })
+
+const graphics: GraphicsObject = {
+  title: "Interactive 3D Rect Grid",
+  rects3d: rects,
+}
+
+export default function InteractiveGraphics3dFixture() {
+  return <InteractiveGraphics3d graphics={graphics} />
+}

lib/index.ts

@@ -17,6 +17,7 @@ export type {
   Point,
   Line,
   Rect,
+  Rect3d,
   Circle,
   Arrow,
   Text,

lib/types.ts

@@ -29,6 +29,19 @@ export interface Rect {
   label?: string
 }
 
+export interface Rect3d {
+  center: { x: number; y: number; z: number }
+  width: number
+  height: number
+  depth: number
+  fill?: string
+  stroke?: string
+  color?: string
+  layer?: string
+  step?: number
+  label?: string
+}
+
 export interface Circle {
   center: { x: number; y: number }
   radius: number
@@ -72,6 +85,7 @@ export interface GraphicsObject {
   points?: Point[]
   lines?: Line[]
   rects?: Rect[]
+  rects3d?: Rect3d[]
   circles?: Circle[]
   arrows?: Arrow[]
   texts?: Text[]

package.json

@@ -40,6 +40,7 @@
     "@types/jsdom": "^21.1.7",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
+    "@types/three": "^0.181.0",
     "@vitejs/plugin-react": "^4.3.3",
     "commander": "^12.1.0",
     "debug": "^4.3.7",
@@ -63,6 +64,7 @@
     "react-router-dom": "^6.28.0",
     "react-supergrid": "^1.0.10",
     "svgson": "^5.3.1",
+    "three": "^0.181.1",
     "transformation-matrix": "^3.0.0",
     "use-mouse-matrix-transform": "^1.3.0"
   }

site/components/InteractiveGraphics/index.ts

@@ -2,3 +2,4 @@ export { InteractiveGraphics } from "./InteractiveGraphics"
 export { InteractiveState } from "./InteractiveState"
 export { ContextMenu } from "./ContextMenu"
 export { Text } from "./Text"
+export { InteractiveGraphics3d } from "../InteractiveGraphics3d"