Changes

src/pages/Index.tsx

@@ -5,11 +5,13 @@ import { Button } from '@/components/ui/button';
 import { useModelStore } from '@/stores/useModelStore';
 import { toast } from 'sonner';
 import { generateDemoBeamGLB } from '@/lib/generateDemoBeam';
+import { getSupportedExtension, convertToGLB, ACCEPTED_EXTENSIONS } from '@/lib/convertToGLB';
 
 const Index = () => {
   const navigate = useNavigate();
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [loadingDemo, setLoadingDemo] = useState(false);
+  const [converting, setConverting] = useState(false);
   const { model, setModel, xrSupported, setXrSupported } = useModelStore();
 
   useEffect(() => {
@@ -20,16 +22,37 @@ const Index = () => {
     }
   }, [setXrSupported]);
 
-  const handleFileUpload = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleFileUpload = useCallback(async (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     if (!file) return;
-    if (!file.name.toLowerCase().endsWith('.glb')) {
-      toast.error('Formato inválido. Por favor, selecione um arquivo .GLB');
+
+    const ext = getSupportedExtension(file.name);
+    if (!ext) {
+      toast.error('Formato inválido. Selecione um arquivo .GLB, .OBJ ou .STL');
       return;
     }
-    const url = URL.createObjectURL(file);
-    setModel({ fileName: file.name, fileSize: file.size, url });
-    toast.success(`Modelo "${file.name}" carregado com sucesso!`);
+
+    if (ext === 'glb') {
+      const url = URL.createObjectURL(file);
+      setModel({ fileName: file.name, fileSize: file.size, url });
+      toast.success(`Modelo "${file.name}" carregado com sucesso!`);
+      return;
+    }
+
+    // Convert OBJ/STL to GLB
+    setConverting(true);
+    try {
+      const buffer = await file.arrayBuffer();
+      const { blob, fileName, fileSize } = await convertToGLB(buffer, ext, file.name);
+      const url = URL.createObjectURL(blob);
+      setModel({ fileName, fileSize, url });
+      toast.success(`"${file.name}" convertido para GLB e carregado!`);
+    } catch (err) {
+      console.error(err);
+      toast.error(`Falha ao converter "${file.name}"`);
+    } finally {
+      setConverting(false);
+    }
   }, [setModel]);
 
   const handleLoadDemo = useCallback(async () => {
@@ -60,7 +83,7 @@ const Index = () => {
       <input
         ref={fileInputRef}
         type="file"
-        accept=".glb"
+        accept={ACCEPTED_EXTENSIONS}
         className="hidden"
         onChange={handleFileUpload} />
 
@@ -84,12 +107,13 @@ const Index = () => {
         <Button
           variant="outline"
           className="h-28 w-full flex-col gap-3 border-dashed border-2 text-muted-foreground hover:border-primary hover:text-primary transition-all"
-          onClick={() => fileInputRef.current?.click()}>
+          onClick={() => fileInputRef.current?.click()}
+          disabled={converting}>
 
-          <Upload className="h-8 w-8" />
+          {converting ? <Loader2 className="h-8 w-8 animate-spin" /> : <Upload className="h-8 w-8" />}
           <div className="text-center">
-            <p className="text-sm font-semibold">Importar Modelo GLB</p>
-            <p className="text-xs text-muted-foreground">Escala 1:1 — Unidades em mm</p>
+            <p className="text-sm font-semibold">{converting ? 'Convertendo modelo…' : 'Importar Modelo 3D'}</p>
+            <p className="text-xs text-muted-foreground">GLB · OBJ · STL — Escala 1:1</p>
           </div>
         </Button>