Agregar menú de selección

src/main.tsx

@@ -1,17 +1,18 @@
 // import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import App from './pages/App.tsx'
 import { BrowserRouter, Route, Routes } from "react-router";
 import Login from './pages/Login.tsx';
 import Previewer from './pages/Previewer.tsx';
 import NotFound from './pages/NotFound.tsx';
+import Home from './pages/Home.tsx';
 
 createRoot(document.getElementById('root')!).render(
   <BrowserRouter>
     <Routes>
-      <Route path="/" element={<App />} />
+      <Route path="/" element={<Home />} />
       <Route path="/login" element={<Login />} />
       <Route path="/previewer" element={<Previewer modelUrl="/3d/motor_de_combustion/scene.gltf" />} />
+      <Route path="/previewer2" element={<Previewer modelUrl="/3d/raspberry_pi_cam_v2.1/scene.gltf" />} />
       <Route path="*" element={<NotFound />} />
     </Routes>
   </BrowserRouter>,

src/pages/Home.tsx

@@ -0,0 +1,79 @@
+import { useNavigate } from "react-router";
+import { Canvas } from "@react-three/fiber";
+import { Environment, useGLTF } from "@react-three/drei";
+import { Button } from "@/components/ui/button";
+
+const models = [
+    {
+        name: "Motor de Combustión",
+        url: "/3d/motor_de_combustion/scene.gltf",
+        route: "/previewer",
+    },
+    {
+        name: "Raspberry Pi Cam V2.1",
+        url: "/3d/raspberry_pi_cam_v2.1/scene.gltf",
+        route: "/previewer2",
+    },
+];
+
+function ModelPreview({ url }: { url: string }) {
+    const { scene } = useGLTF(url);
+
+    // Define heuristic parameters for best perspective
+    const parameters: Record<string, { position: [number, number, number]; rotation: [number, number, number]; scale: number }> = {
+        "/3d/motor_de_combustion/scene.gltf": {
+            position: [0, -1.5, 0],
+            rotation: [0.2, Math.PI / 4, 0],
+            scale: 0.01,
+        },
+        "/3d/raspberry_pi_cam_v2.1/scene.gltf": {
+            position: [0, -0.5, 0],
+            rotation: [0.1, Math.PI / 6, 0],
+            scale: 0.5,
+        },
+    };
+
+    const { position, rotation, scale } = parameters[url] || { position: [0, 0, 0], rotation: [0, 0, 0], scale: 0.02 };
+
+    return <primitive object={scene} position={position} rotation={rotation} scale={scale} />;
+}
+
+export default function Home() {
+    const navigate = useNavigate();
+
+    return (
+        <div className="w-full grow bg-gradient-to-br from-gray-100 to-gray-300/20 shadow-xl shadow-gray-400/10 flex flex-col items-center justify-center p-5 rounded-lg backdrop-blur-lg">
+            <h1 className="text-4xl font-extrabold mb-8 font-display text-gray-900">Selecciona un Modelo 3D</h1>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+                {models.map((model, index) => (
+                    <div
+                        key={index}
+                        className="bg-white p-6 rounded-2xl shadow-lg flex flex-col items-center border border-white/20 transition-transform hover:scale-105 hover:shadow-xl"
+                    >
+                        {/* 3D Preview */}
+                        <div className="w-64 h-64 bg-white rounded-xl overflow-hidden border border-white/20 shadow-md">
+                            <Canvas camera={{ position: [0, 1, 3], fov: 30 }}>
+                                <Environment preset="city" />
+                                <ModelPreview url={model.url} />
+                            </Canvas>
+                        </div>
+
+                        {/* Model Name */}
+                        <h2 className="text-2xl font-semibold mt-6">{model.name}</h2>
+
+                        {/* Navigation Button */}
+                        <Button
+                            className="mt-6 bg-gradient-to-r from-blue-600 to-purple-600 px-6 py-3 rounded-lg shadow-lg hover:from-blue-500 hover:to-purple-500 transition-all font-display"
+                            onClick={() => navigate(model.route)}
+                        >
+                            Ver Modelo
+                        </Button>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+}
+
+// Preload models for performance
+models.forEach(model => useGLTF.preload(model.url));