refactor(web): GLTF viewer

Author: leonardcser

apps/web/src/components/workflow/gltf-viewer/camera-controller.tsx

@@ -0,0 +1,46 @@
+import { useThree } from "@react-three/fiber";
+import { useEffect, useRef } from "react";
+
+import type { CameraControllerProps } from "./types";
+import { positionCameraForScene } from "./utils";
+
+// Hook to monitor scene ref and position camera when available
+function useSceneCamera(
+  sceneRef: React.RefObject<import("three").Group | null>,
+  trigger: number,
+  viewportAspect: number = 1.0
+) {
+  const { camera, size } = useThree();
+  const lastSceneUUID = useRef<string | null>(null);
+
+  useEffect(() => {
+    const scene = sceneRef.current;
+
+    // Calculate actual aspect ratio from Three.js size if available, fallback to provided aspect
+    const actualAspect =
+      size.width && size.height ? size.width / size.height : viewportAspect;
+
+    if (!scene || !camera) {
+      return;
+    }
+
+    // Only position camera if scene has changed (different UUID)
+    if (scene.uuid === lastSceneUUID.current) {
+      return;
+    }
+    lastSceneUUID.current = scene.uuid;
+    positionCameraForScene(scene, camera as any, actualAspect);
+  }, [trigger, viewportAspect, size.width, size.height, camera, sceneRef]); // Re-run when trigger, aspect ratio, or size changes
+
+  return null;
+}
+
+// Simple camera controller that monitors scene ref
+export function CameraController({
+  sceneRef,
+  trigger,
+  viewportAspect,
+}: CameraControllerProps) {
+  useSceneCamera(sceneRef, trigger, viewportAspect);
+  return null;
+}

apps/web/src/components/workflow/gltf-viewer/gltf-error-boundary.tsx

