{loading ? (
@@ -245,13 +256,14 @@ export default function FilePreview({ file, onClose, downloadToken }: FilePrevie
// --- Helpers ---
-type PreviewType = 'image' | 'video' | 'audio' | 'text' | 'code' | 'pdf' | 'stl' | 'unsupported';
+type PreviewType = 'image' | 'video' | 'audio' | 'text' | 'code' | 'pdf' | 'stl' | '3mf' | 'unsupported';
function getPreviewType(file: { name: string; mime_type: string }): PreviewType {
const ext = file.name.split('.').pop()?.toLowerCase() || '';
if (ext === 'pdf' || file.mime_type === 'application/pdf') return 'pdf';
if (ext === 'stl' || file.mime_type === 'model/stl') return 'stl';
+ if (ext === '3mf' || file.mime_type === 'model/3mf') return '3mf';
if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'bmp'].includes(ext)) return 'image';
if (['mp4', 'webm', 'ogg'].includes(ext)) return 'video'; // Only browser-supported videos
if (['mp3', 'wav', 'flac', 'm4a', 'aac'].includes(ext)) return 'audio';
diff --git a/frontend/src/components/ThreeMfPreview.tsx b/frontend/src/components/ThreeMfPreview.tsx
new file mode 100644
index 0000000..f31f024
--- /dev/null
+++ b/frontend/src/components/ThreeMfPreview.tsx
@@ -0,0 +1,85 @@
+import React, { useState, useEffect } from 'react';
+import { Canvas } from '@react-three/fiber';
+import { OrbitControls, Stage } from '@react-three/drei';
+import { ThreeMFLoader } from 'three-stdlib';
+import { Loader2 } from 'lucide-react';
+import * as THREE from 'three';
+
+interface ThreeMfPreviewProps {
+ url: string;
+}
+
+function Model({ url, onLoad, onError }: { url: string; onLoad: () => void; onError: (e: any) => void }) {
+ const [model, setModel] = useState
(null);
+
+ useEffect(() => {
+ const loader = new ThreeMFLoader();
+ loader.load(
+ url,
+ (group) => {
+ // Adjust materials for shadow casting
+ group.traverse((child) => {
+ if ((child as THREE.Mesh).isMesh) {
+ const mesh = child as THREE.Mesh;
+ mesh.castShadow = true;
+ mesh.receiveShadow = true;
+ }
+ });
+ setModel(group);
+ onLoad();
+ },
+ undefined,
+ (err) => {
+ onError(err);
+ }
+ );
+ }, [url, onLoad, onError]);
+
+ if (!model) return null;
+ return ;
+}
+
+export default function ThreeMfPreview({ url }: ThreeMfPreviewProps) {
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+
+ return (
+
+ {loading && !error && (
+
+
+ Loading 3D Model...
+
+ )}
+
+ {error && (
+
+
+
Failed to load 3MF file
+
{error.message}
+
+ )}
+
+
+
+
+