stage 8-step viewer

components/StepViewer.tsx

@@ -0,0 +1,371 @@
+"use client";
+
+// In-browser STEP viewer. Uses `occt-import-js` (OpenCascade compiled to
+// WASM) to triangulate STEP/STP into mesh buffers, then renders them with
+// three.js and an OrbitControls camera.
+//
+// The WASM blob is served from /vendor/occt-import-js.wasm — copied there
+// by scripts/copy-viewer-assets.mjs during predev/prebuild.
+//
+// This component is strictly client-side: both `three` and `occt-import-js`
+// reach for `window`/`WebGL`, so we never import them at module top-level in
+// server components. All imports inside here are fine because the file is
+// marked "use client" and only ever mounted below a client boundary.
+
+import { useEffect, useRef, useState } from "react";
+
+interface Props {
+  /** Fully qualified URL that returns the STEP bytes (e.g. /api/v1/files/:id/download). */
+  url: string;
+  /** Optional class name for the outer wrapper. */
+  className?: string;
+  /** Show mesh edges for readability. Defaults to true. Disable on very complex assemblies. */
+  showEdges?: boolean;
+}
+
+type ViewerState =
+  | { kind: "idle" }
+  | { kind: "loading"; message: string }
+  | { kind: "ready"; triangleCount: number; meshCount: number }
+  | { kind: "error"; message: string };
+
+export default function StepViewer({ url, className, showEdges = true }: Props) {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const [state, setState] = useState<ViewerState>({ kind: "idle" });
+
+  useEffect(() => {
+    const hostNullable = containerRef.current;
+    if (!hostNullable) return;
+    // Capture in a non-nullable local so the async closure below retains the
+    // narrowing (TS flow analysis doesn't carry narrowing across async fns).
+    const host: HTMLDivElement = hostNullable;
+
+    let cancelled = false;
+    let cleanup: (() => void) | null = null;
+
+    async function run() {
+      setState({ kind: "loading", message: "Initialising viewer…" });
+      try {
+        // Dynamically import the heavy bits — keeps initial JS small and
+        // means nothing in here ever runs on the server.
+        const [{ default: occtFactory }, THREE, { OrbitControls }] =
+          await Promise.all([
+            import("occt-import-js"),
+            import("three"),
+            import("three/examples/jsm/controls/OrbitControls.js"),
+          ]);
+
+        if (cancelled) return;
+        setState({ kind: "loading", message: "Fetching model…" });
+
+        const response = await fetch(url, { cache: "force-cache" });
+        if (!response.ok) {
+          throw new Error(`Download failed (${response.status})`);
+        }
+        const arrayBuffer = await response.arrayBuffer();
+        if (cancelled) return;
+
+        setState({ kind: "loading", message: "Parsing STEP file…" });
+
+        const occt = await occtFactory({
+          locateFile: (file) => `/vendor/${file}`,
+        });
+        if (cancelled) return;
+
+        const fileBuffer = new Uint8Array(arrayBuffer);
+        const result = occt.ReadStepFile(fileBuffer, null);
+        if (!result.success || result.meshes.length === 0) {
+          throw new Error(
+            result.success
+              ? "No geometry found in this STEP file."
+              : "OpenCascade could not parse this STEP file.",
+          );
+        }
+
+        if (cancelled) return;
+        setState({ kind: "loading", message: "Building scene…" });
+
+        // --- three.js scene -----------------------------------------------
+        const width = host.clientWidth || 600;
+        const height = host.clientHeight || 400;
+
+        const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: false });
+        renderer.setPixelRatio(window.devicePixelRatio || 1);
+        renderer.setSize(width, height, false);
+        renderer.setClearColor(0xf8fafc); // slate-50
+        host.appendChild(renderer.domElement);
+        renderer.domElement.style.display = "block";
+        renderer.domElement.style.width = "100%";
+        renderer.domElement.style.height = "100%";
+        renderer.domElement.style.touchAction = "none";
+
+        const scene = new THREE.Scene();
+
+        const ambient = new THREE.AmbientLight(0xffffff, 0.55);
+        scene.add(ambient);
+        const key = new THREE.DirectionalLight(0xffffff, 0.9);
+        key.position.set(1, 1.5, 1);
+        scene.add(key);
+        const fill = new THREE.DirectionalLight(0xffffff, 0.35);
+        fill.position.set(-1, -0.5, -1);
+        scene.add(fill);
+
+        const group = new THREE.Group();
+        let totalTris = 0;
+        const disposables: Array<{ dispose: () => void }> = [];
+
+        for (const m of result.meshes) {
+          const built = buildMesh(THREE, m, showEdges);
+          if (!built) continue;
+          group.add(built.mesh);
+          if (built.edges) group.add(built.edges);
+          totalTris += built.triangleCount;
+          disposables.push(...built.disposables);
+        }
+
+        scene.add(group);
+
+        // Center and frame.
+        const bbox = new THREE.Box3().setFromObject(group);
+        const size = new THREE.Vector3();
+        const center = new THREE.Vector3();
+        bbox.getSize(size);
+        bbox.getCenter(center);
+        group.position.sub(center); // recentre at origin
+
+        const camera = new THREE.PerspectiveCamera(45, width / height, 0.01, 1e7);
+        const radius = Math.max(size.x, size.y, size.z, 1);
+        const dist = radius * 2.4;
+        camera.position.set(dist, dist * 0.8, dist);
+        camera.lookAt(0, 0, 0);
+        camera.near = radius / 1000;
+        camera.far = radius * 1000;
+        camera.updateProjectionMatrix();
+
+        const controls = new OrbitControls(camera, renderer.domElement);
+        controls.enableDamping = true;
+        controls.dampingFactor = 0.08;
+        controls.target.set(0, 0, 0);
+        controls.update();
+
+        // Render loop.
+        let rafId = 0;
+        const render = () => {
+          controls.update();
+          renderer.render(scene, camera);
+          rafId = requestAnimationFrame(render);
+        };
+        render();
+
+        // Resize.
+        const ro = new ResizeObserver(() => {
+          const w = host.clientWidth;
+          const h = host.clientHeight;
+          if (w === 0 || h === 0) return;
+          renderer.setSize(w, h, false);
+          camera.aspect = w / h;
+          camera.updateProjectionMatrix();
+        });
+        ro.observe(host);
+
+        cleanup = () => {
+          cancelAnimationFrame(rafId);
+          ro.disconnect();
+          controls.dispose();
+          for (const d of disposables) {
+            try {
+              d.dispose();
+            } catch {
+              /* ignore */
+            }
+          }
+          renderer.dispose();
+          if (renderer.domElement.parentNode === host) {
+            host.removeChild(renderer.domElement);
+          }
+        };
+
+        if (cancelled) {
+          cleanup();
+          cleanup = null;
+          return;
+        }
+        setState({
+          kind: "ready",
+          triangleCount: totalTris,
+          meshCount: result.meshes.length,
+        });
+      } catch (err) {
+        if (cancelled) return;
+        const message = err instanceof Error ? err.message : "Unknown viewer error";
+        setState({ kind: "error", message });
+      }
+    }
+
+    run();
+
+    return () => {
+      cancelled = true;
+      if (cleanup) cleanup();
+    };
+    // Reload whenever the target file changes.
+  }, [url, showEdges]);
+
+  return (
+    <div className={className ?? "relative w-full h-[480px] rounded-lg border border-slate-200 bg-slate-50 overflow-hidden"}>
+      <div ref={containerRef} className="absolute inset-0" />
+      {state.kind !== "ready" ? (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="rounded-md bg-white/80 backdrop-blur px-3 py-2 text-sm text-slate-600 border border-slate-200">
+            {state.kind === "error" ? (
+              <span className="text-red-600">Viewer error: {state.message}</span>
+            ) : state.kind === "loading" ? (
+              <span>{state.message}</span>
+            ) : (
+              <span>Preparing viewer…</span>
+            )}
+          </div>
+        </div>
+      ) : (
+        <div className="absolute bottom-2 right-2 rounded-md bg-white/80 backdrop-blur px-2 py-1 text-xs text-slate-500 border border-slate-200 pointer-events-none">
+          {state.meshCount} mesh{state.meshCount === 1 ? "" : "es"} · {state.triangleCount.toLocaleString()} tris
+        </div>
+      )}
+    </div>
+  );
+}
+
+// --------------------------------------------------------------------------
+
+import type * as THREENS from "three";
+import type { OcctMesh } from "occt-import-js";
+
+interface BuiltMesh {
+  mesh: THREENS.Mesh;
+  edges: THREENS.Group | null;
+  triangleCount: number;
+  disposables: Array<{ dispose: () => void }>;
+}
+
+/**
+ * Adapted from occt-import-js/examples/three_viewer.html. Handles the
+ * per-BRep-face colouring scheme OCCT emits: a single indexed buffer
+ * geometry with one material per face group.
+ */
+function buildMesh(
+  THREE: typeof THREENS,
+  source: OcctMesh,
+  showEdges: boolean,
+): BuiltMesh | null {
+  const positionArr = source.attributes.position?.array;
+  const indexArr = source.index?.array;
+  if (!positionArr || !indexArr || positionArr.length === 0 || indexArr.length === 0) {
+    return null;
+  }
+
+  const geometry = new THREE.BufferGeometry();
+  geometry.setAttribute(
+    "position",
+    new THREE.Float32BufferAttribute(
+      positionArr instanceof Float32Array ? positionArr : Float32Array.from(positionArr as ArrayLike<number>),
+      3,
+    ),
+  );
+  if (source.attributes.normal?.array) {
+    const normalArr = source.attributes.normal.array;
+    geometry.setAttribute(
+      "normal",
+      new THREE.Float32BufferAttribute(
+        normalArr instanceof Float32Array ? normalArr : Float32Array.from(normalArr as ArrayLike<number>),
+        3,
+      ),
+    );
+  } else {
+    // Fall back to computed normals if the importer didn't supply any.
+  }
+  geometry.name = source.name ?? "occt-mesh";
+
+  const indexTyped =
+    indexArr instanceof Uint32Array ? indexArr : Uint32Array.from(indexArr as ArrayLike<number>);
+  geometry.setIndex(new THREE.BufferAttribute(indexTyped, 1));
+  if (!source.attributes.normal?.array) {
+    geometry.computeVertexNormals();
+  }
+
+  const disposables: Array<{ dispose: () => void }> = [geometry];
+
+  const defaultColor = source.color
+    ? new THREE.Color(source.color[0], source.color[1], source.color[2])
+    : new THREE.Color(0xb0b8c1); // slate-400-ish
+  const defaultMaterial = new THREE.MeshPhongMaterial({
+    color: defaultColor,
+    specular: 0x101010,
+    shininess: 30,
+    flatShading: false,
+  });
+  disposables.push(defaultMaterial);
+
+  const materials: THREENS.Material[] = [defaultMaterial];
+  const outlineMaterial = new THREE.LineBasicMaterial({ color: 0x334155 });
+  disposables.push(outlineMaterial);
+
+  const edges = showEdges ? new THREE.Group() : null;
+
+  const triangleCount = indexTyped.length / 3;
+
+  if (source.brep_faces && source.brep_faces.length > 0) {
+    for (const face of source.brep_faces) {
+      const c = face.color
+        ? new THREE.Color(face.color[0], face.color[1], face.color[2])
+        : defaultMaterial.color;
+      const mat = new THREE.MeshPhongMaterial({ color: c, specular: 0x101010, shininess: 30 });
+      materials.push(mat);
+      disposables.push(mat);
+    }
+
+    let triangleIndex = 0;
+    let faceGroupIndex = 0;
+    while (triangleIndex < triangleCount) {
+      const firstIndex = triangleIndex;
+      let lastIndex: number;
+      let materialIndex: number;
+      if (faceGroupIndex >= source.brep_faces.length) {
+        lastIndex = triangleCount;
+        materialIndex = 0;
+      } else if (triangleIndex < source.brep_faces[faceGroupIndex].first) {
+        lastIndex = source.brep_faces[faceGroupIndex].first;
+        materialIndex = 0;
+      } else {
+        lastIndex = source.brep_faces[faceGroupIndex].last + 1;
+        materialIndex = faceGroupIndex + 1;
+        faceGroupIndex++;
+      }
+      geometry.addGroup(firstIndex * 3, (lastIndex - firstIndex) * 3, materialIndex);
+      if (edges) {
+        const inner = new THREE.BufferGeometry();
+        inner.setAttribute("position", geometry.attributes.position);
+        if (geometry.attributes.normal) {
+          inner.setAttribute("normal", geometry.attributes.normal);
+        }
+        inner.setIndex(new THREE.BufferAttribute(indexTyped.slice(firstIndex * 3, lastIndex * 3), 1));
+        const edgesGeom = new THREE.EdgesGeometry(inner, 30);
+        edges.add(new THREE.LineSegments(edgesGeom, outlineMaterial));
+        disposables.push(inner, edgesGeom);
+      }
+      triangleIndex = lastIndex;
+    }
+  } else if (edges) {
+    const edgesGeom = new THREE.EdgesGeometry(geometry, 30);
+    edges.add(new THREE.LineSegments(edgesGeom, outlineMaterial));
+    disposables.push(edgesGeom);
+  }
+
+  const mesh = new THREE.Mesh(
+    geometry,
+    materials.length > 1 ? materials : materials[0],
+  );
+  mesh.name = source.name ?? "occt-mesh";
+  if (edges) edges.renderOrder = mesh.renderOrder + 1;
+
+  return { mesh, edges, triangleCount, disposables };
+}