@@ -0,0 +1,73 @@
+import { Component, type ErrorInfo, type ReactNode } from "react";
+
+interface GltfViewerErrorBoundaryProps {
+  children: ReactNode;
+  onError: (error: Error, errorInfo: ErrorInfo) => void;
+}
+
+interface GltfViewerErrorBoundaryState {
+  hasError: boolean;
+}
+
+export class GltfViewerErrorBoundary extends Component<
+  GltfViewerErrorBoundaryProps,
+  GltfViewerErrorBoundaryState
+> {
+  constructor(props: GltfViewerErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(): GltfViewerErrorBoundaryState {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error("=== Enhanced 3D Error Boundary ===");
+    console.error("Error message:", error.message);
+    console.error("Error stack:", error.stack);
+    console.error("Component stack:", errorInfo.componentStack);
+    console.error("Error name:", error.name);
+    console.error("Full error object:", error);
+    console.error("Full errorInfo object:", errorInfo);
+
+    // Check for specific Three.js/glTF related errors
+    const isThreeJSError =
+      error.message.includes("THREE") ||
+      error.message.includes("glTF") ||
+      error.message.includes("GLTFLoader") ||
+      error.stack?.includes("three");
+    console.error("Is Three.js related error:", isThreeJSError);
+
+    this.props.onError(error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="flex items-center justify-center w-full h-full bg-red-50 dark:bg-red-900 rounded border border-red-200 dark:border-red-800">
+          <div className="flex flex-col items-center space-y-2 text-center p-4">
+            <div className="w-8 h-8 text-red-500 dark:text-red-400">
+              <svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.962-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"
+                />
+              </svg>
+            </div>
+            <span className="text-sm text-red-600 dark:text-red-400">
+              3D Rendering Error
+            </span>
+            <span className="text-xs text-red-500 dark:text-red-300">
+              WebGL may not be supported in your browser
+            </span>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

apps/web/src/components/workflow/gltf-viewer/gltf-loader.ts

@@ -0,0 +1,87 @@
+import { useGLTF } from "@react-three/drei";
+import { useMemo } from "react";
+import { LoadingManager } from "three";
+
+// Custom hook for authenticated GLTF loading
+export function useAuthenticatedGLTF(url: string) {
+  const extendLoader = useMemo(() => {
+    return (loader: any) => {
+      console.log("Extending GLTFLoader for authenticated requests");
+
+      // Set withCredentials to include cookies/auth headers
+      if (loader.manager && loader.manager.itemStart) {
+        // Create a custom loading manager that includes credentials
+        const manager = new LoadingManager();
+
+        // Override the manager's load method to add credentials
+        const originalResolveURL = manager.resolveURL?.bind(manager);
+        if (originalResolveURL) {
+          manager.resolveURL = function (url: string) {
+            return originalResolveURL(url);
+          };
+        }
+
+        loader.manager = manager;
+      }
+
+      // If the loader has a setWithCredentials method, use it
+      if (typeof loader.setWithCredentials === "function") {
+        loader.setWithCredentials(true);
+        console.log("Set withCredentials=true on GLTFLoader");
+      }
+
+      // If the loader supports request headers (some loaders do)
+      if (typeof loader.setRequestHeader === "function") {
+        // Add any additional headers if needed
+        console.log("GLTFLoader supports setRequestHeader");
+      }
+
+      // Override the load method to ensure credentials
+      const originalLoad = loader.load.bind(loader);
+      loader.load = function (
+        url: string,
+        onLoad?: any,
+        onProgress?: any,
+        onError?: any
+      ) {
+        console.log("Loading glTF with authentication:", url);
+
+        // Try to use fetch directly with credentials for better control
+        fetch(url, {
+          credentials: "include",
+          method: "GET",
+        })
+          .then((response) => {
+            if (!response.ok) {
+              throw new Error(
+                `HTTP ${response.status}: ${response.statusText}`
+              );
+            }
+            return response.arrayBuffer();
+          })
+          .then((buffer) => {
+            // Create a blob URL for the Three.js loader to use
+            const blob = new Blob([buffer], { type: "model/gltf-binary" });
+            const blobUrl = URL.createObjectURL(blob);
+
+            // Load using the blob URL (no auth needed)
+            return originalLoad(
+              blobUrl,
+              (gltf: any) => {
+                URL.revokeObjectURL(blobUrl); // Clean up
+                if (onLoad) onLoad(gltf);
+              },
+              onProgress,
+              onError
+            );
+          })
+          .catch((error) => {
+            console.error("Authenticated glTF fetch failed:", error);
+            if (onError) onError(error);
+          });
+      };
+    };
+  }, []);
+
+  return useGLTF(url, false, false, extendLoader);
+}

apps/web/src/components/workflow/gltf-viewer/gltf-model.tsx

@@ -0,0 +1,54 @@
+import { useEffect, useMemo, useRef } from "react";
+import type { Group } from "three";
+import * as THREE from "three";
+
+import { useAuthenticatedGLTF } from "./gltf-loader";
+import type { GltfModelProps } from "./types";
+import { cloneSceneWithMaterials } from "./utils";
+
+export function GltfModel({ url, onSceneLoad, wireframeMode }: GltfModelProps) {
+  const groupRef = useRef<Group>(null);
+  const { scene } = useAuthenticatedGLTF(url);
+
+  // Clone the scene once per loaded source to isolate materials/textures
+  const clonedScene = useMemo(() => {
+    if (!scene) return null;
+    return cloneSceneWithMaterials(scene as any);
+  }, [scene]);
+
+  useEffect(() => {
+    if (clonedScene) {
+      // Fix material issues
+      clonedScene.traverse((child) => {
+        if ((child as any).isMesh) {
+          const mesh = child as any;
+          if (mesh.material) {
+            const mat = mesh.material as THREE.Material;
+
+            mat.visible = true;
+            (mat as any).transparent = true;
+
+            if ("wireframe" in mat) {
+              (mat as any).wireframe = wireframeMode || false;
+            }
+
+            if (mat.type === "MeshStandardMaterial") {
+              const stdMat = mat as THREE.MeshStandardMaterial;
+              stdMat.needsUpdate = true;
+            }
+          }
+        }
+      });
+
+      if (onSceneLoad) {
+        onSceneLoad(clonedScene as any);
+      }
+    }
+  }, [clonedScene, onSceneLoad, wireframeMode]);
+
+  if (!clonedScene) {
+    return null;
+  }
+
+  return <primitive ref={groupRef} object={clonedScene} />;
+}