80 lines
3.2 KiB
TypeScript
80 lines
3.2 KiB
TypeScript
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));
|